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.
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
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
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
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
