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 [Link]
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
[Link]
About me
Vijay Shivakumar
Designer | Developer | Trainer
Training & Consultation of
Contemporary Web Technologies and Adobe products from past 14 years
[Link]
About you
Designer
Developer
Architect
Business Analyst
Technology Enthusiast
[Link]
Benefits Angular Advantage
Open Source
Reduction in development time
Latest Compliances
ES6
Modular
Internationalization and Accessibility
Performance
Popularity / Availability of resources
Clear Documentation
[Link]
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)
[Link]
Setup / Tooling What to know / use ?
NodeJS Git
TypeScript MongoDB Mlab ID / Firebase ID
TraceurJS NodeMon
BableJS NVM
SystemJS
Webpack
Express
Jasmine
Karma
[Link]
Angular CLI What is used…
NodeJS Git
TypeScript MongoDB Mlab ID / Firebase ID
TraceurJS NodeMon
BableJS NVM
SystemJS
Webpack
Express
Jasmine
Karma
[Link]
Build Tools Using Angular-CLI
ES5 None
ES6 Traceur
BableJS
SystemJS
Webpack
Express
TypeScript TypeScript
SystemJS
Traceur / BableJS
Webpack
Express
[Link]
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
[Link] : Manages change detection
Rendering Targets : Render an app for many devices with
Browser-platform
Browser-platform-dymanic
[Link]
Angular Architecture
HEADER
NAVIGATION
MAIN HEADER
ASIDE
ARTICLE
ARTICLE
[Link]
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]
[Link]
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
[Link]
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:[]
[Link]
Component What is it ?
HTML
template
Data
content Component
CSS
styles
[Link]
Templates View
template : Inline
templateUrl : external
Display Data
Format Data
User Interaction
Avoid business logic
[Link]
Styling Component v/s Page
Styling a component
styles:[`
selector { property : value; property : value }
selector { property : value; property : value }
`]
OR
stylesUrl:[ “location/[Link]”, “anotherlocation/[Link]” ]
Styling a page
That you define in the html page in the head or body section
[Link]
Binding
Interpolation Property Binding
<h1>{{ 2+2 }}</h1>
<h1>{{ [Link] }}</h1>
<h1 [textContent]=“[Link]”></h1>
<h1 bind-innerHTML='[Link]'></h1>
<h1>{{ [Link]() }}</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().
[Link]
Binding
Interpolation Property Binding
<h1>{{ 2+2 }}</h1>
<h1>{{ [Link] }}</h1>
<h1 [textContent]=“[Link]”></h1>
<h1 bind-innerHTML='[Link]'></h1>
<h1>{{ [Link]() }}</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().
[Link]
Event Binding Statement Binding
<button (click)=“callfun()”> Click Me </button>
<input ([Link])=“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().
[Link]
Events Element events supported
mouseenter dragover cut
mousedown drop copy
mouseup focus paste
click blur keydown
dblclick submit keypress
drag scroll keyup
[Link]
Style Binding class / ngClass
[[Link]] =“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}
[Link]
Style Binding style/
As a property binding
[[Link]] =“ ‘#333’ ” or [[Link]-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’}”
[Link]
Local Variables Temporary variables
<input type="text" #name>
{{ [Link] }}
Or
<input type="text" #name>
<button (click)="[Link]()">Focus the input</button>
Or
<video #player src=‘myvideo.mp4’></video>
<button (click)="[Link]()">Play </button>
Or (usage of ref- attribute to create a local variable )
<input type="text" ref-name>
<button on-click="[Link]()">Focus the input</button>
[Link]
Directive Structural Directives
*ngIf
*ngFor
*ngSwitch
NgIf *ngIf
NgSwitch *ngSwitch
NgFor *ngFor
NgStyle [ngStyle]
NgClass [ngClass]
NgNonBindable ngNonBindable
[Link]
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>
[Link]
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>
[Link]
Structural
Directive The ng-template way
*ngIf
*ngFor
*ngSwitch
NgIf
NgSwitch
NgStyle
NgClass
NgFor
NgNonBindable
[Link]
Structural
Directive Switch
<div [ngSwitch]="[Link]">
<h1 *ngSwitchCase="8">Strong</h1>
<h1 *ngSwitchCase="7">Weak</h1>
<h1 *ngSwitchDefault>Recovering</h1>
</div>
[Link]
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
[Link]
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 :
[Link]
Communication alias
@Input(“externalName”) internalName: string ;
[Link]
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
[Link]
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 :
[Link]
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
[Link]
Services How to Create ?
1 Build a service
2 Register the service
3 Inject the service
[Link]
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()
[Link]
Dependency
Injection Dealing with Data
[Link]
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
[Link]
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 = [Link]; // foo
// now we can query this control for certain values:
[Link] // -> StringMap<string, any> of errors
[Link] // -> false
[Link] // -> true
<input type="text" [formControl]="name" />
[Link]
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")
})
[Link]
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
[Link]
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
[Link]
Validation Forms & User Inputs
html5 validations css validations JavaScript validations
minimum .ng-invalid [Link]
maximum .ng-touched [Link]
require .ng-valid [Link]
pattern
[Link]
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
[Link]
HTTP Loading Data
Http is available in HttpClientModule from @angular/common/http
[Link]
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
[Link]
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
[Link]
Store What is it?
A Store : is a JavaScript object, like client side database
[Link]
NgRx Observables
[Link]
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
[Link]
Unit Testing Fundamentals
Jasmine for assertion
Karma for testing angular modules
[Link]
[Link]
