Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Modules and injector

•Download as PPTX, PDF•
•

The document discusses AngularJS modules and dependency injection. It explains that modules allow grouping of related code, and the injector resolves dependencies. It provides examples of defining modules, registering components, and the injector loading modules and resolving dependencies.

1 of 21
Modules and injector
angular Modules (private) angular.module( 'moduleName' , [ ] ) angular.module( 'moduleName' ) moduleName
<html lang="en" ng-app="myTodo"> <body> ... <script src="lib/angular.js"></script> <!-- My Modules --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </body> </html> // app.js file must to be first angular.module('myTodo',[]); // controllers.js must to be after app.js angular.module('myTodo');
angular.module('myApp', ['bl']) // Name (key) and value (function) .controller('MainCtrl',MainCtrl) .directive ('tabs',tabsDirective) .provider('proxy',proxyProvider) // Functions only .config(function(proxyProvider){…}) .run(function(proxy){…});  name : 'myApp'  requires : [ 'bl'] _runBlocks : [ ] _configBlocks : [ ] _invokeQueue : [ ] 'MainCtrl',MainCtrl 'tabs',tabsDirective 'proxy',proxyProvider function(proxyProvider){…} function(proxy){…}
 name : string  requires : [ ] _runBlocks : [ ] run( initializationFn ) _configBlocks : [ ] Config(function( xxxProvider ){ }) _invokeQueue : [ ] - controller(name, constructor) - directive (name, directiveFn) - filter (name, filterFactory) - animation (name, animationFactory) - service (name, constructor) - factory (name, providerFn) - provider (name, providerType) - decorator(name, fn ) - constant (name, object) - value (name, object)
