Question

我很担心将requireJS（和r.js优化器）实现到一个非常大的AngularJS SPA中的正确方法。我想知道如何组织项目以获得AMD模块化的好处，但不是复杂的事情（包含内部的角度模块需要js define d模块，这些模块都被转储到优化的.js文件中...）。

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

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

使用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' ...]);
});

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

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

Answer 1

不应该做所有这些。

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

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

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是已添加的新控制器/服务，其他控制器/服务将以相同的方式添加

然后控制器/服务需要包含在需要的代码中，例如这是事件的开始-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');
    ...

将角度模块与AMD模块分开的正确方法？

1 个答案: