Presentation on Angular By Ramesh Adhikari 1 Introduction

Presentation on Angular By: Ramesh Adhikari 1

Introduction of angular ● Google’s popular and open-source Java. Script framework ● building and developing single-page mobile and desktop applications ● Angular 5 was announced to the users on 1 st November 2017. ● Angular 5 is focused on making the Angular applications smaller, faster and easier to use. 2

Angular CLI ● ● ● Ng generate component_name (to generate component) Ng generate servic_name (to generate service) Ng generate class_name (to create class to specify attribute) npm install -g @angular/cli (install the Angular CLI globally. ) ng new project_name (Generate a new project ) ng serve --open (launches the server) 3

Architecture and Concepts seven main building blocks of an Angular Application. 1. 2. 3. 4. 5. 6. 7. Component Templates Metadata Data Binding Directives Services Dependency Injection 4

Basic Architecture 5

● Components the main building block of an Angular Application ● contains the definition of the View and the data that defines how the View looks and behaves ● Component passes the data to the view using a process called Data Binding ● Parent child component 6

Component Communication ● The Parent Component communicates with the child component using the @Input Annotation. ● The child components detect changes to these Input properties using On. Changes life Cycle hook or with a Property Setter. ● The child component can communicate with the parent by raising an event, which the parent can listen Passing data to child component /Passing Data to Parent Component 7

Component Life Cycle Hook ● On. Init ● On. Destroy ● Onchanges ● Do. Check 8

Data Binding in Angular There are four ways you can bind data in Angular 1. 2. 3. 4. Interpolation Property Binding Event Binding Two Way Binding 9

Directives The Angular directive helps us to manipulate the DOM. ● ng. For ● ng. Switch Directive ● ng. If Directive ● ng. Class Directive ● ng. Style Directive 10

Pipes pipes are used to Transform the Data. For Example, the Date pipe formats the date according to locale rules. ● Angular Pipes ● Angular Custom Pipes provided by Angular Currency. Pipe, Date. Pipe , Decimal. Pipe, Json. Pipe, Lower. Case. Pipe , Upper. Case. Pipe, , Percent. Pipe, Slice. Pipe , Async. Pipe 11

Forms ● Template driven forms(ng. Form) ● Reactive form 12

Services & Dependency Injection ● Services allow us to create a reusable code and use it every component that needs it. ● The dependencies are declared in the Module using the Providers metadata 13

Httpclient module ● The newly designed Http. Client Module allows us to query the Remote API source to get data into our Application ● It requires us to Subscribe to the returned response using Rx. Js observables. 14

Http Example (with retry()) get. Config() { return this. http. get<Config>(this. config. Url). pipe( retry(3), // retry a failed request up to 3 times catch. Error(this. handle. Error) // then handle the error ); } 15

Router ❖ The Router module handles the navigation & Routing in Angular ❖ The Routing allows us to move from one part of the application to another part or one View to another View A typical Angular Route has two properties: ● path: a string that matches the URL in the browser address bar. ● component: the component that the router should create when navigating to this route. 16

Middleware/ Guard in Angular ● Can. Activate (Checks to see if a user can visit a route) ● Can. Activate. Child (Checks to see if a user can visit a routes children) ● Can. Deactivate (Checks to see if a user can exit a route) 17

Lazy load module in angular There are three main steps to setting up a lazy loaded feature module: ● Create the feature module’s routing module. ● Configure the routes. Each feature module acts as a doorway via the router, the lazy loading syntax uses load. Children followed by a string that is the path to the module, a hash mark or #, and the module’s class name. for. Root() and for. Child() 18

Structure of project ● feature module, ● shared module, ● core module 19

Control. Value. Accessor If you’re working on a complex project inevitably you will face the situation when you have to create a custom form control. The essential component of this task will be implementing Control. Value. Accessor interface Control. Value. Accessor { write. Value(obj: any): void register. On. Change(fn: any): void register. On. Touched(fn: any): void set. Disabled. State(is. Disabled: boolean)? : void } 20

OAuth 2. 0 Grants 1. Resource owner credentials grant Allow to request tokens on behalf of user by sending the username and password to the token end points. 1. Authorisation Code Grant The authorization code grant should be very familiar if you’ve ever signed into an application using your Facebook or Google account. 3 Client credentials grant this grant is suitable for machine-to-machine authentication where a specific user’s permission to access data is not required. 21

4. Implicit grant similar to the authorization code grant with two distinct differences. ● single page web apps that can’t keep a client secret because all of the application code and storage is easily accessible ● the authorization server returns an access token instead of authorization code 5. Refresh token grant Access tokens eventually expire; however some grants respond with a refresh token which enables the client to get a new access token without requiring the user to be redirected. 22

Thank You ! Any Questions ? 23