Поддерживает ли AngularJS AMD как RequireJS?

Ответ 1

Да, вы можете использовать RequireJS с angular. Вам нужно сделать немного дополнительной работы, чтобы заставить его функционировать, как в ссылке, которую вы включили, но это возможно.

В общем, я не нашел нужды для AMD с angular. Вся идея AMD заключается в том, что она позволяет декларативно определять зависимости между вашими сценариями и не беспокоиться о том, как вы их включаете на странице. Тем не менее, Angular позаботится об этом с вашим механизмом инъекции зависимостей, поэтому вы не получаете никакой пользы, используя AMD поверх этого.

tl; dr Я не нашел убедительной причины использовать AMD с angular.js.

Ответ 2

Использование RequireJS с AngularJS имеет смысл, но только если вы понимаете, как каждый из них работает в отношении инъекции зависимостей, так как хотя оба они вводят зависимости, они вводят очень разные вещи.

У AngularJS есть своя система зависимостей, которая позволяет вам вводить модули AngularJS в только что созданный модуль, чтобы повторно использовать реализации. Скажем, вы создали "первый" модуль, который реализует фильтр AngularJS "приветствовать":

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

А теперь скажем, вы хотите использовать фильтр "greet" в другом модуле под названием "second", который реализует фильтр "прощай". Вы можете сделать это, вводя "первый" модуль в "второй" модуль:

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

Дело в том, что для правильной работы этой работы без RequireJS вы должны убедиться, что на первой странице был загружен "первый" модуль AngularJS, прежде чем вы создадите "второй" модуль AngularJS. Котировочная документация:

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

В этом смысле здесь, где RequireJS может вам помочь, поскольку RequireJS обеспечивает чистый способ ввода сценариев на страницу, помогая вам организовывать зависимости script между собой.

Возвращаясь к "первым" и "второму" модулям AngularJS, вот как вы можете это сделать, используя RequireJS, разделяющие модули на разные файлы, чтобы использовать загрузку зависимостей script:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

Вы можете видеть, что мы зависим от файла firstModule, который нужно вставить до того, как будет выполнен запрос обратного вызова RequireJS, для которого нужно загрузить первый модуль AngularJS для создания "второго" модуля AngularJS.

Боковое примечание: ввод "angular" в файлах "firstModule" и "secondModule" в зависимости от необходимости использования AngularJS внутри функции обратного вызова RequireJS, и его необходимо настроить в конфигурации RequireJS для отображения "angular" в библиотечный код. У вас может быть и AngularJS, загружаемый на страницу традиционным способом (script), хотя выигрывает от требований RequireJS.

Более подробная информация о поддержке RequireJS из ядра AngularJS версии 2.0 в моем сообщении в блоге.

Основываясь на моем сообщении в блоге "Понимание требований с AngularJS", вот ссылка .

Ответ 3

Вы можете лениво загружать компоненты Angular.js, используя поставщиков. Из статьи :

Поставщики - это в основном объекты, которые используются для создания и настройки экземпляров артефактов AngularJS. Следовательно, чтобы зарегистрировать ленивый контроллер, вы должны использовать $controllerProvider....

В общем, вы должны сначала определить свой модуль приложения, чтобы хранить экземпляры соответствующих поставщиков. Затем вы определяете свои ленивые артефакты, чтобы регистрироваться, используя поставщиков, а не API модуля. Затем, используя функцию разрешения, которая возвращает обещание в определении маршрута, вы загрузите все ленивые артефакты и разрешите обещание после их загрузки. Это гарантирует, что все ленивые артефакты будут доступны до отображения соответствующего маршрута. Кроме того, не забудьте решить обещание в $rootScope. $Apply, если разрешение будет происходить за пределами AngularJS. Затем вы создадите "bootstrap script, который сначала загружает модуль приложения перед загрузкой приложения. Наконец, вы ссылаетесь на bootstrap script из вашего файла index.html.

http://ify.io/lazy-loading-in-angularjs/