Modules and injector
•Download as PPTX, PDF•
9 likes•7,753 views
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.
![angular
Modules (private)
angular.module( 'moduleName' , [ ] ) angular.module( 'moduleName' )
moduleName](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Modules and injector
Similar to Modules and injector (20)
More from Eyal Vardi
Recently uploaded
Recently uploaded (20)
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