angular

模块

angular.module('muduleName', [dependenceList]);

作用域
生命周期：
创建
链接
更新
销毁
控制器
设置作用域的初始状态，添加自定义行为
DI(Dependency Injection)
Dependency Annotation:
Inline Array Annotation(Prefered)

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

$inject Property Annotation

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

Implicit Annotation

someModule.controller('MyController', function($scope, greeter) {
  // ...
});

use strict:
ng-strict-di, 设置了该属性以后，在使用“Implicit Annotation”的方式来DI的话会抛出一条error。

<!doctype html>
<html ng-app="myApp" ng-strict-di>
<body>
  I can add: {{ 1 + 2 }}.
  <script src="angular.js"></script>
</body>
</html>

指令
作用域

- Event

Different service types in Angular

provider

- parent of almost all the other services (all but constant)

factory

- In fact, internally a factory is a provider with only the $get function.

value

- store a simple value/object without injections

service

- simlar with [factory], The difference is simple: The factory receives a function that gets called when we create it and the service receives a constructor function where we do a new on it (actually internally is uses Object.create instead of new).

constant

- similar with [value]
-  A constant can be injected everywhere and that includes provider constructor and config functions. That is why we use constant services to create default configuration for directives, because we can modify those configuration on our config functions.

angular.module("testModule", [])
.factory("testgreeting", function() {

})
.service("testgreeting", function() {

})
.provider("testgreeting", function() {

})
.value("testgreeting", function() {

})
.constant("testgreeting", function() {

})

Scope $watch Performance
有3种方式：

reference

scope.$watch (watchExpression, listener)
性能最好

collection contents
- scope.$watchCollection (watchExpression, listener)
value
- scope.$watch (watchExpression, listener, true)
- 性能最差

TODO:
scope.$apply(customFn)

Here is the explanation of how the Hello world example achieves the data-binding effect when the user enters text into the text field.

During the compilation phase:
the ng-model and input directive set up a keydown listener on the control.
the interpolation sets up a $watch to be notified of name changes.
During the runtime phase:
Pressing an 'X' key causes the browser to emit a keydown event on the input control.
The input directive captures the change to the input's value and calls $apply("name = 'X';") to update the application model inside the Angular execution context.
Angular applies the name = 'X'; to the model.
The $digest loop begins
The $watch list detects a change on the name property and notifies the interpolation, which in turn updates the DOM.
Angular exits the execution context, which in turn exits the keydown event and with it the JavaScript execution context.
The browser re-renders the view with the updated text.

tips & tricks

inspect element by right click on web page
select (high lighted) element
view this element in console via:

//with jQuery included
var ele = $($0);

//OR
//without jQuery included
var ele = angular.element($0);


ele.scope();
ele.scope().$parent;
ele.scope().$parent.$parent;
ele.scope().$root;

ele.isolateScope();

ele..attr('ng-controller');
ele.closest('[ng-controller]').attr('ng-controller');

ele.scope().$digest();

//use $digest method to trigger changes
ele.scope().isFoo = true;
ele.scope().$digest();

I strongly recommend learning the different types of angular services. They are a significant source of confusion when trying to wrap your head around an AngularJS code base.

refer links:
http://angular-tips.com/blog/2013/08/understanding-service-types/
http://eng.localytics.com/tips-and-tricks-for-debugging-unfamiliar-angularjs-code/

JohnnyMa/angular_tips.md

JohnnyMa commented Jul 8, 2016