Angular 2 Architecture

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

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

<div class="container">
<div class="starter-template">
<a href="http://ng-course.org" target="_blank">
<img src="images/ng-course.png" width="500">
</a>
<br>
<my-app>Loading...</my-app>
</div>
</div>

<html>
<head>
. . .
<script src="shim.js"></script>
<script src="zone.js"></script>
<script src="Reflect.js"></script>
<script src="system.js"></script>
<script>
System.import('app/main');
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Async
1
3
2

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
Load Tree !!!
1
Create Platform
2
Create Application
3
Compile
AppComponent
4
Tick
&
Link (Create Classes)
5

PlatformRef
ApplicationRef
I
I Z C R
IZCR
IC
IC
IC
IC ICIC

// Create Platform Injector
platform(BROWSER_PLATFORM_PROVIDERS)
// Create Application Injector
.application([
BROWSER_APP_PROVIDERS
BROWSER_APP_COMPILER_PROVIDERS,
appProviders
]);
// Create Injector => Compile => tick => Create Classes
.bootstrap( MyApp );

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

Platform
BROWSER_PLATFORM_PROVIDERS
Application
BROWSER_APP_PROVIDERS & CustomProviders
IC
IC
IC
IC ICIC
Component Metadata
 providers
 viewProviders
 directives
 pipes
 PLATFORM_PIPES
 PLATFORM_DIRECTIVES
 FORM_PROVIDERS
 DOCUMENT
 DomRootRenderer
 . . .
 PLATFORM_INITIALIZER
 Reflector
 Console

Component
Metadata
 queries? : {[key: string]: any} Directive
Metadata

import {Component} from "@angular/core";
import {Type1,Type2,Type3} from "eyalVardi";
import {Pipe1,Directive1} from "eyalVardi";
import {Component2} from "eyalVardi";
import {Service1} from "eyalVardi";
@Component({
providers :[Type1,Type2],
viewProviders:[Type3],
pipes :[Pipe1],
directives :[Directive1,Component2]
})
export class MyComponent {
constructor(
element : ElementRef,
type1 : Type1
){}
}
Must solve in
runtime by
the Injector

constructor(token: any, { useClass, useValue, useExisting,
useFactory, deps, multi }: {
useClass? : Type,
useValue? : any,
useExisting?: any,
useFactory? : Function,
deps? : Object[],
multi? : boolean
})

Component3 Template
App
Component1
Component2
Directive1
Component3
loading
<app>Loading</app>
<div>
<component1 directive1="{{name}}">
<component2>
This is content.
</component2>
</component1>
</div>
<div>
<h4>{{name}}</h4>
<ng-content />
</div>
This is
content
<div>
<h4>{{name}}</h4>
<ng-content />
</div>

Component Directive
TemplateContent
viewProviders
directives
pipes
Providers
@ViewChild
@ViewChildren
DOM Element
Providers

bootstrap(AppComponent, [
{provide: PLATFORM_DIRECTIVES, useValue: [myComponent], multi:true},
{provide: PLATFORM_PIPES , useValue: [myPipe] , multi:true}
]);
Available in every
component of the
application

@Component({...})
export class MyComponent {
constructor(
element : ElementRef
, changeDetector: ChangeDetectorRef
, viewContainer : ViewContainerRef
, template : TemplateRef
, render : Renderer
){...}
}

templateUrl?
template?
directives?
pipes?
encapsulation?
styles?
styleUrls?
selector?
inputs?
outputs?
host?
providers?
exportAs?
queries?

IC
IC
IC
IC ICIC
 {{interpolation}}
 [property] = "exp"
 (event) = "exp"

Component
TemplateContent
1
2
3
4
5
6
7

Angular 2 Architecture

More Related Content

What's hot (20)

More from Eyal Vardi (14)

Recently uploaded (20)

Angular 2 Architecture