angularjs 手动启动

浏览数：40 / 时间：2015年06月09日

谷歌推的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>