Introduction to Angular
COURSE CS-469 (OPTIONAL)
MODERN TOPICS
IN HUMAN – COMPUTER INTERACTION
UNIVERSITY OF CRETECOMPUTER SCIENCE DEPARTMENT
▪ What is Angular ?
▪ Angular Version History
▪ Webpage and DOM
▪ DOM Manipulation
▪ JavaScript and jQuery
▪ Why Angular?
▪ What is SPA?
▪ Angular Features
▪ Angular Installation
▪ Basics Building Blocks of Angular
▪ Angular Architecture
Outline
2CS-469: Modern Topics in Human – Computer Interaction
▪ Frontend/Client side JavaScript framework
▪ Created & maintained by Google
▪ Used to build powerful single page applications (SPAs)
▪ Part of the very powerful MEAN stack
▪ What HTML would be if created for dynamic web applications
What is Angular ?
3CS-469: Modern Topics in Human – Computer Interaction
▪ AngularJS / Angular 1
▪ Angular 2: Complete rewrite of AngularJS
▪ Angular 3: Skipped
▪ Angular 4: Backward compatible with Angular 2
▪ Angular 6: Easier updates to newer version
▪ Angular 7: Better performance
▪ Angular 8: Current Version
Angular Version History
4CS-469: Modern Topics in Human – Computer Interaction
Webpage and DOM
1. <html>
2. <head>
3. <title>Angular 8 Tutorial</title>
4. </head>
5. <body>
6. <h1>Welcome to Angular 8 Tutorial</h1>
7. <p>Angular is a JS framework</p>
8. </body>
9. </html>
HTML Markup DOM Tree of the HTML document
html
head
title
body
h1 p
5CS-469: Modern Topics in Human – Computer Interaction
DOM Manipulation
html
head
title
body
h1 p
html
head
title
body
h1 p
<h1> Welcome to Angular Tutorial </h1> <h1> Welcome </h1>
6CS-469: Modern Topics in Human – Computer Interaction
JavaScript & jQuery
▸JavaScript is a programming language
designed for use in a web browser.
▸Used for manipulating DOM
▸Example:
Document.body.style.background = red;
▸jQuery is a library built in JavaScript
to automate and simplify common
tasks.
▸Used for manipulating DOM
▸Example:
$('body').css ('backgroud', '#ccc');
7CS-469: Modern Topics in Human – Computer Interaction
Why Angular ?
DOM Manipulation
Animation Support
Form Validation
AJAX / JSON
RESTful API
Deep Linking Routing
2 Way Data Binding
jQuery Angular
8CS-469: Modern Topics in Human – Computer Interaction
▪ A Single Page Application is a web application that requires only a single
page load in web browser.
▪ Whole page is not reloaded every time
▪ Your browser fully renders the DOM once
▪ Later any server interactions is performed by JavaScript which modifies the view
What is SPA?
Mail inbox
Categories
9CS-469: Modern Topics in Human – Computer Interaction
Traditional Way Vs Single Page Application
Traditional Way
Life Cycle
Single Page Application
Life Cycle
Client Server
Initial Request
Form Post
Client Server
Initial Request
AJAX
10CS-469: Modern Topics in Human – Computer Interaction
Angular Introduction
11
Useful for building
complex applications in
the browser (and beyond)
Introduction of Object
Oriented Web Development
using Typescript
Angular accomplished a lot
by embracing HTML
JavaScript & CSS
OpenSource Client Side
JavaScript framework
created by Google
11/36CS-469: Modern Topics in Human – Computer Interaction
Angular Features
TypeScript Support
Speed & Performance
Modular
Supports Mobile, Tablets,
etc.
12CS-469: Modern Topics in Human – Computer Interaction
Angular Quick Start (1/2)
C:\> npm install -g @angular/cli
C:\> ng new my-app
13CS-469: Modern Topics in Human – Computer Interaction
▪ Step 1: Set up the Development Environment
▪ Install NodeJS - Latest LTS version ( https://nodejs.org/en/download/ )
▪ Step 2: Install Angular CLI
▪ Angular CLI is a command line interface for Angular
▪ Step 3: Create a new project
▪ Step 4: Serve the application
▪ Go to the project directory and launch the server
▪ Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/
C:\> cd my-app
C:\my-app> ng serve --open
14CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component Metadata Template
Data Binding
Module
Services Directives
15CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Module is a class
with @NgModule
Metadata
Every Angular
app has at least
one root module
Encapsulation of
different similar
functionalities
Single Module
exportSimilar
Functionalities
Components
Directives
Pipes
16CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Decorator
Declaring all
the
components
Importing
modules
Provide
Services to
all module’s
component
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
17CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Home page Info
Navigation Bar
18CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Features
Component
Event
Component
19CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Importing
component
decorator
Decorator
Meta data
Exporting
component
class
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
20CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Metadata describes how
to process the class
Decorator is used to
attach metadata
Example:
MyClass
@Component ( {
…
} )
Decorator
Component
{ }
AppClass
@NgModule( {
…
} )
Decorator
Module
{ }
21CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
css styling
html template for
the component
creates an instance
of the component
Decorator that specifies how
to process an Angular class
22CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Use to define
view of a
component
Looks like
HTML, except
for a few
differences.
Describes how
the component
is rendered on
the page.
Root
Component
{ }
Root
Template
< >
Child A
Component
{ }
Child A
Template
< >
Child B
Component
{ }
Child B
Template
< >
Child C
Component
{ }
Child C
Template
< >
23CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
▸Types of data binding
1. Interpolation
2. Property Binding
3. Event Binding
4. 2 Way Data Binding
DOM Component{{ value }}
DOM Component[property] = “value”
DOM Component[(ngModel)]
DOM Component
(event)= “event
handler”
24CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Component A
{ }
Template A
< >
Property Binding
Event Binding
Data binding plays an important role in communication
between a template and its component.
25CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Parent Component
{ }
Parent Template
< >
Property Binding
Event Binding
Data binding is also important for communication between
parent and child components.
Child Component
{ }
26CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
▸Services is a broad category encompassing any value, function, or feature that your application needs.
{ }
{ }
Directives
Components
Services
Data Access
Logging
Business Logic
ConfigurationServices
Example:
logging
servicedata service message bus tax calculator
27CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Service Class
Service method
for retrieving
data
28CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Creates a new instance
of class along with its
required dependencies
Used to provide
services to a component
Service 1 Service 2 Service 3
Service 2
Component
Dependency Injection
29CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Importing
Service Class
Injecting
Service into
the Component
Retrieving data
30CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
▸Changes the appearance or the behavior of a DOM
element
1.
2.
3.
Components Directives with a template
Structural DirectiveAdds & removes DOM elements to
change DOM layout
Attribute DirectiveChanges the appearance or
behavior of an element
31CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Structural DirectiveAdds & removes DOM elements to
change DOM layout
Iterating over the movies list
32CS-469: Modern Topics in Human – Computer Interaction
Building Blocks of Angular
Component
MetadataMetadata
Template
Data Binding
Module
Services
Directives
Attribute DirectiveChanges the appearance or
behavior of an element
Importing Directive,
ElementRef &
HostListener
Directive Metadata
Injecting ElementRef
to access the DOM
elements
Bold the text on
cursor hover
Un-bold the text
33CS-469: Modern Topics in Human – Computer Interaction
Angular Architecture
Module
Components
{ }
Module
Service
{ }
Module
Value
3.14
Module
Fn
Injectors
Services
Metadata
Directives
{ }
Property
Binding
Event
BindingMetadata
Template
< >
Components
34CS-469: Modern Topics in Human – Computer Interaction
Demo Time