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.
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){…}
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
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);
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