Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Presentation
on
Angular
By: Ramesh Adhikari
1
Introduction of angular
● Google’s popular and open-source JavaScript framework
● building and developing single-page mobi...
Angular CLI
● Ng generate component component_name (to generate component)
● Ng generate service servic_name (to generate ...
Architecture and Concepts
seven main building blocks of an Angular Application.
1. Component
2. Templates
3. Metadata
4. D...
Basic Architecture
5
Components● the main building block of an Angular Application
● contains the definition of the View and the data that defi...
Component Communication
● The Parent Component communicates with the child component using
the @Input Annotation.
● The ch...
Component Life Cycle Hook
● OnInit
● OnDestroy
● Onchanges
● DoCheck
8
Data Binding in Angular
There are four ways you can bind data in Angular
1. Interpolation
2. Property Binding
3. Event Bin...
Directives
The Angular directive helps us to manipulate the DOM.
● ngFor
● ngSwitch Directive
● ngIf Directive
● ngClass D...
Pipes
pipes are used to Transform the Data. For Example, the Date pipe formats
the date according to locale rules.
● Angul...
Forms
● Template driven forms(ngForm)
● Reactive form
12
Services & Dependency Injection
● Services allow us to create a reusable code and use it every component
that needs it.
● ...
Httpclient module
● The newly designed HttpClient Module allows us to query the Remote
API source to get data into our App...
Http Example (with retry())
getConfig() {
return this.http.get<Config>(this.configUrl)
.pipe(
retry(3), // retry a failed ...
Router
❖ The Router module handles the navigation & Routing in Angular
❖ The Routing allows us to move from one part of th...
Middleware/ Guard in Angular
● CanActivate (Checks to see if a user can visit a route)
● CanActivateChild (Checks to see i...
Lazy load module in angular
There are three main steps to setting up a lazy loaded feature module:
● Create the feature mo...
Structure of project
● feature module,
● shared module,
● core module
19
ControlValueAccessor
If you’re working on a complex project inevitably you will face the situation when you have to create...
OAuth 2.0 Grants
1. Resource owner credentials grant
Allow to request tokens on behalf of user by sending the username and...
4. Implicit grant
similar to the authorization code grant with two distinct differences.
● single page web apps that can’t...
Thank
You !
Any Questions ?
23
Próxima SlideShare
Cargando en…5
×

Presentation on angular 5

28 visualizaciones

Publicado el

Good tools make application development quicker and easier to maintain than if you did everything by hand.
Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Presentation on angular 5

  1. 1. Presentation on Angular By: Ramesh Adhikari 1
  2. 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. 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. 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
  5. 5. Basic Architecture 5
  6. 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. 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. 8. Component Life Cycle Hook ● OnInit ● OnDestroy ● Onchanges ● DoCheck 8
  9. 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. 10. Directives The Angular directive helps us to manipulate the DOM. ● ngFor ● ngSwitch Directive ● ngIf Directive ● ngClass Directive ● ngStyle Directive 10
  11. 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. 12. Forms ● Template driven forms(ngForm) ● Reactive form 12
  13. 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. 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. 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. 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. 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. 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. 19. Structure of project ● feature module, ● shared module, ● core module 19
  20. 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. 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. 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. 23. Thank You ! Any Questions ? 23

×