SunilOS Angular 8 9/21/2019 Copyright (c) SunilOS ( Rays ) 1Contents C) Introduction & Overview QO) MVC Architecture Installation and Configuration O Getting Started Q Variable and Operators Q Control Statements O) Directives QO Module QO Component 9/21/2019 SunilOS O Pipe QO Services Q Router Q Http Client Q Forms Copyright (c) SunilOS ( Rays ) 2SunilOS What is ANGULAR O Angular is a JavaScript Framework Q Angular is used to build client-side applications using HTML Q Angular bootstraps JavaScript with HTML tags. Q Angular is used to make reach UI application. O Angular enhances UI experience for User. Q) Angular code is written in TypeScript language o TypeScript is compiled into JavaScript o JavaScript is used in HTML pages Ea = ~ 9/21/2019 Copyright (c) SunilOS ( Rays ) 3Angular enhances HTML Sunilos Q Angular has set of directives to display dynamic contents at HTML page. Angular extends HTML node capabilities for a web application. @ Q Angular provides data binding and dependency injection that reduces line of code. ~€>- Q Angular extends HTML attributes with Directives, and binds data to HTML with Expressions. Q Angular follows MVC Architecture 9/21/2019 Copyright (c) SunilOS ( Rays ) 4Angular — REST Web Services Q) Angular communicates with RESTFul web services in modern applications Q) RESTful Web Services are accessed by HTTP call QO RESTful Web Services exchange JSON data oie OL wes | JSON 9/21/2019 Copyright (c) SunilOS ( Rays ) 5Angular Application a“ Q)An application is a Module UO Module contains components OComponent uses Services QO Services contains data and reusable business methods O Basic building block of Angular is Component Olt is said that Angular follows Component/Service architecture. Internally it follows MVC Architecture 9/21/2019 Copyright (c) SunilOS ( Rays ) 6Angular Application ( Contd ""°* Application Module vm Coos nm — (om wu Module Module + An Application is a Module * Modules are reusable * One Module’s components and services can be used by another module 9/21/2019 Copyright (c) SunilOS ( Rays ) 7MVC Architecture =_— Application Module ‘Component \ Request wil | ¥ controlierModel >| ‘Service > REST API ata ~| binding iecaee Use pesos PY “ya | Directives ] RouterModule FormsModule ‘HttpClientModule 9/21/2019 Copyright (c) SunilOS ( Rays ) 8MVC Architecture SunilOS @® & # oe 9/21/2019 View: contains display logics, developed using HTML and Angular Directives Controller: Contains navigation logic. Decides data and view to be displayed Model: Carry data between View and Controller Copyright (c) SunilOS ( Rays ) 9Installation and Configuration 9/21/2019 Copyright (c) SunilOS ( Rays ) 10Install Node om Q) Node.js development environment can be setup in Windows, Mac, Linux and Solaris. Q Following development environment and editor are required to develop a node application: 0 Node.js o Node Package Manager (NPM) o IDE (Integrated Development Environment) or TextEditor QO Download installer and editor from © https://nodejs.org: install node and npm 0 https://code. visualstudio.com: Visual Studio Code QO You can check npm version by following command o npm -v 9/21/2019 Copyright (c) SunilOs ( Rays ) 1Install Angular CLI SunilOS Q) You can run following command to install Angular CLL QOnpm install @angular/cli -g Q After installation you can check version of Angular by running the following command: Ong -version Q CLI stand for Command Line Interface 9/21/2019 Copyright (c) SunilOS ( Rays ) 2Angular Project = OAngular provides CLI command to generate project template =Project 9/21/2019 Copyright (c) SunilOs ( Rays ) BCreate Project -_ Q Angular project is created using command: o ng new project-name QO Weare assuming project name is SOS o ng new SOS o Above command will create project directory structure. Default component and configuration files is generated inside c: / SOS folder. QO Inside c:/SOS folder it will create following subfolders © c:/SOS/e2e o c:/SOS/node_modules o c:/SOS/src/app QO All components will be created in c: /sos/src/app folder 9/21/2019 Copyright (c) SunilOs ( Rays ) 14Run the project ~ Q Run following command to run angular project o c:/SOS>ng serve -o Q It will start angular server at default port number #4200 and make application accessible using http://localhost:4200 Welcome to myproiect! 9/21/2019 Copyright (c) SunilOs ( Rays ) 15Project flow Root Component ‘Sub-Components hitp request »| index nim [Beotstrae|_| app componentts mt Login Component a [= braino app.component htm! [4 Welcome Component ‘Main Module Routing Module Makstieet ‘app.module ts | ‘app-routing module ts ‘Sonpenet “define routes> 9/21/2019 Copyright (c) SunilOS ( Rays ) 16Project Key components “ QO File app .module. ts contains configuration of the application. O File app-routing.module.ts contains url mapping of components. Components are accessed by their mapped urls. QO File app.component.ts contains definition of Root- Component O File index .htm1 is first page of application. It bootstraps root component. Q For new UI screens new components are created called sub components. 9/21/2019 Copyright (c) SunilOs ( Rays ) v7Getting Started eis 9/21/2019 Copyright (c) SunilOS ( Rays ) 18SunilOS Login Q Let’s create an application which contains Login and Welcome pages. O Login page has HTML form that accepts Login-id and password. Q When you submit Login page, credential is authenticated and Welcome page is displayed on successful login. Login Welcome Login is successful Login: admin Password: admin Signin 9/21/2019 Copyright (c) SunilOs ( Rays ) 19Login & Welcome Components nilos Q Basic building block of Angular is Component Q) One component is created for one View page. Q We have Login and Welcome 2 pages thus 2 components will be created. Login Welcome 9/21/2019 Copyright (c) SunilOs ( Rays ) 20SunilOS Create components Q) We are assuming that you have creates SOS project from previous slides and we will create Login and Welcome page in same project. QO Use following command in c:\SOS folder to generate Login component ong generate component Login "or ong g c Login ong g c Welcome O Above commands will generate Login and Welcome components and will automatically make entry in app.module.ts configuration file. 9/21/2019 Copyright (c) SunilOs ( Rays ) 21Generated Files =~ OWelcome :/S0S/src/app/welcome/welcome. component .css >: /SOS/src/app/welcome/welecome. component. html oooo c 7 c:/SOS/src/app/welcome/welcome.component.ts c:/SOS/src/app/welcome/welcome.component.spec.ts ULogin /80S/src/app/login/login.component.css /S08/sre/app/login/legin.component.htm1 c: c: ¢:/80$/sre/app/login/login.component.ts c: oooo /S0S/sxrc/app/login/login.component.spec.ts 9/21/2019 Copyright (c) SunilOs ( Rays ) 22. SunilOS Define routes C1 In order to access pages, define routes in app-routing.module.ts const routes: Routes = [ { path: 'login', component: LoginComponent}, { path: 'welcome', component: WelcomeComponent} i oooadg #app.module.ts file @NgModule ({ imports: [RouterModule.forRoot (routes) ] exports: [RouterModule] ) Access pages using following URLs © http://ocalhost:4200/login o http://localhost:4200/ welcome ooooco 9/21/2019 Copyright (c) SunilOs ( Rays ) 23SunilOS Welcome page O Lets initialize a variable message and display at html page O File welcome.component.ts o export class WelcomeComponent implements OnInit { ° message = ‘Welcome to Sunilos’; ° } od O File welcome. component. html o

{{ message }}

@® Q URL o http: //localhost:4200/welcome Gh 9/21/2019 Copyright (c) SunilOS ( Rays ) 24: SunilOS Login controller QO File login.component.ts QO export class LoginComponent implements OnInit { Q userId = 'Enter User ID'; Ql password = '''; GQ message = ‘’; Qa constructor (private router: Router) {} Q signIn () { Qa if(this.userId == ‘admin’ Q && this.password =='admin') { a this. router.navigateByUrl ('/welcome') ; Q jelse{ a this.message = 'Invalid login id or password'; Q Qa } 92/2019 Copyright (c) SunilOS ( Rays ) 25Login View —— OQ LoginsHI> Q { {message} }

Q

QQ User ID: Q Password: Q Sign In Q

Q. Directive [ (ngMode1) | is used for two-way data binding with attributes userld and password of class LoginComponent. Q Directive (click) is used to bind on-click event. Method signin () is Sign-In button is clicked. Q. Directive ngModel is provided by inbuild FormsModule module. This module will be imported in app. module. ts. 1 URL :hittp:/locathost:4200/login Copyright (c) SunilOS ( 9/21/2019 Rays ) 26Angular Module Q Application is Module Q) A module can be reused in other applications QO) Module key elements are: o Components for view and controller © Directives for databinding © Pipes for formatting o Services for reusable operations. Q) One module can use another module like FormModule and RouteModule 9/21/2019 Copyright (c) SunilOS ( Rays ) SunilOS 277 SunilOS Module execution flow QO Application executes main. ts file. O File main. ts configure app using app. module.ts file C1 File app.module. ts defines application module Q Application displays index.html file. C) File index.html bootstraps root component from app.component.ts configure display template 9/21/2019 Copyright (c) SunilOs ( Rays ) 28index.html = sre/index.html: This the first file which executes alongside main.ts when the page loads. index.html login.component.html 9/21/2019 Copyright (c) SunilOs ( Rays ) 29app.module.ts SunilOS Q It defines module using @NgModule decorator (annotation). Q It contains mappings of application elements; component, service, pipe etc. and other modules like ngRoute and FormModule. Q) This file location in project is src/app/app.module.ts. 9/21/2019 Copyright (c) SunilOS ( Rays ) 30app.module.ts SunilOS import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; @NgModule ({ declarations: Rostonpaneae, LoginComponent, Wel comeComponent I, imports: [ FormsModule, lr providers: Desteteice, MarksheetServce, ia bootstrap: [AppComponent] }) 9/21/2019 Copyright (c) Suni 31SunilOS Components Qi One component is created for one View page. QO) You can generate component using following command: ong g c Login ong g c Welcome Q) Component contains 4 files: o Controller .TS o View .HTML o Look & Feel .CSS o Unit Testcase Q Components are configured into app.module.ts file 9/21/2019 Copyright (c) SunilOs ( Rays ) 32Component (Contd.) @Component Root Component Sub-Components SunilOS @pp-routing module ts app.componentts Login ela. Component pate binging app.component ntmi |. Welcome Component Routing Module Markehent Component 9/21/2019 Copyright (c) SunilOS ( Rays ) 33Root Component _ O Application has one root-component app.component.ts Q)Root component is bootstrapped with index.html QO Html template of root-component app.component .html has tag. OTag is replaced by sub- components at runtime. OTag implements SPA 9/21/2019 Copyright (c) SunilOS ( Rays ) 34SunilOS app.component.ts controller Metadata @Component. is used to define component import { Component } from ‘@angular/core’ ; _J/iimport component] @Component J Metadata ist selector: ‘app-root’, J Mew hia | templateUrl: './app.component.html’, //template: *

