Ответ 1

Я бы сделал один глобальный модуль, который загружается каждым отдельным приложением, так же как и модули, такие как "ngAnimate", загружаются... глобальный модуль может затем инициализировать функциональность, общую для всех страниц, такую ​​как аналитика Google.

Это требует некоторой полицейской работы для всех разработчиков, но это хорошая практика с помощью обзоров кода и т.д.

пример страницы:

angular.module('individualPage', [
    'globalModule',
    'customPageModule'
]).config(
    // etc
);

глобальный модуль:

angular.module('globalModule', [
    'googleAnalytics'
]).config(
    // etc
);

Ответ 2

У меня есть сайт, который разработан несколькими разработчиками с несколькими страницами. Каждая "страница" инициализирует angular, вызывая angular.module(и т.д.).

Мой вопрос:

• Все страницы используют несколько модулей, а некоторые страницы используют определенные модули. Какова наилучшая практика для достижения этой цели?

Я не знаю лучшей практики при работе с несколькими страницами. IMHO, создавая несколько страниц, сегодня является практикой BAD. Я думаю о веб-приложения (SPA), которые имеют разные взгляды и состояния, а не веб-страницы сайты с разрозненными страницами. Поэтому, если вы решите пойти SPA (одностраничное приложение), вы можете загрузить все ваши основные/общие модулей перед загрузкой приложения. Просмотры/страниц, которые необходимы определенные модули могут лениться загружать их, используя что-то вроде oclazyload.

2. Доверяю ли я тем, что разработчики будут вставлять правильные модули, которые понадобятся на сайте (т.е. Google Analytics), или я создаю один вызов, который будет использоваться всеми моими страницами, загружающими ВСЕ модули.

Я не могу сказать много о вопросе доверия, поскольку я не знаю вашего разработчиков достаточно хорошо. В общем, разработчики никогда не должны быть доверяют, они будут делать все, что, кажется, работает, пять и назвать это днем. Идея заключается в том, чтобы "доверять, но проверять", вы не нужно подключать свои телефоны или читать их электронные письма, но никогда никогда не отрывайте глаз от основного хранилища git или svn. Где угодно, если вы должны были использовать oclazyload, как я предложил выше для SPA, вы бы нужно только беспокоиться о динамической загрузке "просмотра/страницы" модули, которые разработчики могут настроить самостоятельно.

3. И есть ли способ сделать то и другое? Например, инициализируйте модули, которые необходимы на всех страницах, а затем динамически загружайте определенные модули на их соответствующие страницы.

Да, да, есть... SPA-подход, который я уже изложил выше. Я также рекомендовал бы использовать angular -ui-router для состояний и взглядов. Идея заключается в разработке вашего приложения в то время как это воспринимается как рабочий стол или мобильный толстый клиент, который имеет переходы состояний и т.д.

Ответ 3

У меня есть сайт, который разработан несколькими разработчиками с несколькими страницами.

Каждая "страница" инициализирует angular, вызывая angular.module(и т.д.).

Мой вопрос в том, что на всех страницах есть несколько модулей, а на некоторых страницах используются определенные модули.

Какова наилучшая практика для достижения этой цели?

Доверяю ли я, что разработчики будут вставлять правильные модули, которые понадобятся на сайте (то есть в Google Analytics) или я создаю один вызов, который разделяет мои все страницы, загружающие ВСЕ модули.

И есть ли способ сделать то и другое? Например, инициализируйте модули, которые необходимы на всех страницах, а затем динамически загружайте определенные модули на их соответствующие страницы.

Начну с определения страницы.

Говорите ли вы о SPA или более традиционной настройке, клиент переводит страницы между страницами с помощью регулярных <a href="/page"> и сервер обслуживает клиента куском HTML?

Если последнее верно, то я настоятельно призываю вас пересмотреть свой базовый подход к вашему приложению angular.

Лучший (или, скорее, предпочтительный) способ делать вещи - это обслуживать клиента одним куском HTML, а затем переход между страницами (отныне я буду называть их как состояния), используя ngRoute, angular маршрутизатор (2) или еще лучше - ui-router.

В оставшуюся часть моего ответа я собираюсь предположить, что вы на самом деле работаете со SPA.

Какова наилучшая практика для достижения этой цели?

Как бы то ни было, я бы вышел на конечность и сказал, что нет лучшей практики, определенной для случая, который вы представляете. Существует много способов сделать это, ни одна из которых официально не рекомендована основным сообществом разработчиков/сообществом, насколько мне известно.

Вы можете пойти с webpack-angularjs-lazyload, requirejs (angular -requirejs-seed), requirejs (angularAMD), SystemJS. Выберите свой яд предпочтения!

Доверяю ли я, что разработчики будут вставлять правильные модули, которые понадобятся на сайте (то есть в Google Analytics) или я создаю один вызов, который разделяет мои все страницы, загружающие ВСЕ модули.

