Angular 2 Architecture (Bucharest 26/10/2016)

Meetup: AngularJS-Bucharest (25-10-2016)

System
shim
ZoneReflectRx
Libraries
Application
core & common
Angular Frameworks
Router UpgradeHttp Compiler PlatformFormsRouter

<todo-list [source]="todos"
(selected-change)="update($event)" />
System
shim
ZoneReflectRx
Libraries
Application
core & common
Angular Frameworks
Router UpgradeHttp Compiler PlatformFormsRouter

<h1> Hi {{name}} </h1>
<div [property]="value" ></div>
<div (click)="setActive(todo)" ></div>
<input type="text" [(ngModel)]="todo.done">
One-way (Input):
One-way (Output):
Two-way:

@Component({
selector: 'todo-list',
template: `
<div *ngFor="let todo of todos">
<input type="checkbox" [(ngModel)]="todo.done">
[class.done]="todo.done">
{{todo.text}}
</span>
</div>
`})
export class TodoList {
@Output() selectedChange = new EventEmitter()
@Input('source') todos: Todo[] = [];
constructor(private db:Db, private proxy:Proxy){}
}

@Component({
template: `
<div *ngFor="let todo of todos">
<input type="checkbox" [(ngModel)]="todo.done">
{{todo.text}}
</span>
</div>
`})
export class TodoList {
@Output() selectedChange = new EventEmitter()
@Input('source') todos: Todo[] = [];
constructor(private db:Db, private proxy:Proxy){}
}
<todo-list [source]="todos"
(selected-change)="update($event)" />

@Injectable()
class Engine {}
@Injectable()
class Car {
constructor( public engine : Engine ) {}
}
var injector = Injector.resolveAndCreate([ Car , Engine ] );
var car = injector.get(Car);

A
Parent Injector
A,B,C
Child Injector
A,B
Child Injector
A
B C
@Injectable()
class A{
constructor(b:B,c:C){ //... }
}

Platform Injectors
Component Injectors
Application Injectors

@Component({
providers : [UserProxy],
template: `...`})
export class TodoListComponent { }

@NgModule({
declarations:[AppComponent, ... ],
providers :[UserProxy],
bootstrap :[AppComponent],
imports :[...]
})
export class AppModule{}
platformBrowserDynamic()
.bootstrapModule(AppModule);

FormsModule
exports
(NgModel…)
CommonModule
exports
( NgIf , … )
My Components,
Directives & Pipes
Template Context@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...]
})
export class XxxModule{}
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
})
@NgModule({
declarations:[...],
imports :[...]
})
@NgModule({
declarations:[...]
})
@NgModule({
})

Application Injector
XxxModule
providers
RouterModule
providers
Lazy Loading
Boundary
Module Injector
MathModule
providers
UsersModule
providers
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...],
providers :[...]
})
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...],
providers :[...]
})
@NgModule({
declarations:[...],
imports :[...],
exports :[...],
bootstrap :[...],
providers :[...]
})
Platform
Injector

Lazy Loading
Boundary
App Module
Core
Module
Feature I
Module
Feature II
Module
Feature III
Module
Shared
Module
Shared
Module

@NgModule({
imports: [...],
declarations: [...],
exports: [...],
providers: [...]
})
export class CoreModule {
constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error('CoreModule is already loaded.');
}
}
static forRoot(config: UserServiceConfig): ModuleWithProviders {
return {
ngModule: CoreModule,
providers: [
{provide: UserServiceConfig, useValue: config }
]
};
}
}
Prevent
reimport
Configure
core services

UI
(DOM)
Model
<div *ngFor="#todo of todos">
<input [(ngModel)]="todo.done">
{{todo.text}}
</span>
</div>

Component
(7 expressions)
Component
(5 expressions)
Component
(9 expressions)
Component
(6 expressions)
Component
(2 expressions)
Component
(3 expressions)
 {{interpolation}}
 [property] = "exp"

Timer Event
(50ms)
Communication (300ms)
UI Events
(avg 3s)
UI Events
(avg 2s)

Component
(7 expressions)
Component
(5 expressions)
Component
(9 expressions)
Component
(6 expressions)
Component
(2 expressions)
Component
(3 expressions)

export class CounterComponent {
value:number = 0;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
setInterval( ()=>{ this.value++; } , 50 );
}
}
Ticks
Never use
setInterval method
setInterval( ()=>{ this.value++; } , 50 );
Update

value:number = 0;
run();
}
run(){
this.value++;
setTimeout( ()=> { this.run() } , 50 );
}
}
Create method
every time
Ticks Update
setTimeout( ()=> { this.run() } , 50 );

value : number = 0;
runFnBind : any;
this.runFnBind = this.run.bind(this);
run();
}
run(){
this.value++;
setTimeout( this.runFnBind , 50 );
}
}
Ticks Update

value : number = 0;
runFnBind : any;
zone.runOutsideAngular( this.runFnBind );
}
run(){
this.value++;
}
}
Ticks Update
zone.runOutsideAngular( this.runFnBind );

value:number = 0;
zone.runOutsideAngular( this.run.bind(this) );
}
run(){
this.value++;
this.cd.detectChanges();
setTimeout( this.run.bind(this) , 50 );
}
}
Ticks Update

Search
Title : {{title}}
Name : {{name}}
Phone : {{phone}}
Mobile : {{mobile}}
Picture: {{picture}}

export class MonitorComponent {
...
constructor(private cd :ChangeDetectorRef){
cd.detach();
}
...
set serverLoadValue(val){
let isthreshold = this.checkThreshold(val);
this._serverLoadValue = val;
if(isthreshold){
}
}
}
cd.detach();

Angular 2 Architecture (Bucharest 26/10/2016)

More Related Content

What's hot (20)

Similar to Angular 2 Architecture (Bucharest 26/10/2016) (12)

More from Eyal Vardi (15)

Recently uploaded (20)

Angular 2 Architecture (Bucharest 26/10/2016)

Editor's Notes