{ (title) }

]immpaeg }) export class AppComponent { Jey title:string = ‘Sunilos’; Attribute | } 9/21/2019 Copyright (c) SunilOs ( Rays ) 35app.component.html View SunilOS QO

QQ QO

QO

Copyright (c) {{title}}

@® 9/21/2019 Copyright (c) SunilOS ( Rays ) 36neo Create sub-component- Login QO File login.component.ts QO export class LoginComponent implements OnInit { Q > userId = 'Enter User ID'; Qo password = '''; Qo message = ‘’; Q constructor (private router: Router) {} Q signin () { Qa if(this.userId == ‘admin’ Q && this.password =='admin') { eh this. router.navigateByUrl ('/welcome') ; Q jelse{ a this.message = 'Invalid login id or password'; Q a } 92/2019 Copyright (c) SunilOS ( Rays ) 37Login View —— OQ LoginsHI> U { {message }}

Q

QQ User ID: Q Password: Q Sign In Q

Q. Directive [ (ngMode1) | _ is used for two-way data binding with attributes userld and password of class LoginComponent. Q Directive (click) is used to bind on-click event. Method signin () is Sign-In button is clicked. Q. Directive ngModel is provided by inbuild FormsModule module. This module will be imported in app. module. ts. 1 URL :hittp:/locathost:4200/login Copyright (c) SunilOS ( 9/21/2019 Rays ) 38Define Login-route a C1 In order to access pages, define routes in app-routing.module.ts Q const routes: Routes = [ Q > { path: 'login', component: LoginComponent}, Q { path: 'welcome', component: WelcomeComponent} Qi; O e@NgModule ({ a imports: [RouterModule.forRoot (routes) ] Q > exports: [RouterModule] Qa }) Q Access pages using following URLs © http://localhost:4200/login q 9/21/2019 Copyright (c) SunilOs ( Rays ) 39‘ ‘ SunilOS Define variable Q Optional keyword let is used to define a variable o let name = “ram” o let price = 100.10; Q Optionally you can define data type of a variable. Data type is followed by variable name and separated by colon (:) character o let name:string = “ram” ; o let price:number = 100.10; o let flag:Boolean = true; O Just like JavaScript you can alternately use var keyword to define a variable. ovar name = “ram” ovar price = 100.10; 9/21/2019 Copyright (c) SunilOS ( Rays ) 40Scope of class attributes SunilOS O An instance/static variable, defined in a class, is called attribute or member variable Q Scope of a variable can be public or private. Default scope is public Q export class LoginComponent implements OnInit { Qa public userId:string = 'Enter User ID'; Q private password:string = ‘’; Q message:string = 'No message’; a Qa QO. Attributes are called inside methods using this keyword. 9/21/2019 Copyright (c) SunilOs ( Rays ) 41Define Mehods _ Q An instance/static method can be defined in a class. O Scope of a method can be public orprivate. Default scope is public Q Here is example signin () method of login components: OQ signin () { Q if (this.userId == ‘admin’ Qa && this.password =='admin') { Qa this. router.navigateByUrl ('/welcome') ; Q telse{ Q this.message = 'Invalid login id or password'; Qa } Qa } 9/21/2019 Copyright (c) SunilOs ( Rays ) 42Static attributes and methods QO) Keyword static is used to defined attributes and methods o static PI:number = 3.14; QO) Memory is assigned only one its lifetime QO static max(a:number, b:number) { Q if (a> b){ return a; } Q else{ return b } QO} Q Static methods are defined to use static attributes and can called with class name. 9/21/2019 Copyright (c) SunilOs ( Rays ) 43Constants _— CiConstant variable is defined using const keyword Clconst PI:number = 3.14; 9/21/2019 Copyright (c) SunilOS ( Rays ) 44SunilOS Constructor Q) Class has only one constructor C1 It is called at the time of class instantiation Q Services are injected in controller using constructor arguments: Q export class LoginComponent implements OnInit { Q constructor (private router: Router) { Q } Q} Q You can pass one or more arguments to constructor 9/21/2019 Copyright (c) SunilOs ( Rays ) 45Class and Interface =o QO) Angular uses Typescripts OTypeScript is Object Oriented OTS provides inheritance of classes and implementation of Interfaces QA class can inherit another class using extents keyword O Interface has abstract methods OOne class may implement multiple interfaces using implements keyword. 9/21/2019 Copyright (c) SunilOS ( Rays ) 46OnInit interface ountee QO) A component must have to implement OnInit interface O export class LoginComponent implements OnInit { Q ngOnInit() { .. } Q} O Interface OnTnit has one abstract method ngOnInit () Q This method is called after component instantiation QO) You may write code inside this method to initialize your component 9/21/2019 Copyright (c) SunilOs ( Rays ) 47SunilOS Control Statements 9/21/2019 Copyright (c) SunilOs ( Rays ) 48if-else Statement —_ QO You can perform conditional operation using if-then- else statement. o var money = 100; o if (money> 100 ){ 0 console.log('Wow! I can buy Pizza’); o }else{ 0 console.log('Oh! I can not buy Pizza’); Y Os 9/21/2019 Copyright (c) SunilOS ( Rays ) 49SunilOS For loop O var table = [2,4,6,8,10]; O for (i=0; iLogin Q

{ {message} }

9/21/2019 Copyright (c) SunilOS ( Rays ) 58Property Binding am Q Property binding is used for one-way data binding Q It binds controller attribute with DOM property of HTML elements Q For example o o { console. log (params ["id"]) Me oo°0 9/21/2019 Copyright (c) SunilOs ( Rays ) 66- ‘ SunilOS Directives Q Directives are used to change DOM structure of an html page QO) Angular has many pre-defined directives such as *ngFor and *ngIf Q) You can create custom directives with help of @Directive decorator Q) There are four types of directives: o Components directives o Structural directives o Attribute directives o Custom Directive 9/21/2019 Copyright (c) SunilOs ( Rays ) 67Component Directive SuniloS QVA component is also a directive-with-a- template. QA @Component decorator is actually a @Directive decorator extended with template-oriented features. 9/21/2019 Copyright (c) SunilOs ( Rays ) 68Structural Directive SuniloS QA structure directive iterates or conditionally manipulates DOM elements. Q Structural directives have a * sign before the directive name such as *ngI£ and *ngFor Q Directive *ngFor is used to iterate and print list in html page. Q Directive *ngIf£ is used to conditionally display an html DOM element. 9/21/2019 Copyright (c) SunilOS ( Rays ) 69SunilOS *ngFor Q export class MarksheetlistComponent implements OnInit { Qa list = [ a {"id":1,"rollNo":"Al","name":"Rajesh Verma”}, a qe tars2,, shish Nehra"}, Qa {"id":3, :"Manish”} Qik Qo} Q Q a a a Q Q

{ {e.id} }

{ [e. rol 1No} }

{ (e.name} }

9/21/2019 Copyright (c) SunilOs ( Rays ) 70*nglf SunilOS O

Q {{message}} Q