本文實例講述了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", []);
