本文執行個體講述了AngularJS模組化操作用法。分享給大家供大家參考，具體如下：
在前面幾節教程中，代碼比較少，為了方便說明問題筆者將控制器代碼都寫在了HTML頁面中，實際上這並不是什麼好的編程習慣，而且可維護性差。通常的做法都是將處理商務邏輯的代碼寫在一個單獨的JS檔案中，然後在HTML頁面中引入該檔案。
然而這樣會帶來新的問題，我們的控制器全都定義在全域的命名空間中，假設我們有一個公用的JS檔案，在登入頁面和密碼修改頁面都引入這個JS，A開發人員和B開發人員英雄所見略同，對控制器的命名都是UserController，這樣就會導致命名衝突。而且我們在新增一個控制器的時候總是要擔心是不是已經有了一個同名的控制器，代碼的擴充性是不是很差呢？
AngularJS中的模組能夠很好的解決這個問題，接下來我們看看AngularJs怎麼處理命名衝突問題。
代碼清單1. tutorial04_1.html
<!DOCTYPE html><html ng-app="loginMod"><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <title>tutorial04_1</title></head><body><div ng-controller="UserController"> 使用者名稱：<input type="text" ng-model="name" placeholder="使用者名稱"/> 密碼：<input type="password" ng-model="pword" placeholder="密碼"/> <button ng-click="login()">提交</button> <p>您輸入的使用者名稱：{{name}}</p> <p>您輸入的密碼：{{pword}}</p></div><script type="text/javascript" src="js/tutorial04.js"></script></body></html>
代碼清單2. tutorial04_2.html
<!DOCTYPE html><html ng-app="pwordMod"><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <title>tutorial04_2</title></head><body><div ng-controller="UserController"> 密碼：<input type="password" ng-model="pword" placeholder="密碼"/> <button ng-click="changePwrd()">提交</button> <p>您輸入的密碼：{{pword}}</p></div><script type="text/javascript" src="js/tutorial04.js"></script></body></html>
代碼清單3. tutorial04.js
var loginMod = angular.module("loginMod", []);loginMod.controller("UserController",function($scope,$log) { $scope.name="admin"; $scope.pword="123456"; $log.info( $scope.name); $log.info( $scope.pword); $scope.login = function() { alert("登入"); } });var pwordMod = angular.module("pwordMod", []);pwordMod.controller("UserController",function($scope,$log) { $scope.pword="123456"; $scope.changePwrd = function() { alert("修改密碼"); } });
我們有登入頁面tutorial04_1.html和修改密碼頁面tutorial04_2.html，控制器代碼都寫在tutorial04.js中，在這兩個頁面中都定義了相同的控制器UserController。
var loginMod = angular.module("loginMod", []);
通過這行代碼定義模組，第一個參數為模組名。第二個參數是一個數組，為可選，如果指定該參數則建立一個新的模組，不指定則從配置中檢索。
loginMod.controller("UserController",function($scope,$log)...
通過controller函數向模組中添加一個控制器，第一個參數為控制器名稱，第二個參數為控制器實現部分。
然後在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"來指定頁面中的控制器屬於哪個模組。
在瀏覽器中運行頁面可以看到，不同頁面調用不用模組中的UserController控制器：
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家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
