AngularJS入門教程之模塊化操作用法示例
本文實例講述了AngularJS模塊化操作用法。分享給大家供大家參考，具體如下：
在前面幾節(jié)教程中，代碼比較少，為了方便說明問題筆者將控制器代碼都寫在了HTML頁面中，實際上這并不是什么好的編程習慣，而且可維護性差。通常的做法都是將處理業(yè)務邏輯的代碼寫在一個單獨的JS文件中，然后在HTML頁面中引入該文件。
然而這樣會帶來新的問題，我們的控制器全都定義在全局的命名空間中，假設我們有一個公共的JS文件，在登錄頁面和密碼修改頁面都引入這個JS，A開發(fā)人員和B開發(fā)人員英雄所見略同，對控制器的命名都是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", []);
通過這行代碼定義模塊，第一個參數為模塊名。第二個參數是一個數組，為可選，如果指定該參數則創(chuàng)建一個新的模塊，不指定則從配置中檢索。
loginMod.controller("UserController",function($scope,$log)...
通過controller函數向模塊中添加一個控制器，第一個參數為控制器名稱，第二個參數為控制器實現(xiàn)部分。
然后在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"來指定頁面中的控制器屬于哪個模塊。
在瀏覽器中運行頁面可以看到，不同頁面調用不用模塊中的UserController控制器：
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
這篇文章主要介紹了Angular2 路由問題修復詳解的相關資料,并建了一個測試工程，把詳細的過程分享給大家，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了AngularJS中指令的四種基本形式,結合實例形式分析了AngularJS指令的定義、使用方法及相關注意事項,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)分頁顯示數據庫信息效果的相關資料，感興趣的小伙伴們可以參考一下2016-07-07
在AngularJs中我們會不可避免的使用第三方庫，這篇文章主要介紹了如何在AngularJs中調用第三方插件庫，有興趣的可以了解下2017-05-05
AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
今天小編就為大家分享一篇AngularJS與后端php的數據交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)猜大小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
AngularJS開發(fā)教程之控制器之間的通信方法分析
這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結合實例形式較為詳細的分析了AngularJS控制器之間通信的三種常用方式及相關使用技巧,需要的朋友可以參考下2016-12-12
詳解angularjs結合pagination插件實現(xiàn)分頁功能
本篇文章主要介紹了詳解angularjs結合pagination插件實現(xiàn)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
這篇文章主要給大家介紹了關于Angular4學習教程之HTML屬性綁定的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01