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 的核心流程。

angularjs 手动启动,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。