AngularJS Notes

scope

Good read: Understanding-Scopes

There are 4 types of scopes:

1. normal prototypal scope inheritance -- ng-include, ng-switch, ng-controller, directive with scope:true.
2. normal prototypal scope inheritance with a copy/assignment -- ng-repeat, Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.
3. isolate scope -- directive with scope:{...} This is not prototypal, but '=', '@', and '&' provide a mechanism to access parent scope properties, via attributes.
4. transcluded scope -- directive with transclude: true. This is also normal prototypal scope inheritance, but is is also a sibling of any isolate scope.

For all scopes (prototypal or not), Angular always tracks a parent-child relationship (i.e. a hierarchy), via properties $parent and $$childeHead and $$childTail.

Directive v.s isolated scope

• http://jsfiddle.net/anglee/Hu8Zk/ (non-isolated)
• http://jsfiddle.net/anglee/8EGYk/ (scope: true)
• http://jsfiddle.net/anglee/Bn8nq/ (scope: {})

Some tips (see doc for more details):

• use angular.element($0).scope() to get the scope
• use angular.element($0).isolateScope() to get the isolated scope.

conceptually think:

• '@' let you access the state of parent scope that evaluates to a string, http://jsfiddle.net/anglee/CSRb4/
• '&' let you to invoke the behavior of parent scope by causing some expression to run, http://jsfiddle.net/anglee/BUMD2/
• '=' let you for 2 way binding, http://jsfiddle.net/anglee/URAXk/
• 'transclusion' is like digging a hole in the child and say inside this hole, use the parent scope.

DI, $provide

Good read: Understanding-Dependency-Injection

value, service, factory, provider are all equivalent, just shorthands in different levels. And they are all singletons. http://jsfiddle.net/anglee/Ct2WJ/

Order of compile, pre-link, post-link, controller,

Basically:

• parent compile
• child compile
• parent controller
• parent pre-link
• child controller
• child pre-link
• child post-link
• parent post-link

the default link function is 'post' link.

http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview

http://jsfiddle.net/mrajcok/xfh3F/

$injector

To get 'the' injector, i.e. $injector:

var $injector = angular.element('html').injector();

'html' is just an example, it can be any element inside of your ng-app as there is only one injector. Note if not using jQuery, you will need to use the DOM element instead:

var elem = document.getElementsByTagName('html')
var $injector = angular.element(elem).injector();

Or if you are using Chrome, $0 is the element you selected interactively:

var $injector = angular.element($0).injector();

Through $injector, one can get any services (built-in or not):

var $rootScope = $injector.get('$rootScope');
var myService = $injector.get('myService');

and invoke things like:

$injector.invoke(function ($rootScope) { console.log($rootScope.foo); });
$injector.invoke(["$rootScope", function ($rootScope) { console.log($rootScope.foo); }]);

$templateCache is just a special cache, one can use $cacheFactor for one's own caching purposes.

$injector.get("$cacheFactor").get("templates") === $injector.get("$templateCache")

angular.bootstrap example

https://gist.github.com/anglee/8650781

misc

templateUrl can be a function https://docs.angularjs.org/guide/directive