правильный способ разделения угловых модулей от модулей AMD?

Question

Я запутался в правильном способе реализации requireJS (и оптимизатора r.js) в очень большом AngularJS SPA. Я хотел бы получить несколько советов о том, как организовать проект, поэтому я получаю преимущество модуляции AMD, но не слишком усложняю вещи (для упаковки угловых модулей внутри требуются модули js define d, которые все сбрасываются в оптимизированный файл .js ...) ,

У меня есть несколько различных категорий файлов, которые я имею дело с:

1. У меня есть пакет библиотек поставщиков (JQuery, угловой, угловой ресурс, требуют, lodash и т.д.)
2. I есть некоторые модули уровня контейнера AMD (аутентификации, аналитика и т.д.)
3. у меня есть много угловых модули, сервисы, фильтров и т.д.

Использование r.js для Concat и Минимизировать все вещи вместе с продавцом кажется как без проблем, но когда я начал добавлять ко всему другому коду, я чувствовал, что мой проект стал грязным. Например, у меня есть служба 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 большой файл обезображенный 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. В чем преимущество хранения всех моих угловых модулей, контроллеров, фильтров и т. Д., Определенных в их собственных модулях AMD и включаемых вручную через requirejs? Они все в памяти уже (загружены в большие кучи-файлы через r.js). Есть ли более умный способ справиться со всеми этими сдержанными угловыми модулями, когда их будет много? Должен ли я объединить их всех в свой собственный модуль, который может быть одной инъекционной зависимостью?
2. Я смешиваю между «модулями AMD» и «угловыми модулями». Все мои угловые компоненты (контроллеры, директивы и т. Д.) Должны быть в своих собственных модулях AMD? Я чувствую, что я обматываю модуль (угловой) внутри модуля (требуется формат AMD).

Answer 1

Не должно быть необходимости делать все это.

Я использовал это в качестве отправной точки https://github.com/Matthew-Odette/angular-require-bootstrap-seed

Тогда все, что требуется, чтобы добавить контроллеры и услуги секции требуют в конце файла AMD. например

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

событие-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'); 
    ...