In this meetup Eyal Vardi will talk about Angular 2.0 architecture. The session will focus on the main parts of Angular 2.0:  Application Bootstrap  Angular Compiler  Hierarchical Injector  Component Lifecycle Hooks  Change Detector  Renderer  Dynamic component creation Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular. The session is mostly targeted for developers which already have some experience with Angular 2.0.

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

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

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

6. <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:

7. DD
D
D
D D
D
D
D
D
D
D
D

8. <div *ngFor="let todo of todos" >
<input type="checkbox" [(ngModel)]="todo.done" >
<span (click)="setActive(todo)"
[class.done]="todo.done" >
{{todo.text}}
</span>
</div>

9. @Component({
selector: 'todo-list',
template: `
<div *ngFor="let todo of todos">
<input type="checkbox" [(ngModel)]="todo.done">
<span (click)="setActive(todo)"
[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){}
}

10. @Component({
selector: 'todo-list',
template: `
<div *ngFor="let todo of todos">
<input type="checkbox" [(ngModel)]="todo.done">
<span (click)="setActive(todo)"
[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){}
}
<todo-list [source]="todos"
(selected-change)="update($event)" />

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

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

14. Platform Injectors
Component Injectors
Application Injectors

15. @Component({
selector: 'todo-list',
providers : [UserProxy],
template: `...`})
export class TodoListComponent { }

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

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

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

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

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

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

24. @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

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

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

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

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

31. 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

32. export class CounterComponent {
value:number = 0;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
run();
}
run(){
this.value++;
setTimeout( ()=> { this.run() } , 50 );
}
}
Create method
every time
Ticks Update
setTimeout( ()=> { this.run() } , 50 );

33. export class CounterComponent {
value : number = 0;
runFnBind : any;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
this.runFnBind = this.run.bind(this);
run();
}
run(){
this.value++;
setTimeout( this.runFnBind , 50 );
}
}
Ticks Update
this.runFnBind = this.run.bind(this);
setTimeout( this.runFnBind , 50 );

34. export class CounterComponent {
value : number = 0;
runFnBind : any;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
this.runFnBind = this.run.bind(this);
zone.runOutsideAngular( this.runFnBind );
}
run(){
this.value++;
setTimeout( this.runFnBind , 50 );
}
}
Ticks Update
zone.runOutsideAngular( this.runFnBind );

35. export class CounterComponent {
value:number = 0;
constructor(private zone:NgZone,
private cd :ChangeDetectorRef){
zone.runOutsideAngular( this.run.bind(this) );
}
run(){
this.value++;
this.cd.detectChanges();
setTimeout( this.run.bind(this) , 50 );
}
}
Ticks Update
this.cd.detectChanges();

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

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