Angular 1.x vs. Angular 2.x

var 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)
Compile the root
element and return
link function.
Execute the link
function with the root
scope.
Apply,
update
the page

<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

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
ApplicationRef
I
I Z C R
IZCR
IC
IC
IC
IC ICIC

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

ngXXX
angular.module('myApp', ['ngXXX', 'ngYYY']);
Invoke
Queue
ngYYY
Invoke
Queue
myApp
Invoke
Queue
Config
blocks
Config
blocks
Config
blocks
Run
blocks
Run
blocks
Run
blocks
$injector
Instance
Cache
Provider
Cache

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_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 Directive
TemplateContent
viewProviders
directives
pipes
Providers
@ViewChild
@ViewChildren
DOM Element

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

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

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;
});

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

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;
});

Can enter an
infinite loop
Need explicitly
call

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

Component
TemplateContent
1
2
3
4
5
6
7

Angulal2.js
Router.js Http.js Rx.js
ServicesComponents Directives

<todo-list
[source]="todos"
(selected-change)="update($event)" />
Style
Injector
Class
Template

Angular 1.x vs. Angular 2.x

More Related Content

What's hot

Viewers also liked

More from Eyal Vardi

Recently uploaded

Angular 1.x vs. Angular 2.x