angular Modules (private) Browser <html lang="en" ng-app="app"> <body> <div class="view-container"> <div ng-view class="view-frame"></div> </div> <script src="lib/angular.js"></script> <!-- Angular Modules --> <script src="lib/angular-route.js"></script> <!-- My Modules --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </body> </html> ngRoute app ctrls services DOM Content Loaded Event
Modules and injector
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 the injector and load the modules to the injector. Compile the root element and return link function. Execute the link function with the root scope. Apply, update the page
angular Modules (private) ngRoute app ctrls services $injector (Instance Injector) Provider Injector Instance Cache Provider Cache Keys Values Invoke( )get( ) Keys Values instantiate( ) has( ) Invoke( )get( ) instantiate( ) has( )
angular Modules (private) ngRoute app ctrls services <!-- app.js --> angular.module('app',['ngRoute','ctrls']) .config(function($routeProvider){}); <!-- angular-route.js --> angular.module('ngRoute',[]) .provider('$route',fn); <!-- controllers.js --> angular.module('ctrls',['services']) .controller('MainCtrl', fn); <!-- services.js --> angular.module('services',[]) .service('todoSer', fn); <html lang="en" ng-app="app">
angular Modules (private) ngRoute app services Provider Injector Keys Values todoSer { $get : factoryFn } $controllerProvider Keys Values constructor $route { $get : factoryFn } config ctrls MainCtrl { $get : factoryFn } todoSer Provider $route Provider
angular $injector Provider Injector Instance Cache Provider Cache Keys Values { $get : factoryFn } { $get : factoryFn } todoSerProvider $routeProvider Invoke( )get( ) Keys Values instantiate( ) has( ) Invoke( )get( ) instantiate( ) has( )
angular Provider Injector Instance Cache Provider Cache Keys Values { $get : factoryFn } { $get : factoryFn } todoSerProvider $routeProvider angular.module('app',['ngRoute','ctrls'] .run(function runFn(todoSer){ todoSer.load(); }); Invoke( runFn )get( 'todoSer' ) get( 'todoSer' + 'Provider' ) Keys Values { . . .}todoSer
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
// You write functions such as this one. function doSomething(serviceA, serviceB) { // do something here. } // Angular provides the injector for your application var $injector = ...; $injector.invoke(doSomething); var serviceA = $injector.get('serviceA'); var serviceB = $injector.get('serviceB'); doSomething(serviceA, serviceB);
// inline option $injector.invoke( [ 'serviceA', function (serviceA) { } ] ); $injector.invoke( function (serviceA) { } ); $injector.invoke( function ( sa ) { } ); minified xxx.js xxx.min.js // annotated option explicit.$inject = ['serviceA']; function explicit(serviceA) { }; $injector.invoke(explicit);
<ANY ng-app="angular.Module" [ng-strict-di="boolean"]> ... </ANY> Useful for debugging info, will assist in tracking down the root of these bugs.
<html lang="en" ng-app="app"> <body> <script src="lib/angular.js"></script> <script src="lib/angular-route.js"></script> <script src="js/app.js"></script> </body> </html> angular.module('app', ['ngRoute']); The module file are being downloaded correctly The module name in the requires is not misspelled
<html lang="en" ng-app="app"> <body ng-controller="Ctrl"> <script src="angular.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body> </html> angular.module('app', ['ngRoute']).controller('Ctrl', function(){...}); The module, where the provider / controller is defined, is loaded to the injector Spelled correctly
Modules and injector
HTML Browser Static DOM Dynamic DOM (View) AngularJS DOM Content Loaded Event ng-app=“module” $injector $compile $rootScope $compile (dom, $rootScope)

More Related Content

Modules and injector

  • 2. angular Modules (private) angular.module( 'moduleName' , [ ] ) angular.module( 'moduleName' ) moduleName
  • 3. <html lang="en" ng-app="myTodo"> <body> ... <script src="lib/angular.js"></script> <!-- My Modules --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </body> </html> // app.js file must to be first angular.module('myTodo',[]); // controllers.js must to be after app.js angular.module('myTodo');
  • 4. angular.module('myApp', ['bl']) // Name (key) and value (function) .controller('MainCtrl',MainCtrl) .directive ('tabs',tabsDirective) .provider('proxy',proxyProvider) // Functions only .config(function(proxyProvider){…}) .run(function(proxy){…});  name : 'myApp'  requires : [ 'bl'] _runBlocks : [ ] _configBlocks : [ ] _invokeQueue : [ ] 'MainCtrl',MainCtrl 'tabs',tabsDirective 'proxy',proxyProvider function(proxyProvider){…} function(proxy){…}
  • 5.  name : string  requires : [ ] _runBlocks : [ ] run( initializationFn ) _configBlocks : [ ] Config(function( xxxProvider ){ }) _invokeQueue : [ ] - controller(name, constructor) - directive (name, directiveFn) - filter (name, filterFactory) - animation (name, animationFactory) - service (name, constructor) - factory (name, providerFn) - provider (name, providerType) - decorator(name, fn ) - constant (name, object) - value (name, object)
  • 6. angular Modules (private) Browser <html lang="en" ng-app="app"> <body> <div class="view-container"> <div ng-view class="view-frame"></div> </div> <script src="lib/angular.js"></script> <!-- Angular Modules --> <script src="lib/angular-route.js"></script> <!-- My Modules --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </body> </html> ngRoute app ctrls services DOM Content Loaded Event
  • 8. 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 the injector and load the modules to the injector. Compile the root element and return link function. Execute the link function with the root scope. Apply, update the page
  • 9. angular Modules (private) ngRoute app ctrls services $injector (Instance Injector) Provider Injector Instance Cache Provider Cache Keys Values Invoke( )get( ) Keys Values instantiate( ) has( ) Invoke( )get( ) instantiate( ) has( )
  • 10. angular Modules (private) ngRoute app ctrls services <!-- app.js --> angular.module('app',['ngRoute','ctrls']) .config(function($routeProvider){}); <!-- angular-route.js --> angular.module('ngRoute',[]) .provider('$route',fn); <!-- controllers.js --> angular.module('ctrls',['services']) .controller('MainCtrl', fn); <!-- services.js --> angular.module('services',[]) .service('todoSer', fn); <html lang="en" ng-app="app">
  • 11. angular Modules (private) ngRoute app services Provider Injector Keys Values todoSer { $get : factoryFn } $controllerProvider Keys Values constructor $route { $get : factoryFn } config ctrls MainCtrl { $get : factoryFn } todoSer Provider $route Provider
  • 12. angular $injector Provider Injector Instance Cache Provider Cache Keys Values { $get : factoryFn } { $get : factoryFn } todoSerProvider $routeProvider Invoke( )get( ) Keys Values instantiate( ) has( ) Invoke( )get( ) instantiate( ) has( )
  • 13. angular Provider Injector Instance Cache Provider Cache Keys Values { $get : factoryFn } { $get : factoryFn } todoSerProvider $routeProvider angular.module('app',['ngRoute','ctrls'] .run(function runFn(todoSer){ todoSer.load(); }); Invoke( runFn )get( 'todoSer' ) get( 'todoSer' + 'Provider' ) Keys Values { . . .}todoSer
  • 15. // You write functions such as this one. function doSomething(serviceA, serviceB) { // do something here. } // Angular provides the injector for your application var $injector = ...; $injector.invoke(doSomething); var serviceA = $injector.get('serviceA'); var serviceB = $injector.get('serviceB'); doSomething(serviceA, serviceB);
  • 16. // inline option $injector.invoke( [ 'serviceA', function (serviceA) { } ] ); $injector.invoke( function (serviceA) { } ); $injector.invoke( function ( sa ) { } ); minified xxx.js xxx.min.js // annotated option explicit.$inject = ['serviceA']; function explicit(serviceA) { }; $injector.invoke(explicit);
  • 17. <ANY ng-app="angular.Module" [ng-strict-di="boolean"]> ... </ANY> Useful for debugging info, will assist in tracking down the root of these bugs.
  • 18. <html lang="en" ng-app="app"> <body> <script src="lib/angular.js"></script> <script src="lib/angular-route.js"></script> <script src="js/app.js"></script> </body> </html> angular.module('app', ['ngRoute']); The module file are being downloaded correctly The module name in the requires is not misspelled
  • 19. <html lang="en" ng-app="app"> <body ng-controller="Ctrl"> <script src="angular.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body> </html> angular.module('app', ['ngRoute']).controller('Ctrl', function(){...}); The module, where the provider / controller is defined, is loaded to the injector Spelled correctly