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
