What do we need ?
Technical Skill : HTML5, CSS3, JavaScript 1.8.5
Hardware and software
IDE : webstorm / atom / visual studio code
Browsers : chrome latest
Platform : nodejs latest
Database : mongodb / firebase
Version Control : git
Network : internet access to download
from git and npmjs.org
Objective About this course
Understand and explore ES6 / ES7
Write Programs using Typescript 2.7
Understand members of Angular bundle
Develop programs using Angular platform
Workflow for fast Angular application creation with Angular CLI
Unit Testing Angular code
www.technicaltrainings.com
About me
Vijay Shivakumar
Designer | Developer | Trainer
Training & Consultation of
Contemporary Web Technologies and Adobe products from past 14 years
www.technicaltrainings.com
About you
Designer
Developer
Architect
Business Analyst
Technology Enthusiast
www.technicaltrainings.com
Benefits Angular Advantage
Open Source
Reduction in development time
Latest Compliances
ES6
Modular
Internationalization and Accessibility
Performance
Popularity / Availability of resources
Clear Documentation
www.technicaltrainings.com
Angular Features
Leverages on new HTML5 Features
Includes cutting edge JavaScript features ES6, ES7
TypeScript for strong data typing
Better error handling
Speed and performance
Modular approach
Hybrid (Mobile, Tablet and Web support)
Feature rich to create SPAs
(DOM handling, 2 way Binding, Routing, Animation, Validation, Ajax,
consumes RESTful APIs)
www.technicaltrainings.com
Setup / Tooling What to know / use ?
NodeJS Git
TypeScript MongoDB Mlab ID / Firebase ID
TraceurJS NodeMon
BableJS NVM
SystemJS
Webpack
Express
Jasmine
Karma
www.technicaltrainings.com
Angular CLI What is used…
NodeJS Git
TypeScript MongoDB Mlab ID / Firebase ID
TraceurJS NodeMon
BableJS NVM
SystemJS
Webpack
Express
Jasmine
Karma
www.technicaltrainings.com
Build Tools Using Angular-CLI
ES5 None
ES6 Traceur
BableJS
SystemJS
Webpack
Express
TypeScript TypeScript
SystemJS
Traceur / BableJS
Webpack
Express
www.technicaltrainings.com
Architecture What make Angular ?
One way data flow : Data flow only from parent to child unlike angular1
Dependency Injection : Resources are passed to a component as and when
required
Components : Creates a custom tag where the component replaces its content
Directives : Adds new functionality to HTML elements that they never had
Templates : Are separate from component
Zone.js : Manages change detection
Rendering Targets : Render an app for many devices with
Browser-platform
Browser-platform-dymanic
www.technicaltrainings.com
Angular Architecture
HEADER
NAVIGATION
MAIN HEADER
ASIDE
ARTICLE
ARTICLE
www.technicaltrainings.com
Module What is it doing..?
Is different from ES6 module
Every application must have at least 1 module (root module)
Root module is decorated with ‘NgModule’ from @angular/core
import : [FirstModule, SecondModule],
declarations : [Components, Pipes, Directives]
providers: [servicesToInject1, servicesToInject2]
bootstrap : [mainComponent]
www.technicaltrainings.com
Component What is it ?
A basic Component has two parts.
1. A Component decorator
2. A component definition class
Component Decorator :
We can think of decorators as metadata added to our code.
When we use @Component on a class,
we are “decorating” that class as a Component.
Component Class :
Will have a constructor, properties , methods and life cycle events by default
www.technicaltrainings.com
Component What is it doing..?
A component is a combination of a view (the template) and some logic
Is decorated with ‘Component’ from @angular/core
By convention every application must have a main component which is
bootstrapped via module.
selector: ‘aDomElement’(usually a custom tag name)
template:
templateUrl:
styles:[]
stylesUrl:[]
www.technicaltrainings.com
Component What is it ?
HTML
template
Data
content Component
CSS
styles
www.technicaltrainings.com
Templates View
template : Inline
templateUrl : external
Display Data
Format Data
User Interaction
Avoid business logic
www.technicaltrainings.com
Styling Component v/s Page
Styling a component
styles:[`
selector { property : value; property : value }
selector { property : value; property : value }
`]
OR
stylesUrl:[ “location/style.css”, “anotherlocation/style.css” ]
Styling a page
That you define in the html page in the head or body section
www.technicaltrainings.com
Binding
Interpolation Property Binding
<h1>{{ 2+2 }}</h1>
<h1>{{ user.name }}</h1>
<h1 [textContent]=“user.name”></h1>
<h1 bind-innerHTML='user.name'></h1>
<h1>{{ user.message() }}</h1>
Keep it simple and fast (they should not take more time to compute)
Avoid multiple statements
You can not use assignment operators e.g. = , +=, ++, - - in property binding
You can not create an object e.g. new User().
www.technicaltrainings.com
Binding
Interpolation Property Binding
<h1>{{ 2+2 }}</h1>
<h1>{{ user.name }}</h1>
<h1 [textContent]=“user.name”></h1>
<h1 bind-innerHTML='user.name'></h1>
<h1>{{ user.message() }}</h1>
Keep it simple and fast (they should not take more time to compute)
Avoid multiple statements
You can not use assignment operators e.g. = , +=, ++, - - in property binding
You can not create an object e.g. new User().
www.technicaltrainings.com
Event Binding Statement Binding
<button (click)=“callfun()”> Click Me </button>
<input (keydown.space)=“onSpaceBarDownEvent()”> Click Me </button>
<button on-click="onButtonClick()">Click me!</button>
Keep it simple and fast (they should not take more time to compute)
The callback functions can take a single parameter which is referred as $event
( If you wish to send multiple params you can wrap them in an object and send )
Avoid business logic on templates
You can not create an object e.g. new User().
www.technicaltrainings.com
Events Element events supported
mouseenter dragover cut
mousedown drop copy
mouseup focus paste
click blur keydown
dblclick submit keypress
drag scroll keyup
www.technicaltrainings.com
Style Binding class / ngClass
[class.className] =“stronghero”
[ngClass]={ expression that returns a string, object or an array}
In the example below both stronghero and boxclass can be applied if it
matches the conditions
Eg;
[ngClass]="{ stronghero: heroPower > 5, boxclass: rating > 0.5}
www.technicaltrainings.com
Style Binding style/
As a property binding
[style.color] =“ ‘#333’ ” or [style.background-color] =“ ‘yellow’ ”
[ngStyle]={ expression that returns a style value}
In the example below the ternary operator will return a style property and
value combination
Eg;
[ngStyle]="{‘color’: ‘red’, ‘background-color’ : ’gray’}”
[ngStyle]="{‘color’: heroPower > 5 ? ‘green’ : ‘red’}”
www.technicaltrainings.com
Local Variables Temporary variables
<input type="text" #name>
{{ name.value }}
Or
<input type="text" #name>
<button (click)="name.focus()">Focus the input</button>
Or
<video #player src=‘myvideo.mp4’></video>
<button (click)="player.play()">Play </button>
Or (usage of ref- attribute to create a local variable )
<input type="text" ref-name>
<button on-click="name.focus()">Focus the input</button>
www.technicaltrainings.com
Directive Structural Directives
*ngIf
*ngFor
*ngSwitch
NgIf *ngIf
NgSwitch *ngSwitch
NgFor *ngFor
NgStyle [ngStyle]
NgClass [ngClass]
NgNonBindable ngNonBindable
www.technicaltrainings.com
Structural
Directive Built in Directives
Adds or removes the DOM contents or they change the structure of DOM
hence the name
<ul>
<li *ngFor = “let user of users”> </li>
</ul>
In this example it shall loop over and for users
and create a temp variable user in the scope of the loop
For every loop the li and its content is repeated
<li *ngIf=“true/false”>{{ data }}</li> OR <li [hidden]=“true/false”>{{ data }}</li>
www.technicaltrainings.com
Structural
Directive Built in Directives
Adds or removes the DOM contents or they change the structure of DOM
hence the name
<ul>
<li *ngFor = “let user of users”> </li>
</ul>
In this example it shall loop over and for users
and create a temp variable user in the scope of the loop
For every loop the li and its content is repeated
<li *ngIf=“true/false”>{{ data }}</li> OR <li [hidden]=“true/false”>{{ data }}</li>
www.technicaltrainings.com
Structural
Directive The ng-template way
*ngIf
*ngFor
*ngSwitch
NgIf
NgSwitch
NgStyle
NgClass
NgFor
NgNonBindable
www.technicaltrainings.com
Structural
Directive Switch
<div [ngSwitch]="hero.power">
<h1 *ngSwitchCase="8">Strong</h1>
<h1 *ngSwitchCase="7">Weak</h1>
<h1 *ngSwitchDefault>Recovering</h1>
</div>
www.technicaltrainings.com
Binding
Summary When to use what ?
{{}} for interpolation
[] for property binding
() for event binding
[(ngModel)] for two way binding
# for variable declaration
* for structural directives
www.technicaltrainings.com
Communication Input & Outputs
@Input decorator from @angular/core
allows data inlet in to the component
@Output decorator from @angular/core
allows data to be sent from the component
The same can be done with these properties of a component
input :
output :
www.technicaltrainings.com
Communication alias
@Input(“externalName”) internalName: string ;
www.technicaltrainings.com
Pipes Format your output
DatePipe used to format the date as needed
LowerCasePipe converts to lowercase
UpperCasePipe converts to uppercase
CurrencyPipe applies a currency symbol and manage integer and decimals
DecimalPipe manages decimal values
AsyncPipe will deal with observable values and display latest result
www.technicaltrainings.com
Life Cycle Hook Angular Events
ngOnChange :
happens when ever the component is changed via an input directive
ngOnInit : happens only once when the component is initialized called only once
ngDoCheck : happens after the ngOnChange is called you can here access the old
value and the new value for the property that changed Called during every
change detection before ngOnChanges() and ngOnInit()
ngAfterContentInit : Called once after the first ngDoCheck()
ngAfterContentChecked :
ngAfterViewInit :
ngAfterViewChecked :
ngOnDestroy :
www.technicaltrainings.com
Services Dealing with Data
Reusable functionality shared across components yet independent from
components ( not tied to any specific component )
Responsible for a single piece of functionality simple classes that fetch data or
logic across components
Deliver data or logic when and where it is needed yet encapsulates external
interactions such as with data
www.technicaltrainings.com
Services How to Create ?
1 Build a service
2 Register the service
3 Inject the service
www.technicaltrainings.com
DI Inversion of control
Dependency injection is a well-known design pattern.
A component may need some features offered by other parts of our app
such as a services. ( referred as dependency )
Instead of letting the component create its dependencies, the idea is to let the
framework create them, and provide them to the component.
That is known as "inversion of control".
Declare dependencies with providers : [] either on module or on component
To inform Angular that this service has some dependencies itself,
we need to add a class decorator: @Injectable()
www.technicaltrainings.com
Dependency
Injection Dealing with Data
www.technicaltrainings.com
Forms Forms & User Inputs
Forms are everywhere in an application…
FormControls
encapsulate the inputs in our forms and give us objects to work with them
Validators
give us the ability to validate inputs, any way we’d like
Observers
let us watch our form for changes and respond accordingly
www.technicaltrainings.com
Forms FormControl
FormControl
Represents a single input field - it is the smallest unit of an Angular form.
Eg: // create a new FormControl with the value “foo”
let nameControl = new FormControl(“foo")
let name = nameControl.value; // foo
// now we can query this control for certain values:
nameControl.errors // -> StringMap<string, any> of errors
nameControl.dirty // -> false
nameControl.valid // -> true
<input type="text" [formControl]="name" />
www.technicaltrainings.com
Forms FormGroup
FormGroup
Provides a wrapper interface around more than one FormControls so we
can manage multiple fields to validate them.
Eg: // create a new FormControl with the value “foo”
let heroInfo = new FormGroup({
firstName: new FormControl(“Bruce"),
lastName: new FormControl(“Wayne"),
power: new FormControl(“7")
})
www.technicaltrainings.com
Template Forms Forms & User Inputs
Easy to use
Similar to legacy forms
Uses 2 way data binding
Minimal component code
Automatically track form input element and state
www.technicaltrainings.com
Reactive Forms Forms & User Inputs
More Flexible
Used for complex scenarios
Model is immutable
Easier to perform action upon value change
Reactive Transformations (debounce)
Add input elements dynamically
Unit test forms
www.technicaltrainings.com
Validation Forms & User Inputs
html5 validations css validations JavaScript validations
minimum .ng-invalid input.invalid
maximum .ng-touched input.touched
require .ng-valid input.valid
pattern
www.technicaltrainings.com
Validation States
Value Changed Form Group
Pristine Form Control
Dirty Form Control
Validity
Valid Form Control
Invalid Form Control
Visited
Form Control
Touched
Untouched Form Control
www.technicaltrainings.com
HTTP Loading Data
Http is available in HttpClientModule from @angular/common/http
www.technicaltrainings.com
RXJS Observables
Helps manage asynchronous data
Events are treated as collections
like an array whose items arrive asynchronously over time
Subscribe to receive notifications
Used widely in Angular
www.technicaltrainings.com
Rxjs Principles
A Store : Single source of truth called store
An Action : State is read only and only changed by dispatching actions
Reducers : Changes are made using pure functions which are called reducers
View Action Reducer Store / State
www.technicaltrainings.com
Store What is it?
A Store : is a JavaScript object, like client side database
www.technicaltrainings.com
NgRx Observables
www.technicaltrainings.com
Routing Navigating / Multipage
Routing : Map a URL to a state of the application
Angular supports HTML5 and Hash based URL Routing
Define Base Path : implemented by default with angular-cli <base href=“/” />
recommended to be the first child of head tag
Import Router : import { Routes } from '@angular/router';
Configure Routes : export let ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: about', component: AboutComponent }
];
Place Templates : <router-outlet>
Activate Routes : navigate to that path in browser url
www.technicaltrainings.com
Unit Testing Fundamentals
Jasmine for assertion
Karma for testing angular modules
www.technicaltrainings.com
www.technicaltrainings.com
