本文说明了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 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/Script title教程04 _ 1/title/head dydivng-controller=' user controller '用户名：输入类型=' text' ng-model=' name '占位符=' user name'/Password:输入类型=' Password ' ng-model=' pw '

！DOCTYPE html html ng-app=' pwordMod ' head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/Script title教程04 _ 2/title/head dydivng-controller=' user controller '密码：输入类型=' password' ng-model=' pword '占位符=' password '/Button ng-click=' changePwrd()' submit/Button p

var login mod=angular . module(' login mod '，[])；loginmod . controller(' user controller '，函数($scope，$ log){ $ scope . name=' admin '；$ scope.pword=' 123456$ log . info($ scope . name)；$ log . info($ scope . pword)；$ scope . log in=function(){ alert(' log in ')；} });var pwordMod=angular . module(' pwordMod '，[])；pwordmod . controller(' user controller '，函数($scope，$ log){ $ scope . pword=' 123456 '；$ scope。changepwrd=function () {alert('更改密码')；} });我们有一个登录页面tutorial04_1.html和一个密码修改页面tutorial04 _ 1.html。控制器代码是用tutorial04.js编写的，并且在两个页面中定义了相同的控制器UserController。

var login mod=angular . module(' login mod '，[])；模块由这一行代码定义，第一个参数是模块名。第二个参数是一个数组，它是可选的。如果指定，将创建一个新模块，如果未指定，将从配置中检索该模块。

Loginmod。控制器('用户控制器'，函数($ scope，$ log).通过控制器功能向模块添加控制器。第一个参数是控制器名称，第二个参数是控制器实现部分。

那么在tutorial04_1.html和tutorial04_2.html中就可以使用ng-app='loginMod '和ng-app='pwordMod '来指定页面中的控制器属于哪个模块。

在浏览器中运行页面显示不同的页面在不同的模块中调用用户控制器：

AngularJS源代码可以在这里下载。

希望本文对AngularJS编程有所帮助。