AngularJS入門教程之模塊化操作用法示例

來源：九壹網(wǎng)

本文實例講述了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控制器：

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

AngularJS入門教程之模塊化操作用法示例