Angular

MedTech
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Chp5- Angular
ES6 and TypeScript, Components, Dependency Injection…
1
MedTech – Mediterranean Institute of Technology
CS-Web and Mobile Development
MedTech

MedTech
Why 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)
2
Angular

MedTech
Description
• 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)
4
TypeScript

MedTech
Types
• 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;
}
5
TypeScript

MedTech
Built-in Types
6
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 = Role.Employee;
Role[0] //returns Employee
Any
(defaulttypeifomittingtyping
foragivenvariable)
var something: any = 'as string';
something = 1;
something = [1, 2, 3];
Void
(notypeexpected,noreturn
value)
function setName(name: string): void {
this.name = name;
}

MedTech
Classes
• 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
7
TypeScript
class Person {
first_name: string;
last_name: string;
age: number;
}

MedTech
Classes
• Methods
• To call a method of a class, we have to create an instance of this class, with the
new keyword
• If the methods don’t declare an explicit return type and return a value, it’s
assumed to be any
8
TypeScript
class Person {
first_name: string;
last_name: string;
age: number;
greet(){
console.log("Hello ", this.first_name);
}
ageInYears(years: number): number {
return this.age + years;
}
}

MedTech
Classes
• Methods
• To invoke a method:
9
TypeScript
// 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
p.greet();
// how old will you be in 12 years?
p.ageInYears(12);

MedTech
Classes
• Constructor
• Named constructor(..)
• Doesn’t return any values
10
TypeScript
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;
this.age = age;
}
greet(){
console.log("Hello ", this.first_name);
}
}
var p: Person = new Person('Felipe', 'Coury', 36);
p.greet();

