COURSE CS-469 (OPTIONAL) MODERN TOPICS IN HUMAN …hy469/files/lectures/02_Angular.pdf · AngularJS / Angular 1 Angular 2: Complete rewrite of AngularJS Angular 3: Skipped Angular

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 ?


▪ 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


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


DOM Manipulation

html

head

title

body

h1 p

html

head

title

body

h1 p

<h1> Welcome to Angular Tutorial </h1> <h1> Welcome </h1>


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');


Why Angular ?

DOM Manipulation

Animation Support

Form Validation

AJAX / JSON

RESTful API

Deep Linking Routing

2 Way Data Binding

jQuery Angular


▪ 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

Mail

Categories


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


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.


Angular Quick Start (1/2)

C:\> npm install -g @angular/cli

C:\> ng new my-app


▪ 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

https://nodejs.org/en/download/

▪ 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


http://localhost:4200/

Building Blocks of Angular

Component Metadata Template

Data Binding

Module

Services Directives



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



Decorator

Declaring all

the

components

Importing

modules

Provide

Services to

all module’s

component

Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives



Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives

Home page Info

Navigation Bar



Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives

Features

Component

Event

Component



Importing

component

decorator

Decorator

Meta data

Exporting

component

class

Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives



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

{ }



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



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

< >



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”



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.



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

{ }



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



Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives

Service Class

Service method

for retrieving

data



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



Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives

Importing

Service Class

Injecting

Service into

the Component

Retrieving data



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



Component

MetadataMetadata

Template

Data Binding

Module

Services

Directives

Structural DirectiveAdds & removes DOM elements to

change DOM layout

Iterating over the movies list



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


Angular Architecture

Module

Components

{ }

Module

Service

{ }

Module

Value

3.14

Module

Fn

Injectors

Services

Metadata

Directives

{ }

Property

Binding

Event

BindingMetadata

Template

< >

Components


Demo Time

Documents

COURSE CS-469 (OPTIONAL) MODERN TOPICS IN HUMAN …hy469/files/lectures/02_Angular.pdf · AngularJS / Angular 1 Angular 2: Complete rewrite of AngularJS Angular 3: Skipped Angular