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