angularJS

//注册服务
var myModule = angular.module('myModule', [ ]);
myModule.service('serviceId', function( ){ });//以service方法注册服务到module，可以给service方法注入依赖

var myModule = angular.module('myModule', [ ]);
myModule.factory('serviceId', function( ) {//以factory方式注册服务到module，factory是一个工厂方法，方法里面返回一个对象。可以给工厂方法注入依赖
var serviceInstance = function(){ };
return serviceInstance;
});

var myModule = angular.module('myModule', [ ]);

myModule.config(['$provide',function($provide) {
$provide.factory('serviceId', function() {//以$provide.factory方式注册服务到module，factory是一个工厂方法，方法里面返回一个对象。可以给工厂方法注入依赖
var serviceInstance = function(){ }
return serviceInstance;
});

]);


//指定要注入的依赖
module.controller('myController',['$scope',myController]);//以数组方式注册controller，指定依赖

myController.$inject = ['$scope'];//以属性方式指定依赖


//注入器
var injector = angular.injector(['myModule', 'ng']);//显式创建注入器(bootstrap时会自动创建)

var injector = $("html").injector();//获取注入器
var serviceInstance = injector.get('serviceId');//显示获取依赖(包括服务，$state,$controller等)

$injector.invoke( [ 'service', function(service) {//显示注入并执行function

}]);


//value
var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');//一个值
myModule.controller('myController',['clientId',myController]);//可注入

 

//constant
myApp.constant('planetName', 'Greasy Giant');//一个常量
myApp.config(['myProvider', 'planetName', function(myProvider, planetName) {//可以注入到config中，config过程中，value，service都没有生成，不能注入到config中
myProvider.setName(planetName);
}]);


//module、config与provider
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
service('a', function() {}).
directive('directiveName', ...).
filter('filterName', ...).
controller('controllerName',...);
相当于
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$provide.service('a', function() {});
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
$controllerProvider.register('controllerName',...);
});//在module上注册的服务，实际上是在provider上注册的
相当于
angular.module('myModule', [], function($provide, $compileProvider,$filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$provide.service('a', function() {});
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
$controllerProvider.register('controllerName',...);
});

//$scope

$scope的成员：$watch("监视对象",回调函数)监视变化,$apply(引起$scope成员发生变化的函数)扩散变化
$apply里的函数执行后，$apply会调用$digest(),$digest()会调用涉及的$watch,当$watch改变了$scope,会再次调用$digest(),以此循环
对$scope的同步操作和使用angular提供的服务对$scope的异步操作，无需显式使用$apply

$("html").scope()//获取scope

//编译链接过程
1、angular创建$injector
2、$injector创建$compile和$rootScope
3、
var linkFn = $compile(template);//将angular标签编译成HTML标签
var element = linkFn(scope);//链接scope


//插入HTML文件的方法,在该HTML文件中执行
var dep = ['ng', 'wcc', myApp.name];
dep.unshift(["$provide", function ($provide) {//在数组的头部插入元素
$provide.value("$rootElement", dom);
}]);//一个config，$rootElement是一个value,编译时要用到
var $injector = angular.injector(dep);
$injector.invoke(function ($compile, $rootScope) {//invoke调用
$compile(dom)($rootScope);
$rootScope.$digest();
});
});

angular-ui-router.js是angularJS的插件，$state,$stateProvider，ui-view,ui-sref是它的内容。

动态注册controller：参考http://ify.io/lazy-loading-in-angularjs/
思路:module.config(function($controllerProvider)
{
module.controllerProvider = $controllerProvider;
});//让provider可见
angular.module('module').controllerProvider.register('ctrl',ctrl);
//随时注册controller

依赖注入的实现原理，通过 Function.toString() 来获取需要注入的服务，服务被用到时才创建一个单例

双向绑定、脏检查原理：
写下表达式如{{ aModel }}，AngularJS会在scope上设置一个watcher

$scope.$watch(function(scope) { return scope.aModel; //监控函数，返回监控的数据},
function(newValue, oldValue) { //监控处理函数，用于更新视图 }); 
等同于
$scope.$watch('aModel', function(newValue, oldValue) { //更新视图 }); 

angularjs上下文中的function执行后，会自动调用$scope.$apply()，$applay调用$rootScope.$digest，$digest触发scope的每一个watcher，
判断被watch的数据是否发生变化，是则调用watcher的回调函数。watcher回调函数可能改变scope，因此再次$digest直到数据没有变化，或者连续$digest 10次。

不在angularjs上下文中发生scope数据变化，则需手动调用$scope.$apply(); $apply() 可以传入一个要执行的function

ng-model 的视图到模型数据绑定：变化事件 -> $scope.apply() -> $rootScope.$digest() 
-> 各watcher，其中ng-model的watcher的监控函数里会把数据同步到模型，其他watcher处理对视图其他地方的影响

双向绑定、脏检查原理：
写下表达式如{{ aModel }}，AngularJS会在scope上设置一个watcher

$scope.$watch(function(scope) { return scope.aModel; //监控函数，返回监控的数据},
function(newValue, oldValue) { //监控处理函数，用于更新视图 }); 
等同于
$scope.$watch('aModel', function(newValue, oldValue) { //更新视图 }); 

angularjs上下文中的function执行后，会自动调用$scope.$apply()，$applay调用$rootScope.$digest，$digest触发scope的每一个watcher，
判断被watch的数据是否发生变化，是则调用watcher的回调函数。watcher回调函数可能改变scope，因此再次$digest直到数据没有变化，或者连续$digest 10次。

不在angularjs上下文中发生scope数据变化，则需手动调用$scope.$apply(); $apply() 可以传入一个要执行的function

ng-model 的视图到模型数据绑定：变化事件 -> $scope.apply() -> $rootScope.$digest() 
-> 各watcher，其中ng-model的watcher的监控函数里会把数据同步到模型，其他watcher处理对视图其他地方的影响

 

资源：http://ngmodules.org/