Advanced Application

Development
(CSE-214)
week-2 : Angular - Typescript

Dr. Alper ÖZCAN

Akdeniz University
[email protected]

1
What is Angular ?

2
What is Single Page Application ?

3
 What is Single Page Application ?

• Single-Page Applications (SPAs) are web apps that load all the
necessary HTML, CSS, and JavaScript in the initial page load, and
then dynamically update their Document Object Model (DOM)
and retrieve extra data based on user interactions.

4
What is Document Object Model (DOM) ?

The DOM tree looks like a hierarchical structure of nodes, where

each node represents an element, attribute, or text in the
document. Here is an example of a DOM tree for a simple HTML
document:

5
What is Document Object Model (DOM) ?

6
 What is Document Object Model (DOM) ?

• DOM stands for Document Object Model, which is a standard way

of representing and manipulating web documents.
7
 What is Document Object Model (DOM) ?

• The Document Object Model (DOM) is an interface between all

JavaScript code and the browser, specifically between HTML
documents rendered in and by the browser.

• The DOM represents the document as a tree of objects, each with

properties and methods that can be accessed and changed by
JavaScript. 8
What is Document Object Model (DOM) ?

The Document Object Model

(DOM) is a programming
interface for HTML

It represents the hierarchical

structure of HTML or XML
documents as a tree of
objects, where each object
corresponds to elements,
attributes, and text within the
HTML.

9
JavaScript Code for Hierarchical DOM Traversal

10
 JavaScript Code for Hierarchical DOM Traversal

JavaScript function that hierarchically traverses the DOM tree and logs each
node’s structure: (1) Starts at document.body and recursively traverses all child
elements. (2) Indents nodes based on their depth level in the tree. (3) Prints the
node name in the console in a hierarchical format.
11
DOM Manipulation Using var

12
 var is function-scoped (NOT block-scoped)

Variables declared with var inside a function are accessible throughout the entire
function, but not outside of it.

13
 var is hoisted but initialized as undefined

JavaScript hoists (move from lower to higher position) var declarations,

meaning the variable is moved to the top of its function scope, but it is initialized as
undefined until assigned a value.

14
 Global Scope Pollution: var can leak into the
global scope

If var is declared inside a function without using var inside another function, it
can accidentally become a global variable.
15
 What is Single Page Application ?

• SPAs differ from the traditional approach of requesting

new web documents from the backend servers based on
user actions, sometimes called Server-Side Rendering
(SSR), which reloads all assets at every user request —
although some assets would be cached by the browser.

16
What is Single Page Application ?

17
 What is Single Page Application ?

• Single-page applications (SPA) frameworks made it easier to build web

applications that advanced beyond JavaScript and jQuery. Angular is used to
create entire web applications in JavaScript.

• Before the advent of modern JavaScript frameworks, most websites were

implemented as multi-page applications. But this makes traditional
applications resource-intensive to web servers because sending entire web
pages for every request consumes excessive bandwidth and uses CPU time
to generate dynamic pages.
18
Traditional Application

19
 Traditional Application

• In the pre-SPA days, a user would visit a URL in a browser and request one HTML
file and all its associated HTML, CSS, and JavaScript files from a web server.

• After some network delay, the user sees the rendered HTML in the browser (client)
and starts to interact with it.

• If your website is complex, the site browsing experience may appear slow to
users. It will be even slower if they have a poor or limited internet connection.

• To solve this problem, many web developers build their web applications as SPAs.
20
Single-Page Application

21
 Single Page Application

An SPA allows the user to interact with the website without

the application needing to download the entire new web
pages.

Instead, it rewrites the current web page as the user interacts

with it. The result is a browsing experience that feels faster and
more responsive to user input. When the user navigates to the
web application in the browser, the web server returns the
necessary resources to run the application.

22
Single Page Application

23
Traditional Application

24
Angular Solution

25
Angular History

26
Angular History + Future

27
Angular

28
 Angular

Set up Dev Environment

29
Angular Development Tools

