AngularJS有幾大特性,例如:
1 MVC
2 模組化
3 指令系統
3篇綁定〜〜4 對資料來
首先先說一下為什麼要實現模組化:
1 增加了模組的可重用性
2 透過定義模組,實現載入順序的自訂
〜3 在單元中的內容中之前做的幾個例子,控制器的程式碼直接寫在script標籤裡面,這樣宣告的函數都是全域的,顯然不是最好的選擇。
下面看看如何進行模組化:
<script type="text/javascript"> var myAppModule = angular.module('myApp',[]); myAppModule.filter('test',function(){ return function(name){ return 'hello, '+name+'!'; }; }); myAppModule.controller('myAppCtrl',['$scope',function($scope){ $scope.name='xingoo'; }]); </script>
首先,透過全域變數angular建立模組myAppModule
angular.module('myApp',[創建模組myAppModule
angular.module('myApp',[創建模組); ,這個app標識了頁面中angular的入口點,類似main函數的作用。
第二個參數[]裡面標示了依賴的模組。
<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <div ng-controller="myAppCtrl"> {{name | test }} </div> <script type="text/javascript"> var myAppModule = angular.module('myApp',[]); myAppModule.filter('test',function(){ return function(name){ return 'hello, '+name+'!'; }; }); myAppModule.controller('myAppCtrl',['$scope',function($scope){ $scope.name='xingoo'; }]); </script> </body> </html>
以上就是對AngularJS 模組化 的資料整理,後續繼續補充相關資料,謝謝大家對本站的支持!
更多AngularJS 模組化詳解及實例代碼相關文章請關注PHP中文網!