RequireJS + AngularJS Seed 04 _RequireJS

最新推荐文章于 2024-08-28 16:14:15 发布

weixin_34383618

最新推荐文章于 2024-08-28 16:14:15 发布

阅读量70

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/ilivebox/blog/262753

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天继续拆。我想问，尼玛我以前碰到的队友难道都是前端转过来的？洋洋洒洒上万行堆一个文件里面不难受么。大致的目录结构像下面这样:

<!-- 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，不服咩

很好。看起来模块相互依赖关系是这样的。

启动 index.html，index中的 requirejs 开始工作，加载 bootstrap.js。然后 bootstrap 配置好各个库的路径。之后了使用 angular 载入 angular 的模块 x201 。相当于把 ng-app: x201 给弄进来了。

由于 x201 是应用的入口，那么它应该负责将应用需要使用的机能给加载进来。那么就由 x201 负责载入 user 模块。嗯，首先用 requirejs 加载 user.js 文件。然后用 angular 加载 user 模块。谁给我讲讲这 ng 的模块有什么用。

然后 user 作为 user 模块的入口，将 user 模块中的 login controller 添加到 x201 上。为什么我觉得 login controller的作用范围应该是在 user 模块，而不应该加到 app 上？谁给我讲讲。

然后来看看具体实现:

先是 index.html

<!-- 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.js

<!-- 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.js

<!-- 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.js

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

转载于:https://my.oschina.net/ilivebox/blog/262753