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 的模块呢？彻底不明白啊。好蛋疼啊。