angularjs 手動啓動

時間 2019-11-11

原文原文鏈接

谷歌推的javascript框架angulajs至關火熱，因爲新項目的緣故，最近一直看angularjs。在看的時候，一直有個疑問，angularjs 核心依賴於DI(依賴注入)。經常使用的方法是在頁面的根節點加入一個ng-app或者ng-app='module',來進入的angulajs 的context(上下文),而後DI來注入，生成一個link函數，一個事件循環。可是啊，在作大項目的時候，每每不會在dom初始化的時候加入ng-app,由於這就約束了一個頁面只有一個module,有的時候咱們可能想跟靈活一些，怎麼作呢? javascript

官網有云：同過angualrjs 的bootstrap api 來引導程序入口。由於我也是新手，對angualjs 的整個流程也不能十分全面的把控，因此我就按照官網一步一步來。可是官網只有一段代碼 html

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

這就難爲壞了我了，我在項目裏想方設法的使用卻一直報錯，並且錯誤提示也是至關的槽糕。就開始google，可是一點收穫也沒有，個人代碼引用了官網的一個例子java

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

猜想，有待驗證bootstrap

目前認爲，這個手動引導的最大好處就是能夠定義多個module，在上面的文檔裏說過，angualr.module('myfirst',[]),其api中的module第二個參數是他的依賴module，因此你能夠定義多個module，好比你須要作ui,能夠寫一個ui，module，而後這個是能夠share的，當你在頁面加載的時候，只要把頁面要用的module ，傳到angular.bootstrap(document,['myfirst'])第二個參數，而後就能夠了。！api

續：官網有這麼一句話app

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

意思是說module 是配置的一個集合，是在anguar 引導（bootstrap）運行時的所依賴運行塊。這個足能夠驗證了個人猜測！dom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。