angular 1.x vs. angular 2.x
TRANSCRIPT
Angular 1.x vs.
Angular 2.0
2
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
Bootstrap
Angular 1.x Bootstrapvar injector = createInjector(modules);
injector.invoke([
'$rootScope','$rootElement','$compile','$injector','$animate',
function(scope, element, compile, injector, animate) {
scope.$apply(function() {
element.data('$injector', injector);
compile(element)(scope);
});
}]
);
Create injector(config & run)
1
Compile the root element and return link function.
2 Execute the link function with the root scope.
3
Apply, update
the page
4
Angular 2.0 Bootstrap
<html> <head> . . . <script src="angular2.js"></script> <script src="router.js"></script> <script src="http.js"></script> <script> System.import('app/main'); </script> </head> <body>
<my-app>Loading...</my-app> </body></html>
Async
Angular 2.0 Bootstrap
import {bootstrap} from 'angular2/platform/browser';
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
PlatformRef Each page has exactly one platform.
ApplicationRef
I
I Injector ZZone CChange DetectionRRenderer
IZCR
IC
IC
IC
IC ICIC
Bootstrap Code // Create Platform Injector platform( BROWSER_PROVIDERS ) // Create Application Injector .application([ BROWSER_APP_PROVIDERS, appProviders ]); // Create Injector => Compile => tick => Create Classes .bootstrap( MyApp );
Injector
ngXXX
Module Summaryangular.module('myApp', ['ngXXX', 'ngYYY']);
InvokeQueue
ngYYY
InvokeQueue
myApp
InvokeQueue
Configblocks
Configblocks
Configblocks
Runblocks
Runblocks
Runblocks
$injector
Instance Cache
ProviderCache
A
Child Injector
Parent InjectorA,B,C
Child Injector
A,B
Child Injector
A
var p = Injector.resolveAndCreate([A,B,C])
var c1 = p.resolveAndCreateChild([A,B])
var c2 = c1.resolveAndCreateChild([A])
c2.get(A) =>
B C@Injectable()class A{ constructor(b:B,c:C){ //... }}
Injectors TreePlatform
BROWSER_PROVIDERS
ApplicationBROWSER_APP_PROVIDERS & CustomProviders
IC
IC
IC
IC ICIC
Component Metadata
providers viewProviders directives pipes
PLATFORM_PIPES PLATFORM_DIRECTIV
ES FORM_PROVIDERS DOCUMENT DomRootRenderer . . .
PLATFORM_INITIALIZER
Reflector Console
Component Injectors
<component my-
directive>
<sub-comp/>
<sub-comp/>
</component>
Component Injector
<component my-
directive>
<sub-comp/>
<sub-comp/>
</component>
Component Injector
Component Directive
TemplateContent
*
* *
viewProviders
directivespipes
Providers@ContentChild@ContentChildren
@ViewChild@ViewChildre
n
DOM Element
@Global()
The Provider Class
[ServiceA]
[provide(ServiceA, {useClass:ServiceA})]
[new Provider(ServiceA, {useClass:ServiceA})]
==
==
token "recipe" for creating
Provider Classconstructor(token: any, { useClass, useValue, useExisting, useFactory, deps, multi }: {
useClass? : Type,
useValue? : any,
useExisting?: any,
useFactory? : Function,
deps? : Object[],
multi? : boolean})
ComponentMetadata
Component Metadata Names:
selector? : string exportAs? : string
Binding: inputs? : string[] outputs? : string[] host? : {[key: string]: string} changeDetection?: ChangeDetectionStrategy
View: templateUrl? : string template? : string styleUrls? : string[] styles? : string[] encapsulation?:
ViewEncapsulation
Injector: providers? : any[] viewProviders? : any[] directives? : Array<Type | any[]> pipes? : Array<Type | any[]> queries? : {[key: string]: any} Directive
Metadata
Compile
Directive Definition Object (DDO)myModule.directive('directiveName', function factory(injectables) { var DDO = {
priority: 0,
replace: false,
transclude: false,
restrict: 'EA',
terminal: false,
template: '<div></div>',
templateUrl:'directive.html',
compile: function(tElement, tAttrs, transclude) { ... }};
return DDO;});
This properties affect the
$compile service.Beha
vior
s
ComponentMetadata
Component Metadata Names:
selector? : string exportAs? : string
Binding: inputs? : string[] outputs? : string[] host? : {[key: string]: string} changeDetection?: ChangeDetectionStrategy
View: templateUrl? : string template? : string styleUrls? : string[] styles? : string[] encapsulation?:
ViewEncapsulation
Injector: providers? : any[] viewProviders? : any[] directives? : Array<Type | any[]> pipes? : Array<Type | any[]> queries? : {[key: string]: any} Directive
Metadata
Runtime Metadata Resolver DirectiveResolver
templateUrl?
template?
directives?
pipes?
encapsulation?
styles?
styleUrls?
selector?
inputs?
outputs?
host?
providers?
exportAs?
queries?
ViewResolver
UrlResolver
Component Multi Views
Link
Directive Definition Object (DDO)myModule.directive('directiveName', function factory(injectables) { var DDO = { priority: 0, terminal: false, template: '<div></div>', templateUrl:'directive.html', replace: false, transclude: false, restrict: 'A', compile: function compile(tElement, tAttrs, transclude) {...},
scope: false, require: '^?ngModel' controller: function($scope, $element, $attrs, $transclude, Injectables) { ... }, link: function postLink(scope, iElement, iAttrs, controller) { ... } };
return DDO;});
Link
Com
pile
Link Function vs. Class Constructor ElementRef
TemplateRef
ViewContainerRef
Renderer
DynamicComponentLoader
Dynamic Component
Apply
Scope's $digest() Flow
$evelAsyncQueue
TraverseScopeLoop
$$postDigest
Screen Update
Tim
e
Can enter an infinite
loop
Need explicitly
call
Angular 2.0 Tick Cycle
IC
IC
IC
IC ICIC
NgZoneCommunication,Timers, UI Events
Tim
e
Screen Update
{{interpolation}} [property] = "exp" (event) = "exp"
Infinity Loop
Change Detector
F x Q = Time
IC
IC
IC
IC ICIC
Lifecycle Hooks Angular calls lifecycle hook methods on
directives and components as it creates, changes, and destroys them.
Creates: OnInit AfterContentInit AfterViewInit
Changes: DoCheck OnChanges AfterContentChecked AfterViewChecked
Destroys: OnDestroy
Hooks Order
Component
TemplateContent
* *
OnChangesOnInit
AfterContentInitAfterContentChecked
AfterViewInitAfterViewChecked
DoCheck
Hooks Order
Component
TemplateContent
* *
OnChangesOnInit
AfterContentInitAfterContentChecked
AfterViewInitAfterViewChecked
DoCheck
1
2
3
4
5
6
7
ChangeDetector
Angulal2.js
Router.js Http.js Rx.js
ServicesComponents Directives
eyalvardi.wordpress.com
Thanks2
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
Component Structure<todo-list [source]="todos" (selected-change)="update($event)" />
Style
Injector
Class
Template
InputOutput