1 MVC
2 模組化
3 指令系統
4 雙向資料繫結
那麼本篇就來看看AngularJS的模組化。
首先先說一下為什麼要實現模組化：
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',[]);
第一個參數是綁定的應用app名稱，這個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>
直接綁定myApp到ng-app上，就可以了。
在script中，我們通過模組建立了一個filter和一個控制器。
filter的作用是 添加字串修飾。
控制器的作用則是初始設定變數。
程式的運行結果如下：
以上就是對AngularJS 模組化 的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
