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>

<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-route.js"></script>

<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</body>
</html>
ngRoute app
ctrls services
DOM Content
Loaded Event

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

angular.module('app',['ngRoute','ctrls'])
.config(function($routeProvider){});

angular.module('ngRoute',[])
.provider('$route',fn);

angular.module('ctrls',['services'])
.controller('MainCtrl', fn);

angular.module('services',[])
.service('todoSer', fn);

angular
Modules (private)
ngRoute
app
services
Provider Injector
Keys Values
todoSer
{ $get : factoryFn }
$controllerProvider
Keys Values
constructor
$route
config
ctrls
MainCtrl
todoSer
Provider
$route
Provider

angular
$injector
Provider Injector
Instance Cache
Provider Cache
Keys Values
todoSerProvider
$routeProvider
Invoke( )get( )
Keys Values
instantiate( ) has( )
Invoke( )get( ) instantiate( ) has( )

angular
Provider Injector
Instance Cache
Provider Cache
Keys Values
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.

<body>
<script src="lib/angular-route.js"></script>
</body>
</html>
angular.module('app', ['ngRoute']);
The module file are
being downloaded
correctly
The module name
in the requires is
not misspelled

<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

HTML
Browser
Static
DOM
Dynamic
DOM
(View)
AngularJS
DOM
Content
Loaded
Event
ng-app=“module”
$injector
$compile $rootScope
$compile (dom,
$rootScope)

Modules and injector

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Modules and injector (20)

More from Eyal Vardi (8)

Recently uploaded (20)

Modules and injector