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

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

Почему?

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

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

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

Основы

У меня мало времени. Как создать работающий модуль Hello World?

Важные моменты:

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

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

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

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

Мы также написали документ о том, как мы организуем большие приложения в Google.

Вышеизложенное — рекомендация. Приспособите её к своим потребностям.

Загрузка модулей и зависимости

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

1. Блоки конфигурации – выполняются во время регистрации и конфигурации поставщиков. В блоки конфигурации можно вводить только поставщиков и константы. Это предотвращает случайную инициализацию сервисов до их полной конфигурации.
2. Блоки выполнения – выполняются после создания инжектора и используются для запуска приложения. В блоки выполнения можно вводить только экземпляры и константы. Это предотвращает дальнейшую конфигурацию системы во время работы приложения.

angular.module('myModule', []).
config(function(injectables) { // provider-injector
  // This is an example of config block.
  // You can have as many of these as you want.
  // You can only inject Providers (not instances)
  // into config blocks.
}).
run(function(injectables) { // instance-injector
  // This is an example of a run block.
  // You can have as many of these as you want.
  // You can only inject instances (not Providers)
  // into run blocks
});

Блоки конфигурации

В модуле есть несколько удобных методов, которые эквивалентны блоку config. Например:

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

Блоки выполнения

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

Зависимости

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

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

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

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

Обратите внимание, что использование 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!');
    });
  });
});