Если код, содержащийся в angular.module, требуется по всему сайту, я бы привязал его к основному модулю приложения.

Например:

/** Define core functionality that _is_ essential to the application running as expected **/
angular.module('core-module', [ 'route-definitions', 'http-interceptors', 'google-analytics' ]);

/** Inject the core functionality into a bundle module **/
angular.module('main-bundle-module', [ 'core-module' ]);

/** Bootstrap the bundle module as your application **/
angular.bootstrap(/* DOM element */, ['main-bundle-module']);

Теперь, всякий раз, когда кто-то создает новый модуль для определенного состояния, им нужно будет добавить указанный модуль в main-bundle-module (запретить ленивые загруженные модули). Таким образом, основные функции всегда будут поставляться и доступны в вашем случае в Google Analytics. В каком-то смысле вы просто порвали доверительный барьер.

Сделав шаг назад, давайте на мгновение предположим, что вы не работаете с SPA - и вы на самом деле повторно инициализируете angular при каждом переходе на страницу (плохой ход). Как бы вы гарантировали, что требуемая функциональность всегда присутствует?

Украшение метода angular.module.

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

Здесь вы можете пойти двумя способами:

• Убейте выполнение JS, если необходимый модуль не является частью определения модуля разработчиков.
  • "Плохой полицейский".
  • Это будет ловить "ненадежного разработчика" на его/ее треках во время разработки, чтобы гарантировать, что они следуют стандарту проекта.
• Помогите "ненадежному разработчику", автоматизируя задачу по требованию модуля.
  • "Хороший полицейский". (ну, вроде...)
  • Это гарантирует, что требуемый модуль всегда присутствует, хотя и в каждом модуле.

"Хороший коп"

(function(angular) {

  // The always required module(s).
  var ALWAYS_REQUIRED = ['cs.core'];
  // Keep a reference to the original angular.module function.
  var originalFn      = angular.module;
  // Keep track of registered modules.
  var registered      = {};

  angular.module = function (name, dependencies, configFunction) {
    var loaded;

    // Ensure that we are always working with an array of dependencies.
    dependencies = dependencies || [];

    // If the module has not already been registered
    if (!registered[name]) {

      // Ensure that the required modules are available.
      ALWAYS_REQUIRED.forEach(function (required) {
        if (dependencies.indexOf(required) === -1) {
          dependencies.push(required);
        }
      });

      // Register the module and store it in the registered object for future reference.
      loaded = registered[name] = original(name, dependencies, configFunction);
    } else {
      // Do not re-register the module, simply load it as per 'angular.module('name_of_module')';
      loaded = original(name);
    }

    // Return the loaded module.
    return loaded;
  };

})(angular);

"Плохой коп"

(function(angular) {

  var ALWAYS_REQUIRED = ['cs.core'];
  var originalFn      = angular.module;

  angular.module = function (name, dependencies, configFunction) {

    ALWAYS_REQUIRED.forEach(function (required) {
      if (dependencies.indexOf(required) === -1) {
        throw new Error('You need to add ' + required + ' to ' + name + '\ module dependencies!');
      }
    });

    return originalFn(name, dependencies, configFunction);
  };

})(angular);

Это два способа убить проблему доверия, но при этом мы внедрили код;

• Не очень красиво.
• Определенно не очень хорошо проверено/проверено сражение.
• Убивает модуляцию для загрузки.

И есть ли способ сделать то и другое? Например, инициализируйте модули, которые необходимы на всех страницах, а затем динамически загружайте определенные модули на их соответствующие страницы.

Я бы сказал, что лучший способ сделать это:

• Сделайте необходимые шаги для преобразования в SPA.
• Запишите документацию для всех ваших разработчиков, чтобы ускорить выполнение требований проекта.
• Создайте автономный модуль, содержащий требуемую функциональность core и присоедините его к модулю ng-app/angular.bootstrap.
• Получить ui-router, ui-router-extras и ocLazyLoad, чтобы допускать ленивые определения модулей/состояний/компонентов.
• Посмотрите на некоторые из следующих ссылок для вдохновения/идей о том, что подходит вашему конкретному проекту:
  • ocLazyLoad-SystemJS-Router от @lookfirst
  • ng-jspm-seed # futureStateConfig by @kasperlewau
  • ocLazyLoad # с вашим маршрутизатором
  • ocLazyLoad + requirejs plunker
  • fooobar.com/questions/176423/...
  • angular + слайды webpack

TL;DR

• Конвертировать в SPA.
• Загрузите приложение с включенной базой функций.
• Напишите документацию для ненадежных разработчиков.
  • Еще лучше создать доверие.:)
• Lazy, если необходимо, для конкретных состояний.

Ответ 4

Вы можете попробовать browserify загрузить и построить свой javascript в одном файле. С этим вы можете легко минимизировать javascript-код, а также можете загружать модули nodejs, такие как события и многое другое, но это не ваш вопрос.