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

В AngularJS, Компонент — это особый вид директивы, использующий более простую конфигурацию, подходящую для архитектуры приложения, основанной на компонентах.

Это упрощает написание приложения, аналогично использованию веб-компонентов или новой архитектуре приложений Angular.

Преимущества компонентов:

• более простая конфигурация, чем у обычных директив
• поощряет разумные значения по умолчанию и лучшие практики
• оптимизирован для архитектуры, основанной на компонентах
• написание директив компонентов упростит обновление до Angular

Когда не следует использовать компоненты:

• для директив, которым необходимо выполнять действия в функциях компиляции и пред-связывания, так как они недоступны
• когда вам нужны расширенные параметры определения директивы, такие как приоритет, терминал, многоэлементные
• когда вам нужна директива, которая срабатывает по атрибуту или классу CSS, а не элементу

Создание и настройка компонента

Компоненты можно регистрировать, используя метод .component() модуля AngularJS (возвращаемого angular.module()). Метод принимает два аргумента:

• Имя компонента (как строка).
• Объект конфигурации компонента. (Обратите внимание, что, в отличие от метода .directive() , этот метод не принимает функцию фабрики.)

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

Сравнение между определением директивы и определением компонента

Архитектура приложения, основанная на компонентах

Как уже упоминалось, помощник компонентов упрощает структурирование приложения с использованием архитектуры, основанной на компонентах. Но что отличает компонент от параметров, которые предоставляет помощник компонентов?

• Компоненты управляют только своим собственным представлением и данными: Компоненты никогда не должны изменять данные или DOM, которые находятся за пределами их собственного охвата. Обычно в AngularJS можно изменять данные в любом месте приложения через наследование области видимости и наблюдения. Это практично, но также может привести к проблемам, когда неясно, какая часть приложения отвечает за изменение данных. Вот почему директивы компонентов используют изолированную область видимости, чтобы целая категория манипуляций с областью видимости была недоступна.

• Компоненты имеют хорошо определенный публичный API — Входы и Выходы: Однако изоляция области видимости ограничена, потому что AngularJS использует двунаправленную привязку. Поэтому, если вы передаете объект компоненту так: bindings: {item: '='}, и изменяете одно из его свойств, изменение будет отражено в родительском компоненте. Однако для компонентов только компонент, владеющий данными, должен их изменять, чтобы было легко понять, какие данные меняются и когда. По этой причине компоненты должны придерживаться нескольких простых соглашений:

  • Входы должны использовать < и @ привязки. Символ < обозначает односторонние привязки, доступные начиная с версии 1.5. Разница с = заключается в том, что связанные свойства в области видимости компонента не отслеживаются, что означает, что если вы присвоите новое значение свойству в области видимости компонента, родительская область видимости не будет обновлена. Однако обратите внимание, что как родительская, так и компонентная области видимости ссылаются на один и тот же объект, поэтому, если вы изменяете свойства объекта или элементы массива в области видимости компонента, родитель все равно будет отражать это изменение. Поэтому общим правилом должно быть никогда не изменять свойства объекта или массива в области видимости компонента. @ привязки могут использоваться, когда вход представляет собой строку, особенно когда значение привязки не изменяется.

    bindings: {
      hero: '<',
      comment: '@'
    }
    

  • Выходы реализованы с помощью & привязок, которые функционируют как обратные вызовы для событий компонента.

    bindings: {
      onDelete: '&',
      onUpdate: '&'
    }
    

  • Вместо манипулирования входными данными компонент вызывает соответствующее выходное событие с измененными данными. При удалении это означает, что компонент не удаляет hero сам по себе, а отправляет его обратно в компонент-владелец через соответствующее событие.

    <!-- note that we use kebab-case for bindings in the template as usual -->
    <editable-field on-update="$ctrl.update('location', value)"></editable-field><br>
    <button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>
    

  • Таким образом, родительский компонент может решить, что делать с событием (например, удалить элемент или обновить свойства)

    ctrl.deleteHero(hero) {
      $http.delete(...).then(function() {
        var idx = ctrl.list.indexOf(hero);
        if (idx >= 0) {
          ctrl.list.splice(idx, 1);
        }
      });
    }
    

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

  • $onInit() — Вызывается для каждого контроллера после того, как все контроллеры на элементе были созданы и их привязки были инициализированы (и до функций пред- и пост-связывания для директив на этом элементе). Это хорошее место для размещения кода инициализации вашего контроллера.
  • $onChanges(changesObj) — Вызывается всякий раз, когда односторонние привязки обновляются. changesObj — это хеш, ключи которого — имена измененных связанных свойств, а значения — объект формы { currentValue, previousValue, isFirstChange() }. Используйте этот хук для запуска обновлений внутри компонента, например, для клонирования связанного значения, чтобы предотвратить случайное изменение внешнего значения.
  • $doCheck() — Вызывается на каждой итерации цикла переваривания. Предоставляет возможность обнаруживать и реагировать на изменения. Любые действия, которые вы хотите выполнить в ответ на обнаруженные изменения, должны вызываться из этого хука; реализация этого не влияет на время вызова $onChanges. Например, этот хук может быть полезен, если вы хотите выполнить проверку глубокого равенства или проверить объект Date, изменения в котором не будут обнаружены детектором изменений AngularJS и, следовательно, не запустят $onChanges. Этот хук вызывается без аргументов; если обнаруживаются изменения, вы должны сохранить предыдущее(ие) значение(я) для сравнения с текущими значениями.
  • $onDestroy() — Вызывается для контроллера, когда содержащая его область видимости уничтожается. Используйте этот хук для освобождения внешних ресурсов, наблюдений и обработчиков событий.
  • $postLink() — Вызывается после того, как элемент этого контроллера и его дочерние элементы были связаны. Подобно функции post-link, этот хук может использоваться для настройки обработчиков событий DOM и выполнения непосредственных манипуляций с DOM. Обратите внимание, что дочерние элементы, которые содержат директивы templateUrl , не будут скомпилированы и связаны, поскольку они ожидают загрузки шаблона асинхронно, и их собственная компиляция и связывание приостановлены до тех пор, пока это не произойдет. Этот хук можно рассматривать как аналогичный ngAfterViewInit и ngAfterContentInit хукам в Angular. Поскольку процесс компиляции в AngularJS довольно отличается, нет прямого соответствия, и следует проявлять осторожность при обновлении.

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

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

