angularjs 手动启动

谷歌推的javascript框架angulajs相当火热，由于新项目的缘故，最近一直看angularjs。在看的时候，一直有个疑问，angularjs 核心依赖于DI(依赖注入)。常用的方法是在页面的根节点加入一个ng-app或者ng-app='module',来进入的angulajs 的context(上下文),然后DI来注入，生成一个link函数，一个事件循环。但是啊，在做大项目的时候，往往不会在dom初始化的时候加入ng-app,因为这就约束了一个页面只有一个module,有的时候我们可能想跟灵活一些，怎么做呢?

官网有云：同过angualrjs 的bootstrap api 来引导程序入口。因为我也是新手，对angualjs 的整个流程也不能十分全面的把控，所以我就按照官网一步一步来。但是官网只有一段代码

angualr.element(document).ready(function(){angular.module('mymodule',[]);angular.bootstrap(document,['mymodule']);}

这就难为坏了我了，我在项目里千方百计的使用却一直报错，而且错误提示也是相当的槽糕。就开始google，但是一点收获也没有，我的代码引用了官网的一个例子

 1 <!DOCTYPE html>
 2 <html ng-app id='ng-app' lan='en'>
 3 <header>
 4  <!--[if lte IE 7]>
 5     <script src="js/json3.js"></script>
 6     <![endif]-->
 7     <!--[if lte IE 8]>
 8     <script>
 9         document.createElement('ng-include');
10         document.createElement('ng-pluralize');
11         document.createElement('ng-view');
12 
13         // Optionally these for CSS
14         document.createElement('ng:include');
15         document.createElement('ng:pluralize');
16         document.createElement('ng:view');
17     </script>
18     <![endif]-->
19 <script type="text/javasctipt" src='angular.min.js' />
20 <script >
21      angular.element(document).ready(function(){
22  angular.module('docsTimeDirective', [])
23                     .controller('Ctrl2',['$scope',function($scope) {
24                         $scope.format = 'M/d/yy h:mm:ss a';
25                     }])
26                     .directive('myCurrentTime',function($interval,dateFilter){
27                         function link(scope, element, attrs) {
28                             var format,
29                                     timeoutId;
30 
31                             function updateTime() {
32                                 element.text(dateFilter(new Date(), format));
33                             }
34 
35                             scope.$watch(attrs.myCurrentTime, function(value) {
36                                 format = value;
37                                 updateTime();
38                             });
39 
40                             element.on('$destroy', function() {
41                                 $interval.cancel(timeoutId);
42                             });
43 
44                             // start the UI update process; save the timeoutId for canceling
45                             timeoutId = $interval(function() {
46                                 updateTime(); // update DOM
47                             }, 1000);
48                         }
49 
50                         return {
51                             link: link
52                         };
53                     });
54             angular.bootstrap(document,['docsTimeDirective']);
55 
56 })
57 </script>
58 </header>
59 <body>
60   <div ng-controller="Ctrl2">
61             Date format: <input ng-model="format"> <hr/>
62             Current time is: <span my-current-time="format"></span>
63         </div>
64 </body>
65 
66 </html>

乍一看，一直没有发现错误。后来在不断的捣鼓angularjs 的核心的流程，我终于明白了错误在哪里了。应该去掉doem 里的ng-app,因为手动引导就是通过bootstrap 来配置$injector。在弄个ng-app,两个入口，造成了anguar 的异常。

　　虽然过程很坎坷，但结局很美好，还深刻的理解了angularjs 的核心流程。

猜测，有待验证

目前认为，这个手动引导的最大好处就是可以定义多个module，在上面的文档里说过，angualr.module('myfirst',[]),其api中的module第二个参数是他的依赖module，所以你可以定义多个module，比如你需要做ui,可以写一个ui，module，然后这个是可以share的，当你在页面加载的时候，只要把页面要用的module ，传到angular.bootstrap(document,['myfirst'])第二个参数，然后就可以了。！

续：官网有这么一句话

A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process.

意思是说module 是配置的一个集合，是在anguar 引导（bootstrap）运行时的所依赖运行块。这个足可以验证了我的猜想！