Улучшить эту документациюМодули

Что такое модуль?

Модуль можно рассматривать как контейнер для различных частей вашего приложения – контроллеров, сервисов, фильтров, директив и т.д.

Почему?

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

Приложения AngularJS не имеют главного метода. Вместо этого модули декларативно указывают, как должно быть запущено приложение. Этот подход имеет несколько преимуществ:

• Декларативный процесс проще для понимания.
• Вы можете упаковать код в виде повторно используемых модулей.
• Модули могут загружаться в любом порядке (или даже параллельно), потому что модули откладывают выполнение.
• Тесты единиц нужно загружать только соответствующие модули, что ускоряет их работу.
• Тесты от начала до конца могут использовать модули для переопределения конфигурации.

Основы

Я тороплюсь. Как мне заставить работать модуль Hello World?

Важные моменты для замечания:

• API модуля
• Ссылка на модуль myApp в <div ng-app="myApp">. Это то, что запускает приложение с использованием вашего модуля.
• Пустой массив в angular.module('myApp', []). Этот массив – список модулей, от которых myApp зависит.

Рекомендуемая настройка

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

• Модуль для каждой функции
• Модуль для каждого повторно используемого компонента (особенно директив и фильтров)
• И модуль уровня приложения, который зависит от вышеперечисленных модулей и содержит код инициализации.

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

Вышеизложенное является предложением. Настройте его в соответствии со своими потребностями.

Загрузка модулей

Модуль – это набор поставщиков, сервисов, директив и, необязательно, блоков конфигурации и запуска, которые применяются к приложению во время процесса запуска.

API модуля описывает все доступные методы и способы их использования.

См. Использование инъекции зависимостей, чтобы узнать, какие зависимости можно инжектировать в каждый метод.

Зависимости и порядок выполнения

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

В одном модуле порядок выполнения следующий:

1. Функции provider выполняются, так что они и сервисы, которые они определяют, могут быть доступны для $injector.

2. После этого выполняются блоки конфигурации (config функции). Это означает, что блоки конфигурации необходимых модулей выполняются перед блоками конфигурации любого модуля, требующего их.

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

Затем блоки run, собранные из каждого модуля, выполняются в порядке требования.

Примечание: каждый модуль загружается только один раз, даже если его требуют несколько других модулей. Примечание: функция фабрики для «значений» и «сервисов» вызывается лениво, когда значение/сервис инжектируется в первый раз.

Регистрация в блоке конфигурации

Хотя рекомендуется регистрировать инжектируемые компоненты непосредственно с помощью API модуля, также можно регистрировать сервисы, директивы и т.д., введя $provide или отдельных поставщиков сервисов в функцию конфигурации:

angular.module('myModule', []).
  value('a', 123).
  factory('a', function() { return 123; }).
  directive('directiveName', ...).
  filter('filterName', ...);

// is same as

angular.module('myModule', []).
  config(function($provide, $compileProvider, $filterProvider) {
    $provide.value('a', 123);
    $provide.factory('a', function() { return 123; });
    $compileProvider.directive('directiveName', ...);
    $filterProvider.register('filterName', ...);
  });

Блоки run

Блоки run – это самое близкое к главному методу в AngularJS. Блок run – это код, который необходим для запуска приложения. Он выполняется после того, как все сервисы будут сконфигурированы, и инжектор будет создан. Блоки run, как правило, содержат код, который сложно протестировать, и по этой причине они должны быть объявлены в изолированных модулях, чтобы их можно было игнорировать в тестах единиц.

Асинхронная загрузка

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

Создание против получения

Будьте осторожны, используя angular.module('myModule', []) будет создавать модуль myModule и переписывать любой существующий модуль с именем myModule. Используйте angular.module('myModule') для получения существующего модуля.

var myModule = angular.module('myModule', []);

// add some directives and services
myModule.service('myService', ...);
myModule.directive('myDirective', ...);

// overwrites both myService and myDirective by creating a new module
var myModule = angular.module('myModule', []);

// throws an error because myOtherModule has yet to be defined
var myModule = angular.module('myOtherModule');

Тестирование единиц

Тест единиц – это способ инициализации подмножества приложения для применения стимула к нему. Маленькие, структурированные модули помогают поддерживать тесты единиц лаконичными и целенаправленными.

Во всех этих примерах мы будем предполагать это определение модуля:

angular.module('greetMod', []).

factory('alert', function($window) {
  return function(text) {
    $window.alert(text);
  }
}).

value('salutation', 'Hello').

factory('greet', function(alert, salutation) {
  return function(name) {
    alert(salutation + ' ' + name + '!');
  }
});

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

describe('myApp', function() {
  // load application module (`greetMod`) then load a special
  // test module which overrides `$window` with a mock version,
  // so that calling `window.alert()` will not block the test
  // runner with a real alert box.
  beforeEach(module('greetMod', function($provide) {
    $provide.value('$window', {
      alert: jasmine.createSpy('alert')
    });
  }));

  // inject() will create the injector and inject the `greet` and
  // `$window` into the tests.
  it('should alert on $window', inject(function(greet, $window) {
    greet('World');
    expect($window.alert).toHaveBeenCalledWith('Hello World!');
  }));

  // this is another way of overriding configuration in the
  // tests using inline `module` and `inject` methods.
  it('should alert using the alert service', function() {
    var alertSpy = jasmine.createSpy('alert');
    module(function($provide) {
      $provide.value('alert', alertSpy);
    });
    inject(function(greet) {
      greet('World');
      expect(alertSpy).toHaveBeenCalledWith('Hello World!');
    });
  });
});