果牛是啥意思

書名： 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工程。

官术网_书友最值得收藏!

AngularJS入門與進階

4.3 模塊化最佳實踐