Modules and injector

Modules & Injector

Eyal VardiSite: Angular.org.ilBlog: eyalvardi.wordpress.com

Module Function

angular

Modules (private)

angular.module( 'moduleName' , [ ] ) angular.module( 'moduleName' )

moduleName

Create Module: Get Module:

JavaScript Files Dependency

<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 firstangular.module('myTodo',[]);

// controllers.js must to be after app.jsangular.module('myTodo');

Module Object

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

Module Object 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)

Modules CreationBrowser

<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>  <script src="lib/angular-route.js"></script>  <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

When DOMContentLoaded Event Fire angular start to work !!!

AngularJS Codevar 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.

1

Compile the root element and return link function.

2 Execute the link function with the root scope.

3

Apply, update

the page

4

1. Create Injectorangular

Modules (private)

ngRoute app

ctrls services

$injector (Instance Injector)

Provider Injector

Instance Cache

Provider CacheKeys Values

Invoke( )get( )

Keys Values

instantiate( ) has( )

Invoke( )get( ) instantiate( ) has( )

2. Modules Treeangular

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);

<html lang="en" ng-app="app">

3. Load Modulesangular

Modules (private)

ngRoute

app

services

Provider Injector

Keys Values

todoSer

{ $get : factoryFn }

$controllerProviderKeys Values

constructor

$route


config

ctrlsMainCtrl


todoSerProvider

$routeProvider

angular

4. Load Modules Finish

$injector

Provider Injector

Instance Cache




todoSerProvider

$routeProvider

Invoke( )get( )

Keys Values

instantiate( ) has( )

Invoke( )get( ) instantiate( ) has( )

angular

5. Run State

Provider Injector

Instance Cache




todoSerProvider

$routeProvider

angular.module('app',['ngRoute','ctrls'] .run(function runFn(todoSer){ todoSer.load(); });

Invoke( runFn )get( 'todoSer' )

get( 'todoSer' + 'Provider' )

Keys Values{ . . .}todoSer

ngXXX

Module Summaryangular.module('myApp', ['ngXXX', 'ngYYY']);

InvokeQueue

ngYYY

InvokeQueue

myApp

InvokeQueue

Configblocks

Configblocks

Configblocks

Runblocks

Runblocks

Runblocks

$injector

Instance Cache

ProviderCache

The Real Magic of The Injector // You write functions such as this one.function doSomething(serviceA, serviceB) { // do something here.} // Angular provides the injector for your applicationvar $injector = ...;

$injector.invoke(doSomething);

var serviceA = $injector.get('serviceA'); var serviceB = $injector.get('serviceB'); doSomething(serviceA, serviceB);

=

Minified Problem

// inline option$injector.invoke( [ 'serviceA', function (serviceA) { } ] );

$injector.invoke( function (serviceA) { } );

$injector.invoke( function ( sa ) { } );

minified

xxx.js

xxx.min.js

Solutions

// annotated optionexplicit.$inject = ['serviceA'];function explicit(serviceA) { };$injector.invoke(explicit);

ng-strict-di The injector will be created in "strict-di"

mode. The application will fail to invoke functions

which do not use explicit function annotation<ANY ng-app="angular.Module" [ng-strict-di="boolean"]>

... </ANY>

Useful for debugging info, will assist in tracking down the root of these bugs.

Error Messages (1/2)

Uncaught Error: [$injector:modulerr] Failed to instantiate module. This error occurs when a module fails to load

due to some exception.

<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

Error Messages (2/2)

Error: [$injector:unpr] Unknown provider. Error: [ng:areq] Argument 'MainCtrl' is not a

function, got undefined.

<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

Thankseyalvardi.wordpress.com

Eyal VardiSite: Angular.org.ilBlog: eyalvardi.wordpress.com

StartupHTML

Browser

StaticDOM

DynamicDOM

(View)

AngularJSDOM

Content Loaded Event

ng-app=“module”

$injector

$compile $rootScope

$compile (dom,

$rootScope)

Date post:	09-Jan-2017
Category:	Technology
Upload:	eyal-vardi
View:	6,941 times
Download:	0 times

Modules and injector

Technology