8. // Create a module
var myModule = angular.module('myModule', [])
// Configure the injector
myModule.factory('serviceA', function () {
return {
// instead of {}, put your object creation here
};
});
// create an injector and configure it from 'myModule'
var $injector = angular.injector(['myModule']);
// retrieve an object from the injector by name
var serviceA = $injector.get('serviceA');
// always true because of instance cache
$injector.get('serviceA') === $injector.get('serviceA');
9. // inferred (only works if code not minified/obfuscated)
$injector.invoke(function (serviceA) { });
// annotated
function explicit(serviceA) { };
explicit.$inject = ['serviceA'];
$injector.invoke(explicit);
// inline
$injector.invoke(['serviceA', function (serviceA) { }]);
10. // You write functions such as this one.
function doSomething(serviceA, serviceB) {
// do something here.
}
// Angular provides the injector for your application
var $injector = ...;
///////////////////////////////////////////////
// the old-school way of getting dependencies.
var serviceA = $injector.get('serviceA');
var serviceB = $injector.get('serviceB');
// now call the function
doSomething(serviceA, serviceB);
///////////////////////////////////////////////
// the cool way of getting dependencies.
$injector.invoke(doSomething)
16. <div ng-controller="MyCtrl">
<ul>
<li ng-repeat="n in names">{{n}}</li>
</ul>
</div>
First the HTML is parsed into DOM
using the standard browser API.
Once all directives for a given
DOM element have been identified
they are sorted by priority and their
the directive compile() functions
are executed.
DOM + link($scope)
Live binding between the
scope and the DOM
Register any listeners on the
elements and set up any
watches with the scope.
var $compile = ...; // injected into your code
var scope = ...;
var html = '<div ng-bind="exp"></div>';
// Step 1: parse HTML into DOM element
var template = angular.element(html);
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the
scope.
linkFn(scope);
17. var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
template: '<div></div>', // or function
templateUrl:'directive.html',
replace: false,
transclude: false,
restrict: 'A',
scope: false,
require: '^?ngModel'
controller: function($scope, $element, $attrs, $transclude, Injectables) { ... },
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
},
link: function postLink(scope, iElement, iAttrs, controller) { ... }
};
return directiveDefinitionObject;
});
19. function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,
previousCompileContext) {
...
var compositeLinkFn =
compileNodes( compileNodes, transcludeFn, $compileNodes,
maxPriority, ignoreDirective, previousCompileContext);
...
return function publicLinkFn(scope, cloneConnectFn, transcludeControllers) {
...
};
}
Create all the DDO’s
Execute all DDO’s template property or function
Execute all DDO’s compile functions
Execute all DDO’s controllers
Execute all DDO’s preLink functions
Execute all DDO’s postLink functions
20. function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority,
ignoreDirective, previousCompileContext) {
...
for (var i = 0; i < nodeList.length; i++) {
attrs = new Attributes();
directives = collectDirectives(nodeList[i], [], attrs,
i === 0 ? maxPriority : undefined, ignoreDirective);
nodeLinkFn = (directives.length)
? applyDirectivesToNode(directives, nodeList[i], attrs, ...)
: null;
...
childLinkFn = (nodeLinkFn ...) ? null : compileNodes( childNodes , ...);
...
}
...
}
Scan the DOM (DFS) and find all directives
Sort the directive by priority
Execute the directive factory and store the DDO
Call to the DDO.template
Call to the DDO.compile
Execute the compileNodes on the child nodes of
nodeList[i]
24. var parseFn = $parse(' expression ');
var resultValue = parseFn($scope);
// Set value to expression
var setter = parseFn.assign;
setter(context,value);
Do in
compile
25. var temp = $interpolate( "{{a}}+{{b}}=<b>{{ result }}</b>" );
var result = temp( {a: '2', b: '3', result: '5'} );
Do in
compile $parse $parse $parse