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

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

Это облегчает написание приложения, аналогичного приложениям с использованием Web Components или архитектуре Angular 2.

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

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

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

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

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

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

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

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

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

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

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

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

• Компоненты имеют четко определенный публичный API — вводы и выводы: Однако изоляция области видимости распространяется не на все, потому что Angular использует двунаправленную привязку. Поэтому, если вы передаете объект компоненту, например, 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, изменения которого не будут обнаружены детектором изменений Angular и, следовательно, не приведут к вызову $onChanges. Этот метод вызывается без аргументов; при обнаружении изменений необходимо сохранить предыдущее(ые) значение(я) для сравнения с текущими значениями.
  • $onDestroy() — Вызывается для контроллера, когда содержащая область видимости уничтожается. Используйте этот метод для освобождения внешних ресурсов, наблюдений и обработчиков событий.
  • $postLink() — Вызывается после привязки элемента этого контроллера и его дочерних элементов. Подобно функции последующей привязки, этот метод можно использовать для настройки обработчиков событий DOM и непосредственных манипуляций с DOM. Обратите внимание, что дочерние элементы, содержащие директивы templateUrl , не будут скомпилированы и привязаны, так как они ждут асинхронной загрузки своего шаблона, а их собственная компиляция и привязка приостановлены до этого момента. Этот метод можно считать аналогичным методам ngAfterViewInit и ngAfterContentInit в Angular 2. Поскольку процесс компиляции в Angular 1 несколько отличается, нет прямой сопоставления, и следует быть осторожным при обновлении.

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

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

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

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

Вместо 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('component: heroDetail', function() {
  var $componentController;

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

  it('should expose a `hero` object', function() {
    // Here we are passing actual bindings to the component
    var bindings = {hero: {name: 'Wolverine'}};
    var ctrl = $componentController('heroDetail', null, bindings);

    expect(ctrl.hero).toBeDefined();
    expect(ctrl.hero.name).toBe('Wolverine');
  });

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

});