Angular 2 Architecture
•Download as PPTX, PDF•
17 likes•6,258 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular 2 Architecture
Similar to Angular 2 Architecture (20)
More from Eyal Vardi
More from Eyal Vardi (14)
Recently uploaded
Recently uploaded (20)
Angular 2 Architecture
- 5. System shim ZoneReflectRx Libraries Application <todo-list [source]="todos" (selected-change)="update($event)" /> core & common Angular Frameworks Router Http Compiler Platform
- 6. @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){} }
- 7. <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>
- 9. <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
- 10. 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
- 11. PlatformRef ApplicationRef I I Z C R IZCR IC IC IC IC ICIC
- 12. // 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 );
- 14. A Parent Injector A,B,C Child Injector A,B Child Injector A B C @Injectable() class A{ constructor(b:B,c:C){ //... } }
- 15. 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
- 16. Component Metadata queries? : {[key: string]: any} Directive Metadata
- 17. 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
- 19. constructor(token: any, { useClass, useValue, useExisting, useFactory, deps, multi }: { useClass? : Type, useValue? : any, useExisting?: any, useFactory? : Function, deps? : Object[], multi? : boolean })
- 21. 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>
- 24. bootstrap(AppComponent, [ {provide: PLATFORM_DIRECTIVES, useValue: [myComponent], multi:true}, {provide: PLATFORM_PIPES , useValue: [myPipe] , multi:true} ]); Available in every component of the application
- 28. @Component({...}) export class MyComponent { constructor( element : ElementRef , changeDetector: ChangeDetectorRef , viewContainer : ViewContainerRef , template : TemplateRef , render : Renderer ){...} }
- 30. Component Metadata queries? : {[key: string]: any} Directive Metadata
- 37. IC IC IC IC ICIC {{interpolation}} [property] = "exp" (event) = "exp"
- 39. IC IC IC IC ICIC