MedTech – Mediterranean Institute of Technology
CS-Web and Mobile Development
Chp5- Angular
ES6 and TypeScript, Components, Dependency Injection…
MedTech
Dr. Lilia SFAXI 1
[Link] /liliasfaxi
Why Angular?
Angular
• Angular JS
• Javascript Framework for creating web and mobile single page applications
• Angular 2
• Easier to learn than Angular 1.x
• Fewer concepts
• Supports multiple languages (ES5, ES6, TypeScript and DART)
• Modular (everything is a Component)
• Performant (5X faster than version 1)
• This document explains the notions of Angular2, RC6 (February 2017)
MedTech
2
Angular
TYPESCRIPT
MedTech
3
Description
TypeScript
• Angular 2 is built in TypeScript
• Official collaboration between Microsoft and Google
• JavaScript-like language
• Superset of EcmaScript6
• Improvements over ES6
• Types
• Classes
• Annotations
• Imports
• Language Utilities (e.g. destructuring)
MedTech
4
Types
TypeScript
• Major improvement over ES6: type checking
• Helps when writing code because it prevents bugs at compile time
• Helps when reading code because it clarifies your intentions
• Typing is optional
• Same types as in ES: string, number, boolean,…
var name: string;
• Types can also be used in function declarations:
function greetText(name: string): string{
return "Hello " + name;
}
MedTech
5
Built-in Types
TypeScript
Types Examples
String var name : string = 'Lilia'
Number var age : number = 36
Boolean var married : boolean = true
Array var jobs : Array<string> = [‘IBM’, ‘Microsoft’,
‘Google’]
var jobs : string[] = [‘Apple’, ‘Dell’, ‘HP’]
Enums enum Role {Employee, Manager, Admin};
var role: Role = [Link];
Role[0] //returns Employee
Any var something: any = 'as string';
(default type if omitting typing something = 1;
for a given variable) something = [1, 2, 3];
Void function setName(name: string): void {
(no type expected, no return [Link] = name;
}
value) MedTech
6
Classes
TypeScript
• In ES5, OO programming was accomplished by using prototype-based
objects
• In ES6, built-in classes were defined
class Vehicle {}
• Classes may have properties, methods and constructors
• Properties
• Each property can optionally have a type
class Person {
first_name: string;
last_name: string;
age: number;
}
MedTech
7
Classes
TypeScript
• Methods
• To call a method of a class, we have to create an instance of this class, with the
new keyword
class Person {
first_name: string;
last_name: string;
age: number;
greet(){
[Link]("Hello ", this.first_name);
}
ageInYears(years: number): number {
return [Link] + years;
}
}
• If the methods don’t declare an explicit return type and return a value, it’s
assumed to be any MedTech
8
Classes
TypeScript
• Methods
• To invoke a method:
// declare a variable of type Person
var p: Person;
// instantiate a new Person instance
p = new Person();
// give it a first_name
p.first_name = 'Felipe';
// call the greet method
[Link]();
// how old will you be in 12 years?
[Link](12);
MedTech
9
Classes
TypeScript
• Constructor
• Named constructor(..)
• Doesn’t return any values
class Person {
first_name: string;
last_name: string;
age: number;
constructor(first:string,last:string,age:number){
this.first_name = first;
this.last_name = last;
[Link] = age;
}
greet(){
[Link]("Hello ", this.first_name);
}
}
var p: Person = new Person('Felipe', 'Coury', 36);
[Link](); MedTech
10
Inheritance
TypeScript
• Inheritance is built in the core language
• Uses the extends keyword
• Let’s take a Report class:
class Report {
data: Array<string>;
constructor(data:Array<string>){
[Link] = data;
}
run(){
[Link]( function(line)
{ [Link](line); });}
}
var r: Report = new Report([‘First Line', ‘Second Line’]);
[Link]();
MedTech
11
Inheritance
TypeScript
• We want to change how the report presents the data to the user:
class TabbedReport extends Report{
header: string;
constructor(header:string,values:string[]){
super(values);
[Link] = header;
}
run(){
[Link]('—'+header+'—');
[Link]();
}
}
var header: string = 'Name';
var data: string[] =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var r: TabbedReport = new TabbedReport(header, data) MedTech
12
Fat Arrow Functions
TypeScript
• Fat arrow => functions are a shorthand notation for writing functions
// ES5-like example
var data =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
[Link](function(line) { [Link](line); });
// Typescript example
var data: string[] =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
[Link]( (line) => [Link](line) );
MedTech
13
Fat Arrow Functions
TypeScript
• The => syntax shares the same this as the surrounding code
• Contrary to a normally created function in JavaScript
// ES5-like example
// TypeScript example
var nate = {
var nate = {
name: "Nate",
guitars: name: "Nate",
["Gibson", "Martin", "Taylor"], guitars:
["Gibson", "Martin", "Taylor"],
printGuitars: function() {
var self = this; printGuitars: function() {
[Link](function(g) [Link]((g) => {
{ [Link]([Link] + "
[Link]([Link] + " plays a " + g);
plays a " + g); });
}); }
} };
};
MedTech
14
Template Strings
TypeScript
• Introduced in ES6, enable:
• Variables within strings, without concatenation with +
• Multi-line strings
var firstName = "Nate";
var lastName = "Murray";
// interpolate a string
var greeting = `Hello ${ firstName} ${ lastName} `;
[Link](greeting);
var template = `
<div>
<h1> Hello</h1>
<p> This is a great website</p>
</div>
`
// do something with `template`
MedTech
15
TypeScript Language
TypeScript
• And there is more…
• Consult: [Link] for
more detailed information about the language!
MedTech
16
Angular
COMPONENTS IN ANGULAR
MedTech
17
Angular Application Structure
Components in Angular
• An angular application is a tree of Components
• The top level component is the application itself, which is rendered by
the browser when bootstrapping the application.
• Components are:
• Composable
• Reusable
• Hierarchical
• Let's take as an example an inventory management application
MedTech
18
Inventory App: Components
Components in Angular
Navigation
Component
Breadcrumbs
Component
ProductList
Component
MedTech
19
Inventory App: Components
Components in Angular
Product Row
Component
MedTech
20
Inventory App: Components
Components in Angular
Product Image Product Department Price Display
Component Component Component
MedTech
21
Inventory App: Tree Representation
Components in Angular
MedTech
22
Inventory App: Tree Representation
Components in Angular
MedTech
23
Angular
ANGULAR ARCHITECTURE
MedTech
24
Architecture
Angular Architecture
MedTech
25
Modules
Angular Architecture
• Angular apps are modular:
• An application defines a set of Angular Modules or NgModules
• Every angular module is a class with an @NgModule decorator
• Every Angular App has at least one module: the root module
• There are other feature modules
• Cohesive blocks of code, dedicated to an application domain, a workflow or a closely related
set of capabilities
• NgModule takes a single metadata object describing the module, with the following
properties
• Declarations: view classes (components, directives and piped)
• Exports: subset of public declarations, usable in the templates of other modules
• Imports: external modules needed by the templates of this module
• Providers: creators of services that this module contributes to
• Bootstrap: main application view, called the root component, that hosts all other app views
MedTech
26
Templates
Angular Architecture
• A snippet of the HTML code of a component
• A component's view is defined with its template
• Uses Angular's template syntax, with custom elements
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes"
(click)="selectHero(hero)">
{{[Link]}}
</li>
</ul>
<hero-detail
*ngIf="selectedHero"
[hero]="selectedHero">
</hero-detail>
MedTech
27
Metadata
Angular Architecture
• Tells Angular how to process a class
• Uses decorators to attach information to a class:
• @Component: identifies the class below it as a component class, with
options:
• moduleId: source of the base address ([Link]) for module-relative URLs (such as
templateURL)
• selector: CSS selector for the template code
• templateURL: address of the component's HTML template
• providers: array of dependency injection providers for services that the component requires
• Other metadata decorators:
• @Injectable, @Input, @Output,..
MedTech
28
Data Binding
Angular Architecture
• Angular supports Data Binding
• Mechanism for coordinating parts of a template with parts of a component
• Four main forms:
• {{[Link]}}: interpolation
• Displays the component's [Link] property value within the <li> element
• [hero]: property binding <li>{{[Link]}}</li>
• Passes the value of selectedHero to the child comp. <hero-detail
[hero]="selectedHero">
• (click): event binding </hero-detail>
• Calls the component's selectHero method when the <li (click)="selectHero(hero)">
</li>
user clicks a hero's name
<input [(ngModel)]="[Link]">
• [(ngModel)]: Two-way data binding
• Combines property and event binding, with ngModel MedTech
29
Directives
Angular Architecture
• Angular templates are dynamic
• When Angular renders them, it transforms the DOM according to instructions
given by directives
• A directive is a class with the @Directive decorator
• A component is a directive-with-a-template
• A @Component decorator is actually a @Directive extended with template-
oriented features
• Appear within an element tag as attributes do
• Two types of directives
• Structural directives
• Attribute directives
MedTech
30
Directives
Angular Architecture
• Structural directives
• Alter the layout by adding, removing and replacing elements in the DOM
<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>
• Attribute directives
• Alter the appearance or behaviour of an existant element
• Look like regular HTML attributes
<input [(ngModel)]="[Link]">
• Custom attributes
• You can write your own directives
MedTech
31
Services
Angular Architecture
• Almost anything can be a service
• A class with a narrow, well-defined purpose
• Ex: logging servie, data service, tax calculator, application configuration,…
• There is no specific definition of a class in Angular, but classes are
fundamental to any Angular application
• Component classes should be lean
• They shouldn't fetch data from the server, validate user input or log directly to
the console
• They just deal with user experience, mediate between the view and the logic
• Everything non trivial should be delegated to services
• A service is associated to a component using dependency injection
MedTech
32
Angular
DEPENDENCY INJECTION
MedTech
33
Definition
Dependency Injection
• Important application design pattern
• Commonly called DI
• A way to supply a new instance of a class with the fully-formed
dependencies it requires
• Most dependencies are services
• DI is used to provide new components with the services they need
• It knows which services to instantiate by looking at the types of the
component's constructor parameters
constructor(private service: HeroService) { }
• When Angular creates a component, it asks an injector for the services
it requires MedTech
34
Injector
Dependency Injection
• Maintains a container of service instances that it has previously
created
• If a requested service instance is not in the container, the injector
makes one and adds it to the container before returning the service to
Angular
• When all requested services have been resolved and returned, Angular
can call the component's constructor with those services as arguments
MedTech
35
Provider
Dependency Injection
• In order for the injector to know which services to instantiate, you need
to register a provider of each one of them
• Provider: Creates or returns a service
• It is registered in a module or a component
• Add it to the root module for it to be available everywhere
• Register it in the component to get a new instance of the service with each
new instance of the component
@NgModule({
imports: [
@Component({
…
moduleId: [Link],
],
selector: 'hero-list',
providers: [
templateUrl: './[Link]',
HeroService,
providers: [ HeroService ]
Logger
})
],
…
}) MedTech
36
@Injectable()
Dependency Injection
• @Injectable() marks a class as available to an injector for instantiation
• It is mandatory if the service class has an injected dependency
• For example: if the service needs another service, which is injected in it
• It is highly recommended to add an @Injectable() decorator for every
service class for the sake of
• Future proofing
• Consistency
• All components and directives are already subtypes of Injectable
• Even though they are instantiated by the injector, you don't have to add the
@Injectable() decorator to them
MedTech
37
Angular
ROUTING
MedTech
38
Angular Router
Routing
• Enables navigation from one view to the next as users perform
application tasks
• Interprets a browser URL as an instruction to navigate to a client-
generated view
• Can pass optional parameters to the supporting view component to help
it decide which specific content to display
• Logs activity in the browser's history journal so the back and forward
buttons work
• Most routing applications add a <base> element to the [Link] as
the first child of <head>
• Tells the router how to compose navigation URLs
<base href="/">
MedTech
39
Angular Router
Routing
const appRoutes: Routes = [
{ path: 'crisis-center',
• One singleton instance of the component: CrisisListComponent },
Router service exists for an { path: 'hero/:id',
component: HeroDetailComponent },
application { path: 'heroes',
component: HeroListComponent,
• When the browser's URL changes, },
data: { title: 'Heroes List' }
that router looks for the { path: '', redirectTo: '/heroes',
pathMatch: 'full'
corresponding Route to know },
which component to display { path: '**',
component: PageNotFoundComponent }
];
• A router has no routes until you
configure it @NgModule({
imports: [
[Link](appRoutes)
• Using the // other imports here
[Link] method ],
...
})
export class AppModule { }
MedTech
40
Router Views
Routing
• In order to render the component chosen by the router, a RouterOutlet
is inserted in the template
<router-outlet></router-outlet>
<!-- Routed views go here -->
• To navigate from a route to another, you use routerLinks
• routerLinkActive associates a CSS class "active" to the cliqued link
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center"
routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes"
routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
MedTech
41
Routing Module
Routing
• For simple routing, defining the routes in the main application module
is fine
• It can become more difficult to manage if the application grows and you
use more Router features
• Refactor the routing configuration in its own file: the Routing Module
• The Routing Module
• Separates routing concerns from other application concerns
• Provides a module to replace or remove when testing the
application
• Provides a well-known location for routing service providers
• Does not declare components MedTech
42
Routing Module: Example
Routing
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './[Link]';
import { HeroListComponent } from './[Link]';
import { PageNotFoundComponent } from './[Link]';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
[Link](appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
MedTech
43
Navigation Guards
Routing
• Sometimes, routes need to be protected:
• to prevent users from accessing areas that they're not allowed to access
• to ask for permission, …
• Navigation Guards are applied to routes to do that
• Four guard types:
• CanActivate: decides if a route can be activated
• CanActivateChild: decides if child routes of a route can be activated
• CanDeactivate: decides if a route can be deactivated
• CanLoad: decides if a module can be loaded lazily
• Guards can be implemented in different ways, but mainly, you obtain a
function that returns Observable<boolean>, Promise<boolean> or
boolean MedTech
44
Navigation Guards: as Functions
Routing
• To register a guard as a function, you need to define a token and the
guard function, represented as a provider
• Once the guard registered with a token, it is used on the route
configuration
@NgModule({
...
export const AppRoutes:RouterConfig = [
providers: [
{
provide: 'CanAlwaysActivateGuard',
path: '',
useValue: () => {
component: SomeComponent,
return true;
canActivate:
}
['CanAlwaysActivateGuard']
],
}
...
];
})
export class AppModule {}
MedTech
45
Navigation Guards: as Classes
Routing
• Sometimes, a guard needs DI capabilities
• Should be declared as Injectable classes
• Implement in this case CanActivate, CanDeactivate or CanActivateChild
interfaces @NgModule({
...
providers: [
AuthService,
import { Injectable } from '@angular/core'; CanActivateViaAuthGuard
]
import { CanActivate } from '@angular/router';
})
import { AuthService } from './[Link]';
export class AppModule {}
@Injectable()
export class CanActivateViaAuthGuard …
implements CanActivate {
{
constructor(private authService: AuthService){ path: '',
} component: SomeComponent,
canActivate: [
canActivate() { 'CanAlwaysActivateGuard',
return [Link](); CanActivateViaAuthGuard
]
}
} MedTech
46
References
• Sites
• Angular2 official documentation, [Link] consulted in March
2017
• Pascal Precht, Protecting Routes Using Guards in Angular, https://
[Link]/angular/2016/07/18/[Link]#as-
classes, updated in December 2016, consulted in March 2017
• Textbook
• Rangle’s Angular2 Training Book, [Link], Gitbook
• Ang-book 2, the complete book on AngularJS2, 2015-2016
MedTech
Dr. Lilia SFAXI 47
[Link] /liliasfaxi