Пример дерева компонентов

Следующий пример расширяет простой пример компонента и включает в себя представленные выше концепции:

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

Компонент heroDetail теперь содержит новые функции:

• кнопка удаления, которая вызывает связанную функцию onDelete компонента heroList
• поле ввода для изменения местоположения героя в виде многократно используемого компонента editableField. Вместо манипулирования самим объектом героя, он отправляет набор изменений вверх в компонент heroDetail, который отправляет его вверх в компонент heroList, который обновляет исходные данные.

Компоненты как шаблоны маршрутов

Компоненты также полезны в качестве шаблонов маршрутов (например, при использовании ngRoute). В приложении, основанном на компонентах, каждое представление является компонентом:

var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
  template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
  controller: function() {
    this.user = {name: 'world'};
  }
});
myMod.config(function($routeProvider) {
  $routeProvider.when('/', {
    template: '<home></home>'
  });
});

При использовании $routeProvider, вы часто можете избежать некоторых шаблонных кодов, передав разрешенные зависимости маршрута непосредственно в компонент. Начиная с версии 1.5, ngRoute автоматически назначает разрешения свойству маршрута $resolve (вы также можете настроить имя свойства через resolveAs). Используя компоненты, вы можете воспользоваться этим и передать разрешения непосредственно в свой компонент без создания дополнительного контроллера маршрута:

var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
  template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
  bindings: {
    user: '<'
  }
});
myMod.config(function($routeProvider) {
  $routeProvider.when('/', {
    template: '<home user="$resolve.user"></home>',
    resolve: {
      user: function($http) { return $http.get('...'); }
    }
  });
});

Взаимодействие между компонентами

Директивы могут требовать контроллеров других директив для обеспечения взаимодействия между ними. Это можно сделать в компоненте, предоставив объектное отображение для свойства require. Ключи объекта указывают имена свойств, под которыми требуемые контроллеры (значения объекта) будут связаны с контроллером требующего компонента.

Вот пример раздела вкладки, созданного из компонентов:

Тестирование контроллеров компонентов

Самый простой способ провести модульное тестирование контроллера компонента — использовать $componentController, который включён в ngMock. Преимущество этого метода в том, что вам не нужно создавать какие-либо DOM-элементы. Следующий пример демонстрирует, как это сделать для компонента heroDetail из вышеприведённого примера.

В примерах используется фреймворк для тестирования Jasmine.

Тест контроллера:

describe('HeroDetailController', function() {
  var $componentController;

  beforeEach(module('heroApp'));
  beforeEach(inject(function(_$componentController_) {
    $componentController = _$componentController_;
  }));

  it('should call the `onDelete` binding, when deleting the hero', function() {
    var onDeleteSpy = jasmine.createSpy('onDelete');
    var bindings = {hero: {}, onDelete: onDeleteSpy};
    var ctrl = $componentController('heroDetail', null, bindings);

    ctrl.delete();
    expect(onDeleteSpy).toHaveBeenCalledWith({hero: ctrl.hero});
  });

  it('should call the `onUpdate` binding, when updating a property', function() {
    var onUpdateSpy = jasmine.createSpy('onUpdate');
    var bindings = {hero: {}, onUpdate: onUpdateSpy};
    var ctrl = $componentController('heroDetail', null, bindings);

    ctrl.update('foo', 'bar');
    expect(onUpdateSpy).toHaveBeenCalledWith({
      hero: ctrl.hero,
      prop: 'foo',
      value: 'bar'
    });
  });

});