AngularJS入門教學之模組化操作用法範例
- 高洛峰原創
- 2016-12-08 11:08:401033瀏覽
本文實例講述了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>我們有登入頁tutorial04_1. html和修改密碼頁面tutorial04_2.html，控制器程式碼都寫在tutorial04.js中，在這兩個頁面中都定義了相同的控制器UserController。
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("修改密码");
}
}
);
透過這行程式碼定義模組，第一個參數為模組名。第二個參數是一個數組，為可選，如果指定該參數則建立新的模組，不指定則從配置中檢索。 var loginMod = angular.module("loginMod", []);
透過controller函數將一個控制器，第一個參數為控制器名稱，第二個參數為控制器實現部分。 然後在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"來指定頁面中的控制器屬於哪個模組。 在瀏覽器中運行頁面可以看到，不同頁面呼叫不用模組中的UserController控制器：
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn