Angular 1.x vs. Angular 2.x
•Download as PPTX, PDF•
5 likes•6,455 views
Angular 1.x vs. Angular 2.x
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to Angular 1.x vs. Angular 2.x
Similar to Angular 1.x vs. Angular 2.x (20)
More from Eyal Vardi
More from Eyal Vardi (11)
Recently uploaded
Recently uploaded (20)
Angular 1.x vs. Angular 2.x
- 3. 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
- 4. <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
- 5. 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
- 6. PlatformRef ApplicationRef I I Z C R IZCR IC IC IC IC ICIC
- 7. // Create Platform Injector platform( BROWSER_PROVIDERS ) // Create Application Injector .application([ BROWSER_APP_PROVIDERS, appProviders ]); // Create Injector => Compile => tick => Create Classes .bootstrap( MyApp );
- 10. A Parent Injector A,B,C Child Injector A,B Child Injector A B C @Injectable() class A{ constructor(b:B,c:C){ //... } }
- 11. 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
- 16. constructor(token: any, { useClass, useValue, useExisting, useFactory, deps, multi }: { useClass? : Type, useValue? : any, useExisting?: any, useFactory? : Function, deps? : Object[], multi? : boolean })
- 17. Component Metadata queries? : {[key: string]: any} Directive Metadata
- 19. 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; });
- 20. Component Metadata queries? : {[key: string]: any} Directive Metadata
- 24. 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; });
- 28. Can enter an infinite loop Need explicitly call
- 29. IC IC IC IC ICIC {{interpolation}} [property] = "exp" (event) = "exp"
- 31. IC IC IC IC ICIC
- 36. Angulal2.js Router.js Http.js Rx.js ServicesComponents Directives