RequireJS + AngularJS Seed 04 _RequireJS

時間 2019-11-11

標籤 requirejs angularjs seed 欄目 JavaScript 简体版

原文原文鏈接

今天繼續拆。我想問，尼瑪我之前碰到的隊友難道都是前端轉過來的？洋洋灑灑上萬行堆一個文件裏面不難受麼。大體的目錄結構像下面這樣:javascript

<!-- lang: js -->
X201 // 隨手起的名
    scripts // 全部的js文件
        bower_components // 第三方庫
            angular
            jquery
            require
        common // 也許有用的通用方法
            xRouter.js // 嗯，這是個看起來很噁心的輔助類，應該有好辦法去掉。
        modules // 爲了公平，一刀劈死一個程序員，而後把剩下的工程按人頭分
            user
                controllers
                    login.js // login的控制器
                views
                    login.html // login的視圖
            user.js // user模塊給 requirejs 用的配置
        bootstrap.js // 應用給 requirejs 用的入口點
        x201.js // 工程給 requirejs 用的配置
    
    index.html // 你猜
    Web.config // 我用VS2013，不服咩

很好。看起來模塊相互依賴關係是這樣的。html

啓動 index.html，index中的 requirejs 開始工做，加載 bootstrap.js。而後 bootstrap 配置好各個庫的路徑。以後了使用 angular 載入 angular 的模塊 x201 。至關於把 ng-app: x201 給弄進來了。前端

因爲 x201 是應用的入口，那麼它應該負責將應用須要使用的機能給加載進來。那麼就由 x201 負責載入 user 模塊。嗯，首先用 requirejs 加載 user.js 文件。而後用 angular 加載 user 模塊。誰給我講講這 ng 的模塊有什麼用。java

而後 user 做爲 user 模塊的入口，將 user 模塊中的 login controller 添加到 x201 上。爲何我以爲 login controller的做用範圍應該是在 user 模塊，而不該該加到 app 上？誰給我講講。jquery

而後來看看具體實現:程序員

先是 index.htmlangularjs

<!-- lang: html -->
<body>
    <div ng-view></div>
    <script type="text/javascript" 
                src="scripts/bower_components/require/require.js" 
                data-main="scripts/bootstrap">
    </script>
</body>

而後配置文件 bootstrap.jsbootstrap

<!-- lang: js -->
require.config({
    baseUrl: 'scripts',
    paths: {
        'angular': './bower_components/angular/angular',
        // 這個爲毛要單獨加載？不加載不給用ngRouter
        'angularRoute': './bower_components/angular/angular-route', 
        'jquery': './bower_components/jquery/2.1.0/jquery-2.1.0',
        // common中的通用方法
        'xRouter': './common/xRouter' 
    },
    shim: {
        'angular': { exports: 'angular' },
        'angularRoute': {
            deps: ['angular'],
            exports: 'angularRoute'
        }
    }
});

require(
    [
        'angular',
        'jquery',
        'x201' // 讀入js文件。requirejs的模塊。仍是沒看怎麼自定義模塊名。誰給我個連接。
    ],
    function(angular, $) {
        $(document).ready(function() {
            angular.bootstrap(document, ['x201']); // 加載 angularjs 的模塊
            $('html').addClass('ng-app: x201');
        });
    }
);

而後是 app 配置文件 x201.jsapp

<!-- lang: js -->
define(
[
    'angular',
    'angularRoute',// 由於要用路由， 無可奈何加載這個模塊文件。爲何我一直以爲angular裏面就有，不用單獨加載。
    'modules/user/user'// 被分離出去的 user 模塊文件
],
function(angular, angularroute, user) {
        var x201 = angular.module('x201', ['ngRoute']); // 定義一個 angularjs 的 x201 模塊。

        user.linkTo(x201); // 而後把 加載進來的 user 模塊連接到 x201 上去。如今只有配置 route 。

        return x201;
    }
)

而後是 user 模塊配置文件 user.jside

<!-- lang: js -->
define(
[
    'angular',
    'xRouter',
    // 把 user 模塊中的 controller 給加載進來。尼瑪沒有加載根目錄麼。多幾個怎麼辦。
    'modules/user/controllers/Login' 
],
function(angular, router, login) {
        'use strict';

        // 剛纔很醜的 link 方法。這裏只有配置路由一個功能。
        // 把login controller裏面的 路由path， 模板path， 模板controller 給用到 $routeProvider 裏面去。
        var linkTo = function(app) {
            router.setRoute(app, login.path, login.templateUrl, login.controller);
        };

        return {
            module: angular.module('user', []), // requirejs 的模塊暴露。
            linkTo: linkTo // 方法暴露
        };
    }
);

而後是controller login.js

<!-- lang: js -->
define(function() {
    'use strict';

    var login = function($scope) {
        $scope.name = 'Kitty....';
    };

    return {
            path: '/', // 訪問 / 的時候
            // 渲染 ng-view爲 login.html。請問怎麼用部分視圖？不會只能寫擴展吧，仍是有ng-include?
            templateUrl: 'scripts/modules/user/views/login.html', 
            controller: login // 名字很差，沒有顯示出它是 controller。
        };
    }
);

而後是login.html，這個部分視圖是沒有 html 這類 html tag 的。

<!-- lang: html -->
<div>
    <span ng-bind="name"></span>
</div>

最後是那個輔助類。xRouter.js。至於正確性，先無視吧。或者誰有直接現成的給我一個。

<!-- lang: js -->
define(
[],
function() {
    'use strict';

    var setRoute = function(app, path, templateUrl, controller) {
        app.config(
        [
            '$routeProvider',
            function($routeProvider) {
                $routeProvider.when(path, {
                        templateUrl: templateUrl,
                        controller: controller
                    }
                );
            }
        ]);
    };

    return { setRoute: setRoute };
}

);

因而運行起來以後，就是在街面上顯示一個 Kitty... 。貌似，已經算分離了。須要加模塊的時候，只要在 x201 的定義裏面加上 requirejs 的引用，以及模塊插入 x201 的處理。

RequireJS 的 [] 有點至關於 csharp 的 using 或者 java 的 import。 AngularJS 的模塊呢？徹底不明白啊。好蛋疼啊。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。