在前面几节教程中，代码比较少，为了方便说明问题笔者將控制器代码都写在了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>

代码清单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", []);

通过这行代码定义模块，第一个参数为模块名。第二个参数是一个数组，为可选，如果指定该参数则创建一个新的模块，不指定则从配置中检索。

loginMod.controller("UserController",function($scope,$log)...

通过controller函数向模块中添加一个控制器，第一个参数为控制器名称，第二个参数为控制器实现部分。

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

在浏览器中运行页面可以看到，不同页面调用不用模块中的UserController控制器：

AngularJs轻松入门（四）模块化的更多相关文章

  1. AngularJs轻松入门

    AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...

  2. AngularJs轻松入门（九）与服务器交互

    AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...

  3. AngularJs轻松入门（八）Cookies读写

    虽然使用JavaScript创建和获取Cookie很简单,AngularJs还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookie ...

  4. AngularJs轻松入门（七）多视图切换

    在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...

  5. AngularJs轻松入门（六）表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

  6. AngularJs轻松入门（五）过滤器

    在前面几节里我们已经接触过AngularJs的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下 ...

  7. AngularJs轻松入门（三）MVC架构

    MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...

  8. AngularJs轻松入门（二）数据绑定

    数据绑定是AngularJs中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en& ...

  9. AngularJs轻松入门（一）创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

随机推荐

  1. 相辅相成的求最单源短路径算法:（SPFA& dijkstra）

    引用一位老oier的话: 一道题如果边权没有负数,那么一定是在卡SPFA.这时候就用到了堆优化的Dijkstra; 写在前面: 多打代码! 最好都掌握,灵活变通 SPFA: 主要用于稀疏图和有负权边的 ...

  2. ios上有时候提交按钮点击两次才可以取消输入框软键盘

    ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...

  3. 乌班图 之 设置镜像服务器 、设置屏幕分辨率QAQ

    设置镜像服务器 Ubuntu 中的大部分软件安装都是用apt命令,从Ubuntu的服务器上直接安装的. 但是国外你懂的网速是硬伤,因此要搞个镜像服务器,内容当然都是一样的咯. 第一步:进入系统设置 第 ...

  4. JavaScript学习——使用JS完成省市二级联动

    1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...

  5. 【参考】IBM sun.io.MalformedInputException and text encoding conversions transforms numerals to their word equivalents - United States

    Problem(Abstract) When converting contents from a file or string using WebSphere Application Server, ...

  6. javascript满天小星星

  7. 模板层 Template

    每一个 Web 框架都需要一种很便利的方法用于动态生成 HTML 页面. 最常见的做法是使用模板. 模板包含所需 HTML 页面的静态部分,以及一些特殊的模版语法,用于将动态内容插入静态部分. 说白了 ...

  8. SpringMVC简单介绍

    1. 框架的作用  SpringMVC主要解决了控制器如何接收客户端的请求,并将处理结果响应给客户端的问题.  在传统的Java EE开发中,控制器是`Servlet`,主要存在的问题有: 1. 每个 ...

  9. js 监听ios手机键盘弹起和收起的事件

    document.body.addEventListener('focusin', () => { //软键盘弹起事件 console.log("键盘弹起") }) docu ...

  10. [洛谷P2183]巧克力

    题目大意:有n块巧克力,每块巧克力有一个大小.巧克力可以切成若干份.现在要你切成大小相等的m块,且尽可能大.求这个大小. 解题思路:我们二分巧克力切成的大小,然后计算能切成多少块,判断即可.由于最大的 ...