RequireJS + AngularJS Seed 12_requirejs-ng-loader

原文链接:Loading angular components with requirejs

Git链接:

• Loader
• Example

点进Loader的git，你可以看到有七个plugin在src文件夹里面。

• module
• template
• controller
• service
• directive
• config
• filter
  一看就知道是对应 ng 的各种模块的。
  目标是:
• 模块化应用，不单纯指 ng 的模块，而是给 controllers， directives， filters， templates 之类的添加命名空间。
• 降低代码对工程结构的和文件名的依赖。

Module

定义 ngModule 的文件:

<!-- lang: js -->
define(function(require){
    var ng = requrie('angular');    
    return ng.module('foo', []);   
})

Template

上面那7个插件依赖 requirejs 的 text 插件，用来加载模板。Controller / Service / Directive / Filter / Config 都一样的目标，加载组件。

你可以看看那个 Example 是怎么完成的。
例子的结构是:
(是不是很叼，赏心悦目，分的清清楚楚。
不过作者的例子貌似改成了一个foo，一个bar，和一个application。总之是那样的意思就对了。)

<!-- lang: js -->
app
   |-modules
   |       |-menu
   |       |    |-controller
   |       |    |           |-menu-controller.js
   |       |    |-menu.js    
   |       |-user
   |             |-controllers
   |             |           |-profile.js
   |             |-resources
   |             |          |-templates
   |             |          |       |-user-profile.html
   |             |          |-directives
   |             |                   |-user-menu 
   |             |                              |-user-menu.js
   |             |                              |-user-menu.html
   |             |-src
   |             |      |-providers
   |             |      |          |-profile-information.js 
   |             |      |-factory
   |             |              |-guest.js
   |             |-user.js
   |-application.js
   |-boot.js

想加载 menu 这个 ng 模块的时候，位于文件(/app/modules/menu/menu)。

• /app/application.js - require('module!user')
• /app/modules/user.js - require('module!user')
• /app/modules/menu/menu-controller.js - require('module!@'). @ - 意思是说，可以从当前文件的路径下找到该模块。

(但是貌似没看到例子里面有引用的，而且，作者确定没写错吗？为什么加载 menu 写的是 user。回头看看)。
想加载 user-controller(/app/modules/user/controllers/user-controller)

• /app/application.js - require('controller!user:profile'). “:“ 前- 模块名称, 后 - controller 名称。
• /app/modules/user.js - require('controller!user:profile')
• /app/modules/user/user.js - require('controller!profile'). 所以，如果想加载当前模块下的 controller (当前模块的意思是说在同一目录下的模块) - 可知只写 controller 名。模块会从当前目录去查找。

至于 directives, services, templates, filters, configs 都是一样的。

Configuration

上述这些插件都可以在 requirejs.config({…}) 的 structure 节点下配置占位符。

<!-- lang: js -->
requirejs.config({
  baseUrl: '/application',

下面的 Paths 导入 Loader 插件，使用 requirejs 的 text 插件。

  paths: {
    'text': '../bower_components/requirejs-text/text',
    'base': 'plugins/base',
    'template': 'plugins/template',
    'controller': 'plugins/controller',
    'service': 'plugins/service',
    'module': 'plugins/module',
    'config': 'plugins/config',
    'directive': 'plugins/directive',
    'filter': 'plugins/filter'
  },

在 structure 节点下面配置路径，
格式是 baseUrl + prefix + 模块
比如说 module:
因为

• baseUrl = /application
• prefix = /modules/{module}
• module : path = /{module}

于是结果就是 application/modules/{module}

  structure: {
    /**
     * @description
     * requirejs.config.baseUrl + structure.prefix
     *
     * requirejs.config.baseUrl = '/application'
     * structure.prefix = modules/{module}
     * {module} - module name
     *
     * result:
     *
     * application/modules/{module}
     */
    prefix: 'modules/{module}',

    module: {
      path: '/{module}'
    },

模板的配置，用法是:

• require('template!{module}:{template-name}');

下面两种情况都表示，在当前目录下找模板。

• require('template!{template-name}')
• require('template!@{template-name}')

比如说有模块 foo， 在路径 /application/modules/foo/foo-include.js 下，有个 bar 的模板。那么下面的请求都是一样的:

• require('template!bar')
• require('template!@bar ')
• require('template!foo:bar')

那么假设我们要取 /application/modules/foo/resource/views/bar.html 这样一个模板，

因为 requirejs.config.baseUrl + module + template path

• baseUrl: /application
• 模块目录: /modules
• 模块: /foo
• 模板路径: /resource/views/bar.html

又因为模板路径的格式是 /resource/views/{template}.{extension}**，那么配置就像下面表示的那样

    /**
     * @description
     *
     * syntax:
     *  require('template!{module}:{template-name}');
     *
     *  require('template!{template-name}') - in this case - will be used current module
     *    (which contains the current file)
     *
     *  require('template!@{template-name}') - same as above
     *
     *
     * if current module - foo (file where you use require is located under foo's module directory
     *  Example: /application/modules/foo/foo-include.js)
     *  next paths are same:
     *
     * require('template!bar')
     * require('template!@bar')
     * require('template!foo:bar')
     *
     * We will get:
     *
     *  /resource/views/{template}.{extension}
     *    -> /resource/views/bar.html
     *   then: requirejs.config.baseUrl + module + template path
     *   -> /application/modules/foo/resource/views/bar.html
     *
     *    baseUrl: /application
     *    modules dir: /modules
     *    module name: /foo
     *    template path: /resource/views/bar.html
     */
    template: {
      path: '/resources/views/{template}.{extension}',
      extension: 'html'
    },

其他的controller，service之类都一样的配置了。

    /**
     * @description
     *
     * Same for controller
     */
    controller: {
      path: '/controllers/{controller}'
    },

    /**
     * @description
     *
     * Same for service
     */
    service: {
      path: '/src/{service}'
    },

    /**
     * @description
     *
     * Same for config
     */
    config: {
      path: '/resources/configs/{config}'
    },

    /**
     * @description
     *
     * Same for directive
     */
    directive: {
      path: '/resources/directives/{directive}'
    },

    /**
     * @description
     *
     * Same for filter
     */
    filter: {
      path: '/resources/filter/{filter}'
    }
  },

最后把非 AMD 格式的 angular 暴露出去。

  shim: {
    'angular': {
      exports: 'angular'
    },
    'angular-route': {
      deps: ['angular']
    },
    'angular-cache': {
      deps: ['angular']
    },
    'angular-resource': {
      deps: ['angular']
    }
  }
});

之后，工程的结构就非常清晰和易扩展了。而且代码模块也不依赖工程结构，你可以把模块拷贝来拷贝去不用重命名。(……问题是你想么)

说实话我真的好讨厌写配置文件。没有IDE。