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