AngularJS入門教程之模塊化操作用法示例
本文實例講述了AngularJS模塊化操作用法。分享給大家供大家參考，具體如下：
在前面幾節(jié)教程中，代碼比較少，為了方便說明問題筆者將控制器代碼都寫在了HTML頁面中，實際上這并不是什么好的編程習(xí)慣，而且可維護性差。通常的做法都是將處理業(yè)務(wù)邏輯的代碼寫在一個單獨的JS文件中，然后在HTML頁面中引入該文件。
然而這樣會帶來新的問題，我們的控制器全都定義在全局的命名空間中，假設(shè)我們有一個公共的JS文件，在登錄頁面和密碼修改頁面都引入這個JS，A開發(fā)人員和B開發(fā)人員英雄所見略同，對控制器的命名都是UserController，這樣就會導(dǎo)致命名沖突。而且我們在新增一個控制器的時候總是要擔(dān)心是不是已經(jīng)有了一個同名的控制器，代碼的擴展性是不是很差呢？
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", []);
通過這行代碼定義模塊，第一個參數(shù)為模塊名。第二個參數(shù)是一個數(shù)組，為可選，如果指定該參數(shù)則創(chuàng)建一個新的模塊，不指定則從配置中檢索。
loginMod.controller("UserController",function($scope,$log)...
通過controller函數(shù)向模塊中添加一個控制器，第一個參數(shù)為控制器名稱，第二個參數(shù)為控制器實現(xiàn)部分。
然后在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"來指定頁面中的控制器屬于哪個模塊。
在瀏覽器中運行頁面可以看到，不同頁面調(diào)用不用模塊中的UserController控制器：
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
Angular項目里ngsw-config.json文件作用詳解
這篇文章主要為大家介紹了Angular項目里ngsw-config.json文件作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了AngularJS初始化過程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過程,以及需要的時候你該如何修改AngularJS的初始化,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄獪\談angularjs module返回對象的坑(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Angularjs自定義指令實現(xiàn)分頁插件(DEMO)
由于最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數(shù)據(jù)的功能，后來自己就用自定義指令實現(xiàn)了該功能，下面小編把實例demo分享到腳本之家平臺，需要的朋友參考下2017-09-09
這篇文章主要介紹了AngularJS實現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了在Angular中利用trackBy來提升性能的實現(xiàn)方法,需要的朋友可以參考下2018-01-01
AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
不知道大家是否遇到過這個問題，在當(dāng)Angular.JS ng-repeat數(shù)組中有重復(fù)項時，系統(tǒng)就會拋出異常，這是該怎么做？本文通過示例代碼介紹了詳細的解決方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
每個Angular版本在其生命周期中都經(jīng)歷了各個階段。組件在Angular中起著關(guān)鍵作用; 在這里，本文將討論Angular中的組件生命周期以及它們?nèi)绾斡绊懣蚣芩邪姹镜纳芷凇?/div> 2021-05-05
不能不知道的10個angularjs英文學(xué)習(xí)網(wǎng)站
這篇文章主要為大家分享了10個大家不能不知道的angularjs英文網(wǎng)站，供大家學(xué)習(xí)，感興趣的小伙伴們可以參考一下2016-03-03最新評論