<html ng-app="myModule"> <body> <div> <div ng-controller="MyCtrl"> <span>{{Name}}</span> </div> </div> </body> </html>
js
var myModule = angular.module("myModule", []); myModule.controller('MyCtrl', ['$scope', function($scope) { $scope.Name = "Puppet"; } ]);
查看执行流程
步骤四
发布ng提供的API
in angular.js line 2162 : publishExternalAPI(angular);
//构建模块加载器 angularModule = setupModuleLoader(window); try { angularModule('ngLocale'); } catch (e) { angularModule('ngLocale', []).provider('$locale', $LocaleProvider); }
模块加载器的实现原理
in angular.js function setupModuleLoader(window)
function setupModuleLoader(window) { var $injectorMinErr = minErr('$injector'); var ngMinErr = minErr('ng'); function ensure(obj, name, factory){ return obj[name] || (obj[name] = factory()); } var angular = ensure(window, 'angular', Object); // We need to expose `angular.$$minErr` to modules such as `ngResource` that reference it during bootstrap angular.$$minErr= angular.$ $minErr || minErr; //把module方法放到angular的全局对象上，ensure就是一个属性拷贝的过程 return ensure(angular, 'module', function(){ //模块缓存 var modules = {}; }
把工具函数给载到模块里
return function module(name, requires, configFn) { ...... }
查看模块里所包含的内容
<!DOCTYPE html> <html ng-app="myModule"> </html>
JS
/** * 定义模块 */ var myModule = angular.module("myModule", []); /** * 从debug的过程可以看到，angular中的“模块”只是一个闭包空间（或者叫命名空间） * 所有模块都被注册在modules这个对象上 */ console.log(myModule);
查看控制台
构建内置模块ng
in angular.js line 2169 publishExternalAPI(angular)
angularModule('ng', ['ngLocale'], ['$provide', function ngModule($provide) { // $ $sanitizeUriProvider needs to be before $compileProvider as it is used by it. $provide.provider({ $ $sanitizeUri: $$SanitizeUriProvider }); $provide.provider('$compile', $CompileProvider). directive({ a: htmlAnchorDirective, input: inputDirective, ......
加载了所有内置的directive,provider.注册ng内核Provider：两个最重要的$parser 和 $rootScope
总结
工具函数拷贝到angular全局对象上；
调用setupModuleLoader方法创建模块定义和加载工具（挂在全局对象window.angular上）；
构建内置模块ng；
创建ng内置的directive和provider；
两个重要的provider：$parse 和 $rootScope；
步骤五
初始化Angular - 查找Ng-app
jqLite(document).ready(function() { angularInit(document, bootstrap); });
bootstrap
创建injector，拉起内核和启动模块，调用compile服务(一个ng-app只有一个injector)
in angular.js line 1415
function bootstrap(element, modules, config){ .... }