More Related Content
Similar to Presentation on angular 5 (20)
Presentation on angular 5
- 2. Introduction of angular ● Google’s popular and open-source JavaScript framework ● building and developing single-page mobile and desktop applications ● Angular 5 was announced to the users on 1st November 2017. ● Angular 5 is focused on making the Angular applications smaller, faster and easier to use. 2
- 3. Angular CLI ● Ng generate component component_name (to generate component) ● Ng generate service servic_name (to generate service) ● Ng generate class 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
- 4. Architecture and Concepts seven main building blocks of an Angular Application. 1. Component 2. Templates 3. Metadata 4. Data Binding 5. Directives 6. Services 7. Dependency Injection 4
- 6. 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
- 7. Component Communication ● The Parent Component communicates with the child component using the @Input Annotation. ● The child components detect changes to these Input properties using OnChanges 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
- 8. Component Life Cycle Hook ● OnInit ● OnDestroy ● Onchanges ● DoCheck 8
- 9. Data Binding in Angular There are four ways you can bind data in Angular 1. Interpolation 2. Property Binding 3. Event Binding 4. Two Way Binding 9
- 10. Directives The Angular directive helps us to manipulate the DOM. ● ngFor ● ngSwitch Directive ● ngIf Directive ● ngClass Directive ● ngStyle Directive 10
- 11. 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 Pipes provided by Angular CurrencyPipe, DatePipe , DecimalPipe, JsonPipe, LowerCasePipe ,UpperCasePipe, , PercentPipe, SlicePipe , AsyncPipe 11
- 12. Forms ● Template driven forms(ngForm) ● Reactive form 12
- 13. 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
- 14. Httpclient module ● The newly designed HttpClient 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 RxJs observables. 14
- 15. Http Example (with retry()) getConfig() { return this.http.get<Config>(this.configUrl) .pipe( retry(3), // retry a failed request up to 3 times catchError(this.handleError) // then handle the error ); } 15
- 16. 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
- 17. Middleware/ Guard in Angular ● CanActivate (Checks to see if a user can visit a route) ● CanActivateChild (Checks to see if a user can visit a routes children) ● CanDeactivate (Checks to see if a user can exit a route) 17
- 18. Lazy load module in angular There are three main steps to setting up a lazy loaded feature module: ● Create the 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 loadChildren followed by a string that is the path to the module, a hash mark or #, and the module’s class name. forRoot() and forChild() 18
- 19. Structure of project ● feature module, ● shared module, ● core module 19
- 20. ControlValueAccessor 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 ControlValueAccessor interface ControlValueAccessor{ writeValue(obj: any): void registerOnChange(fn: any): void registerOnTouched(fn: any): void setDisabledState(isDisabled: boolean)?: void } 20
- 21. 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
- 22. 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
- 23. Thank You ! Any Questions ? 23