Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
System
shim
ZoneReflectRx
Libraries
Application
<todo-list [source]="todos"
(selected-change)="update($event)" />
core & c...
@Component({
selector: 'todo-list',
styles: [`
.done{
text-decoration: line-through;
color: grey;
}`],
template: `
<ul cla...
<div class="container">
<div class="starter-template">
<a href="http://ng-course.org" target="_blank">
<img src="images/ng...
<html>
<head>
. . .
<script src="shim.js"></script>
<script src="zone.js"></script>
<script src="Reflect.js"></script>
<sc...
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppCo...
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...
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 Metadat...
Component
Metadata
 queries? : {[key: string]: any} Directive
Metadata
import {Component} from "@angular/core";
import {Type1,Type2,Type3} from "eyalVardi";
import {Pipe1,Directive1} from "eyal...
token
"recipe" for
creating
constructor(token: any, { useClass, useValue, useExisting,
useFactory, deps, multi }: {
useClass? : Type,
useValue? : any,...
<component my-directive>
<sub-comp/>
<sub-comp/>
</component>
<component my-directive>
<sub-comp/>
<sub-comp/>
</component>
Component3 Template
App
Component1
Component2
Directive1
Component3
loading
<app>Loading</app>
<div>
<component1 directive...
Component Directive
TemplateContent
viewProviders
directives
pipes
Providers
@ViewChild
@ViewChildren
DOM Element
Providers
bootstrap(AppComponent, [
{provide: PLATFORM_DIRECTIVES, useValue: [myComponent], multi:true},
{provide: PLATFORM_PIPES , ...
@Component({...})
export class MyComponent {
constructor(
element : ElementRef
, changeDetector: ChangeDetectorRef
, viewC...
Component
Metadata
 queries? : {[key: string]: any} Directive
Metadata
templateUrl?
template?
directives?
pipes?
encapsulation?
styles?
styleUrls?
selector?
inputs?
outputs?
host?
providers?
ex...
IC
IC
IC
IC ICIC
 {{interpolation}}
 [property] = "exp"
 (event) = "exp"
IC
IC
IC
IC ICIC
Component
TemplateContent
Component
TemplateContent
1
2
3
4
5
6
7
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Angular 2 Architecture
Upcoming SlideShare
Loading in …5
×

Angular 2 Architecture

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
 Angular 2.0 & jQuery
 Dynamic component creation
 Tips & Tricks
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.

  • Login to see the comments

Angular 2 Architecture

  1. 1. System shim ZoneReflectRx Libraries Application <todo-list [source]="todos" (selected-change)="update($event)" /> core & common Angular Frameworks Router Http Compiler Platform
  2. 2. @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){} }
  3. 3. <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>
  4. 4. <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
  5. 5. 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
  6. 6. PlatformRef ApplicationRef I I Z C R IZCR IC IC IC IC ICIC
  7. 7. // 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 );
  8. 8. A Parent Injector A,B,C Child Injector A,B Child Injector A B C @Injectable() class A{ constructor(b:B,c:C){ //... } }
  9. 9. 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
  10. 10. Component Metadata  queries? : {[key: string]: any} Directive Metadata
  11. 11. 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
  12. 12. token "recipe" for creating
  13. 13. constructor(token: any, { useClass, useValue, useExisting, useFactory, deps, multi }: { useClass? : Type, useValue? : any, useExisting?: any, useFactory? : Function, deps? : Object[], multi? : boolean })
  14. 14. <component my-directive> <sub-comp/> <sub-comp/> </component> <component my-directive> <sub-comp/> <sub-comp/> </component>
  15. 15. 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>
  16. 16. Component Directive TemplateContent viewProviders directives pipes Providers @ViewChild @ViewChildren DOM Element Providers
  17. 17. bootstrap(AppComponent, [ {provide: PLATFORM_DIRECTIVES, useValue: [myComponent], multi:true}, {provide: PLATFORM_PIPES , useValue: [myPipe] , multi:true} ]); Available in every component of the application
  18. 18. @Component({...}) export class MyComponent { constructor( element : ElementRef , changeDetector: ChangeDetectorRef , viewContainer : ViewContainerRef , template : TemplateRef , render : Renderer ){...} }
  19. 19. Component Metadata  queries? : {[key: string]: any} Directive Metadata
  20. 20. templateUrl? template? directives? pipes? encapsulation? styles? styleUrls? selector? inputs? outputs? host? providers? exportAs? queries?
  21. 21. IC IC IC IC ICIC  {{interpolation}}  [property] = "exp"  (event) = "exp"
  22. 22. IC IC IC IC ICIC
  23. 23. Component TemplateContent
  24. 24. Component TemplateContent 1 2 3 4 5 6 7

×