4.3 模块化最佳实践_AngularJS入门与进阶-QQ阅读男生轻小说网

书名：AngularJS入门与进阶
作者名：江荣波
本章字数：487字
更新时间：2020-11-28 23:44:32

4.3 模块化最佳实践

在实际项目中，随着项目的进展代码会越来越多，我们需要以一种更加合理的方式组织这些代码。假设我们的项目名称为app，下面有两个模块，分别为login和register，参考AngularJS官方的建议，可以按照如下目录结构组织项目，对4.2.2小节案例进行重构。

        app
        │  index.html  //程序入口
        │
        ├─css   //CSS样式
        ├─img   //图片资源
        ├─js
        │      common.js  //公共JS代码
        │
        └─modules
            ├─login    //登录模块
            │  │  loginModule.js    //登录模块定义
            │  │
            │  ├─css
            │  ├─js
            │  │      directives.js
            │  │      filters.js
            │  │      controllers.js  //控制器定义
            │  │
            │  └─views
            │          login.html
            │
            └─register  //注册模块
               │  registerModule.js //注册模块定义
               │
               ├─css
               ├─js
               │      directives.js
               │      filters.js
               │      controllers.js //控制器定义
               └─views
                      register.html

如上面的目录结构所示，我们可以在modules目录下为每个模块新建一个单独的目录，分别为login和register。以登录模块为例，loginModule.js中为模块的定义内容如下：

        var loginModule = angular.module（"loginModule", []）;

登录模块下所有控制器的定义放在login\js\controllers.js中，例如：

        loginModule.controller（"UserController", function（$scope, $log）{
            $scope.uname = "login";
            $scope.pword = "admin";
            $scope.submit = function() {
                alert（"登录模块：UserController"）;
            }
        }）;

相同目录下的directives.js和filters.js文件中为登录模块自定义的指令和过滤器（自定义指令和过滤器将会在后面的章节中接触到）。接着我们需要在login.html中引入这些文件：

        <script type="text/javascript" src="../loginModule.js"></script>
        <script type="text/javascript" src="../js/controllers.js"></script>
        <script type="text/javascript" src="../js/directives.js"></script>
        <script type="text/javascript" src="../js/filters.js"></script>

最后，读者可以在浏览器中预览login.html和register.html，和4.2.2小节中的效果完全相同，具体内容读者可参考下载资源中的ch04/app工程。