Learning Angular with

Practical Examples
MD SHAHIDULLA
 Agenda
Why Angular 2 or 4? Dependency Injection
Setting up Angular 2 or 4 in Wrap up third party
Visual Studio services
Angular Architecture HTTP and Observables
Routing and Child Routing Observable vs Promise
RouterLink and Router.navigate Mapping HTTP Response
with Observable
Lazy Module Loading
Reactive/ModelDriven
Angular Services
Form and Validation
 Why Angular 2 or 4?
Faster

Mobile support

Component based development

Supported by several code editors:

o Visual Studio
o Visual Studio Code
o Eclipse
o WebStrom
o Atom
o Sublime Text etc.
 Why Angular 2 or 4?
More language choices:
o TypeScript
Intelligence
Code navigation
Advanced refactoring
Strong Typing
Support ES 2015 (ES 6) features like classes, interface and inheritance

o Others: ECMAScript 5; ECMAScript 6 (Also called ES 2015); Dart;

PureScript; Elm, etc.
Steps to Set up Angular 2 or 4 in Visual Studio
Step 1: Install Node.js and npm (Node version 4.6.x or greater and npm
version 3.x.x or greater).
o To get the latest version of Node.js, go to https://nodejs.org/en/download/
Step 2: Install Visual Studio 2015 Update 3.
Step 3: Install TypeScript for Visual Studio 2015 (2.2.0 or later version is
required).
o To get the latest version of TypeScript for Visual Studio 2015, go to
https://www.microsoft.com/en-us/download/details.aspx?id=48593
 Steps to Set up Angular 2 or 4 in Visual Studio
o Step 4: Create an empty ASP.NET web application project.
o Step 5: Download Quick Start Files from here:
https://github.com/angular/quickstart
o Step 6: Copy the required Starter files to the web application.
o Step 7: Open Node.js command prompt and type npm install.
o Step 8: Type npm start.
 Architecture Overview

Module

Component Component Component

component component component component component component

 Routing and Child Routing
The Angular Router enables navigation from one view to another
view as users perform application tasks.
Steps to implement angular routing:

o Step 1: Add base href at intex.html inside head section <base href=/>
o Step 2: Create route.ts at the root of the folder and import
RouterModule, Routes from @angular/router inside root route
o Step 3: Configure appRouting
o Step 4: Import appRouting in app.module.ts (App Module)
o Step 5: Add appRouting inside imports array of appModule
Child Routing: Same as Routing. Just need to call forChild
 RouterLink and Router.navigate
The RouterLink and Router.navigate let you link to specific parts of
your app.
You can use [routerLink] in any html element.

o It passes the current route.

Router.navigate is used inside the component to navigate
o It passes the base route.

Based on need we can use either one.

 Lazy Module Loading
Lazy Module Loading: Loading on demand as the user navigates
throughout the app
Advantage: Decreases the startup time.

Steps to enable lazy loading:

o Step 1: Remove the parent path from child route.

o Step 2: Add the new route inside root route. For example,

{Path:blog,loadChildren:app/blog/blog.module#BlogModule}
o Step 3: Remove the respective module from app root module.
 Angular Services
In Angular, a service is basically any set of functionality that we
want to be available to multiple components.
The following key steps need to be carried out when creating a
service:
o Step 1: Create a separate class which has the injectable decorator.

o Step 2: Import that class in app module/feature module.

o Step 4: Register the service as a provider in that module.

o Step 5: Import the service where you want to use it.

o Step 6: Inject the service into constructor as a dependency.

 Dependency Injection
Dependency injection is
a coding pattern in which a class receives its
dependencies from external sources rather than creating them itself.
Angular ships with its own dependency injection framework.

Steps to implement dependency injection:

o Step 1: Create a separate class which has the injectable decorator.

o Step 2: Register it with provider in app root module. Angular can inject it
into the constructor of any component or service, anywhere in the
application.
o Step 3: Inject where you want to use it inside constructor.
 Wrap Up Third party Services
Steps to implement third party service:
o Step 1: Install third party service. For example,
npm install toastr save
o Step 2: Import the necessary files in index.html
o Step 3: Create a service to wrap up third party service methods.
o Step 4: Import the service in app module/feature module.
o Step 5: Register that service with provider.
o Step 6: Inject that service where we want to use.
 HTTP and Observables
To call any external API, we need to use Angular HTTP library. We can
use Observables with HTTP.
Cllback ->Promises ->Observable

Observable is an ES7 feature. We need to use an external library to

use it today. RxJS is a good one.
RxJS also provides Observable operators which you can use to
manipulate the data being emitted. Some of these operators are:
Map; Filter; Take; Concat; FlatMap; Reduce; Every; Reduce; Skip;
Debounce, etc.
 Observable vs Promise
Observables Promises
Observables handle multiple Promises are only called once
values over time. and will return a single value.
Observables are cancellable. Promises are not cancellable.

The ability of observables to handle multiple values over time

makes them a good candidate for working with real-time data,
events, and any sort of stream you can think of.
Being able to cancel observables gives better control when
working with in-flow of values from a stream. The common example
is the auto-complete widget which sends a request for every key-
stroke.
 Mapping HTTP Response with Observable

Steps to use Observable with HTTP:

o Step 1: Import Http, Response, Header from @angular/core.

o Step 2: Import Observable from rxjs/Observable.

o Step 3: Import the necessary Observable operator from

Rxjs/add/operator/operatorname in app module/feature module.
o Step 4: Import HttpModule inside App Module/feature module.
 Reactive/Model Driven Form and Validation
Reactive Form is also known as Model Driven Form.

Overall Form: FormGroup()

Any Properties/Fields: FormContro()

Five Steps to create Model Driven Form:

o Step1: Import FormGroup, Validators, and FormBuilder.
o Step2: Inject the FormBuilder.
o Step3: Import ReactiveFormsModule in App module/Feature Module.
o Step4: Create form model.
o Step5: Build the form.