30
Command-Line Tools

31
 MS Windows - Install Development Tools

• Visual Studio Code

• Node (Node is the runtime environment for executing JavaScript code

from the command-line. By using Node, you can create any type of
application using JavaScript including server-side / backend
applications. We’ll use Node to run applications that we develop using
TypeScript and Angular)

• Npm (Node Package Manager)

• Tsc (tsc is the TypeScript compiler. We use tsc to compile TypeScript

code into JavaScript code. We can install the TypeScript compile using
the Node Package Manager(npm))

32
TypeScript Basics

33
Angular Development

34
Angular Development

35
TypeScript

36
Troubleshooting

37
Troubleshooting

38
TypeScript

39
TypeScript

40
TypeScript

41
TypeScript

42
TypeScript

43
TypeScript

44
TypeScript Variables

45
Define Variables

46
Examples

47
Examples

48
TypeScript: "let" keyword

49
 Difference Between let and var in JavaScript

The let and var keywords are used to declare variables in JavaScript, but they
behave differently in terms of scoping, hoisting, and redeclaration

50
 Scope Issue (Function vs. Block Scope)

var is function-scoped, meaning it's accessible anywhere inside the function.

let is block-scoped, meaning it's only accessible inside the block {} where it was
declared.
51
 Hoisting Issue (Undefined Behavior)

var declarations are hoisted, but their values are set to undefined until assignment.
let is also hoisted, but accessing it before initialization results in an error

52
 Capturing in Loops (var Pitfall)

var does not create a new variable for each iteration of a loop.
It captures the last value, causing unexpected behavior in asynchronous code.
Fix with let (Creates a New Variable in Each Iteration)

53
asynchronous code

Asynchronous programming in JavaScript helps

execute time-consuming tasks without blocking the
main thread.

setTimeout() is an asynchronous function.

JavaScript does not wait for it and moves to the next

line.
54
TypeScript is Strongly Typed

55
TypeScript is Strongly Typed

56
Type: any

57
Displaying Output

58
Run the App

59
Template Strings

60
For Loops

61
For Loop - Array of numbers

62
Simplified For Loop

63
Conditionals

64
Growable Arrays

65
Creating Classes

66
Basic Class Structure

67
Properties

68
Construct an Instance

69
Create a Constructor

70
Construct an Instance

71
Access Modifiers

72
Mark the properties as "private"

73
Compiling the Code

74
Compiling the Code

75
Compiling the Code

76
Compiling the Code

77
Class

78
Getter / Setter Methods

79
Getter / Setter Methods

80
Getter / Setter Methods

81
TypeScript: Accessors - Get / Set

82
TypeScript: Accessors - Get / Set

83
TypeScript: Accessors - Get / Set

84
Compiler flag

85
Problem with too many compiler flag

86
tsconfig.json

87
tsconfig.json

88
Compiling your Project

89
TypeScript: Accessors - Get / Set

90
Parameter Properties

91
Constructor - Traditional Approach

92
Constructor - Parameter Properties

93
Parameter Properties - In Action

94
Parameter Properties - In Action

95
Code Organization

96
TypeScript Modules

97
TypeScript Modules

98
Module Example

99
Module Example

100
Inheritance

101
Inheritance Example

102
Inheritance Example

103
Creating a main app

104
Rectangle

105
Creating a main app

106
Creating an Array of Shapes

107
Abstract Class

108
Abstract Class Example

109
Abstract Class Example

110
Circle

111
Creating an Instance

112
Creating an Array of Shapes

113
Interfaces

114
Interface Example

115
Interface Example

116
Creating a Main App

117
Creating an Array of Coaches

118
 interfaces and abstract classes: Key
Differences

In Angular (TypeScript), both interfaces and abstract classes help define the
structure of objects, but they serve different purposes and have key differences.
119
 interfaces and abstract classes: Key
Differences

Use an Interface when you just need to define a contract/shape for objects.
Use an Abstract Class when you want to provide a base class with some shared
implementation and enforce method overriding.
120