MedTech
Inheritance
• Inheritance is built in the core language
• Uses the extends keyword
• Let’s take a Report class:
11
TypeScript
class Report {
data: Array<string>;
constructor(data:Array<string>){
this.data = data;
}
run(){
this.data.forEach( function(line)
{ console.log(line); });}
}
var r: Report = new Report([‘First Line', ‘Second Line’]);
r.run();

MedTech
Inheritance
• We want to change how the report presents the data to the user:
12
TypeScript
class TabbedReport extends Report{
header: string;
constructor(header:string,values:string[]){
super(values);
this.header = header;
}
run(){
console.log('—'+header+'—');
super.run();
}
}
var header: string = 'Name';
var data: string[] =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var r: TabbedReport = new TabbedReport(header, data)

MedTech
Fat Arrow Functions
• Fat arrow => functions are a shorthand notation for writing functions
13
TypeScript
// ES5-like example
var data =
data.forEach(function(line) { console.log(line); });
// Typescript example
var data: string[] =
data.forEach( (line) => console.log(line) );

MedTech
Fat Arrow Functions
• The => syntax shares the same this as the surrounding code
• Contrary to a normally created function in JavaScript
14
TypeScript
// ES5-like example
var nate = {
name: "Nate",
guitars:
["Gibson", "Martin", "Taylor"],
printGuitars: function() {
var self = this;
this.guitars.forEach(function(g)
{
console.log(self.name + "
plays a " + g);
});
}
};
// TypeScript example
var nate = {
name: "Nate",
guitars:
["Gibson", "Martin", "Taylor"],
printGuitars: function() {
this.guitars.forEach((g) => {
console.log(this.name + "
plays a " + g);
});
}
};

MedTech
Template Strings
• Introduced in ES6, enable:
• Variables within strings, without concatenation with +
• Multi-line strings
15
TypeScript
var firstName = "Nate";
var lastName = "Murray";
// interpolate a string
var greeting = `Hello ${ firstName} ${ lastName} `;
console.log(greeting);
var template = `
<div>
<h1> Hello</h1>
<p> This is a great website</p>
</div>
`
// do something with `template`

MedTech
TypeScript Language
• And there is more…
• Consult: http://www.typescriptlang.org/docs/tutorial.html for
more detailed information about the language!
16
TypeScript

MedTech
COMPONENTS IN ANGULAR
17
Angular

MedTech
Angular Application Structure
• 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
18
Components in Angular

MedTech
Inventory App: Components
19
Navigation
Component
Breadcrumbs
Component
ProductList
Component

MedTech
20
Product Row
Component

MedTech
21
Product Image
Component
Product Department
Component
Price Display
Component

MedTech
Inventory App: Tree Representation
22

MedTech
Inventory App: Tree Representation
23

MedTech
ANGULAR ARCHITECTURE
24
Angular

MedTech
Architecture
25
Angular Architecture

MedTech
Modules
• 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
26

MedTech
Templates
• 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
27
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes"
(click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail
*ngIf="selectedHero"
[hero]="selectedHero">
</hero-detail>

MedTech
Metadata
• 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 (module.id) 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,..
28

MedTech
Data Binding
• Angular supports Data Binding
• Mechanism for coordinating parts of a template with parts of a component
• Four main forms:
• {{hero.main}}: interpolation
• Displays the component's hero.name property value within the <li> element
• [hero]: property binding
• Passes the value of selectedHero to the child comp.
• (click): event binding
• Calls the component's selectHero method when the
user clicks a hero's name
• [(ngModel)]: Two-way data binding
• Combines property and event binding, with ngModel
29
<li>{{hero.name}}</li>
<hero-detail
[hero]="selectedHero">
</hero-detail>
<li (click)="selectHero(hero)">
</li>
<input [(ngModel)]="hero.name">

MedTech
Directives
• 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
30

MedTech
Directives
• Structural directives
• Alter the layout by adding, removing and replacing elements in the DOM
• Attribute directives
• Alter the appearance or behaviour of an existant element
• Look like regular HTML attributes
• Custom attributes
• You can write your own directives
31
<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>
<input [(ngModel)]="hero.name">

MedTech
Services
• 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
32

MedTech
DEPENDENCY INJECTION
33
Angular

MedTech
Definition
• 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
• When Angular creates a component, it asks an injector for the services
it requires
34
Dependency Injection
constructor(private service: HeroService) { }

MedTech
Injector
• 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
35

MedTech
Provider
• 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
36
@NgModule({ 
imports: [ 
…
],
providers: [
HeroService,
Logger
],
…
})
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})

MedTech
@Injectable()
• @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
37

MedTech
Angular Router
• 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 index.html as
the first child of <head>
• Tells the router how to compose navigation URLs
39
Routing
<base href="/">

MedTech
Angular Router
• One singleton instance of the
Router service exists for an
application
• When the browser's URL changes,
that router looks for the
corresponding Route to know
which component to display
• A router has no routes until you
configure it
• Using the
RouterModule.forRoot method
40
Routing
const appRoutes: Routes = [
{ path: 'crisis-center',
component: CrisisListComponent },
{ path: 'hero/:id',
component: HeroDetailComponent },
{ path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '', redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**',
component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
export class AppModule { }

MedTech
Router Views
• In order to render the component chosen by the router, a RouterOutlet
is inserted in the template
• To navigate from a route to another, you use routerLinks
• routerLinkActive associates a CSS class "active" to the cliqued link
41
Routing
<router-outlet></router-outlet>

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
Routing Module
• 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
42
Routing

MedTech
Routing Module: Example
43
Routing
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}

MedTech
Navigation Guards
• 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
44
Routing

MedTech
Navigation Guards: as Functions
• 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
45
Routing
@NgModule({
...
providers: [
provide: 'CanAlwaysActivateGuard',
useValue: () => {
return true;
}
],
...
})
export class AppModule {}
export const AppRoutes:RouterConfig = [
{
path: '',
component: SomeComponent,
canActivate:
['CanAlwaysActivateGuard']
}
];

MedTech
Navigation Guards: as Classes
• Sometimes, a guard needs DI capabilities
• Should be declared as Injectable classes
• Implement in this case CanActivate, CanDeactivate or CanActivateChild
interfaces
46
Routing
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class CanActivateViaAuthGuard
implements CanActivate {
constructor(private authService: AuthService){
}
canActivate() {
return this.authService.isLoggedIn();
}
@NgModule({
...
providers: [
AuthService,
CanActivateViaAuthGuard
]
})
export class AppModule {}
…
{
path: '',
component: SomeComponent,
canActivate: [
'CanAlwaysActivateGuard',
CanActivateViaAuthGuard
]
}

MedTech
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
References
47
• Sites
• Angular2 official documentation, https://angular.io/docs, consulted in March
2017
• Pascal Precht, Protecting Routes Using Guards in Angular, https://
blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html#as-
classes, updated in December 2016, consulted in March 2017
• Textbook
• Rangle’s Angular2 Training Book, rangle.io, Gitbook
• Ang-book 2, the complete book on AngularJS2, 2015-2016

Angular

Recommended

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Angular (20)

More from Lilia Sfaxi (20)

Recently uploaded (20)

Angular