1

我对将 requireJS（和 r.js 优化器）实现到非常大的 AngularJS SPA 的正确方法感到困惑。我想要一些关于如何组织项目的建议，以便我从 AMD 模块化中受益，但不要过于复杂（将 angular 模块包装在需要 js defined 模块中，这些模块都被转储到优化的 .js 文件中......）。

我正在处理几种不同类别的文件：

  1. 我有一堆供应商库（jquery、angular、angular-resource、require、lodash 等）
  2. 我有一些容器级 AMD 模块（身份验证、分析等）
  3. 我有很多角度模块、服务、过滤器等

使用 r.js 将所有供应商的东西合并和缩小在一起似乎很容易，但是当我开始添加所有其他代码时，我觉得我的项目变得混乱了。例如，我有一个 Auth 服务、几个控制器和我的供应商依赖项（jquery ...）。所以我main.js的需要看起来是这样的：

require.config({
  paths: {
    // load vendor libraries
    'domReady':      '../vendor/requirejs-domready/domReady',
    'angular':       '../vendor/angular/angular',
    'jquery':        '../vendor/jquery/jquery.min',
    requireLib:      '../vendor/requirejs/require'
     ... lots of these

    //load app code
    'app':           '../app/app',
    'AuthCtrl':      '../app/modules/auth/AuthCtrl',
    'UserCtrl':      '../app/modules/auth/UserCtrl',
    'SettingsCtrl':  '../app/modules/auth/SettingsCtrl',
    // potentially dozens and dozens of these...

    //load auth library
    'auth':          '../app/modules/common/auth',
    'analytics'      '../analytics'

  },
  include: ['domReady', 'requireLib'],

  shim: {
    'angular': {
      exports: 'angular'
    }
  }
...
});

目前，我已经将上面所有 3 个“类别”中的所有代码转储到 1 个大的 uglified js 文件中。

我不满意的是我觉得我的控制器开始需要一个模块依赖项的清单：

require('app',[
  'angular',
  'jquery',
  'AuthCtrl',
  'UserCtrl',
  'SettingsCtrl',
  ' ... potentially dozens? '
  ...
], function (angular, $, Auth, user, settings, ...potentially dozens?) {
  'use strict';

  return angular.module('ngAD', ['AuthCtrl', 'UserCtrl', 'SettingsCtrl' ...]);
});

所以我的问题是我猜的两个问题：

  1. 将我所有的 Angular 模块、控制器、过滤器等保留在它们自己的 AMD 模块中并通过 requirejs 手动包含有什么好处？它们都在内存中（已经通过 r.js 加载到大堆文件中）。当会有大量的这些离散的角度模块时，是否有更聪明的方法来处理它们？我应该将它们全部连接到它们自己的模块中，该模块可以是一个可注入的依赖项吗？
  2. 我在“AMD 模块”和“角度模块”之间搞混了。我所有的角度组件（控制器、指令等）都需要在它们自己的 AMD 模块中吗？我觉得我在一个模块（需要的 AMD 格式）中包装了一个模块（角度）。
4

1 回答 1

0

应该没有必要做所有这些。

我以此为起点 https://github.com/Matthew-Odette/angular-require-bootstrap-seed

然后，只需将控制器和服务添加到 AMD 文件末尾的 require 部分即可。例如

require(
    [
    // Dependencies from lib
            'angular', 
            'ngRoute',
            '../lib/less.min.1.5.0',  
    // Angular directives/controllers/services
            'app',
            'core/viewHomeController',
            'core/commonRoutes',
            'core/header',
            'events/events-ctrl
    ], 
    function (angular) {
            var AppRoot = angular.element(document.getElementById('ng-app'));
            AppRoot.attr('ng-controller','AppCtrl');
            angular.bootstrap(document, ['TheApp']);
    });

events-ctrl.js 是已添加的新控制器/服务，将以相同方式添加更多控制器/服务

然后需要将控制器/服务包装在需要代码中，例如这是 events-ctrl.js 的开头

define(['app'], function (app) {

  app.factory('EventService', function($resource) {
    return $resource('/api/events/:id');
  });

  app.controller('EventListCtrl', ['$scope', '$modal', 'EventService', function($scope, $modal, EventService) {
    console.log('EventListCtrl working');
    ...
于 2013-12-29T23:23:53.350 回答