Каковы основные различия между компонентами и директивами в AngularJS 1.5?

Ответ 1

Просто копирую угловые документы, потому что они написаны так, как мне кажется.

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

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

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

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

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

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

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

больше чтения: https://docs.angularjs.org/guide/component

Ответ 2

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

Например, компоненты вынуждают изолированную область действия и сильно поощряют одностороннюю привязку. Почему это важно? Поскольку это лучше инкапсулирует компонент и препятствует созданию компонентов, которые тесно связаны с родительским элементом или областью. Это означает, что вы пишете компонент таким образом, чтобы в будущем вы могли повторно использовать его без изменений (вместо повторного использования копии и вставки, как многие из них склонны делать). Это также упрощает отслеживание и управление взаимодействием и изменениями данных.

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

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

1) Имя Компонента (как строка).

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

//для директивы

module.directive(имя, fn);

//для компонента

module.component(имя, параметры);

Ответ 3

Я попытаюсь объяснить, используя перспективу высокого уровня, вдохновленную этой статьей (Angular 2: Разница между компонентами и директивами). Он говорит Angular 2, но также полезен в контексте AngularJs.

Директивы

В области компьютерных наук существует концепция "Директива Прагма. Согласно Википедии:

"В компьютерном программировании директива pragma (от" pragmatic ") - это языковая конструкция, которая определяет, как компилятор (или ассемблер или интерпретатор) должен обрабатывать свой ввод. Директивы не являются частью самого языка"

Это хорошо согласуется с описанием, приведенным в документации AngularJS:

"На высоком уровне директивы являются маркерами элемента DOM (например, атрибута, имени элемента, комментария или класса CSS), которые сообщают HTML-компилятору AngularJS ($ compile) присоединить указанное поведение к этому элементу DOM (например, через прослушиватели событий). ) или даже для преобразования элемента DOM и его дочерних элементов. "

Итак, что в основном делают директивы, так это дает инструкции компилятору (Angular), чтобы изменить DOM или его поведение.

Компоненты

Компоненты в AngularJS являются специальной директивой; они пытаются имитировать веб-компоненты, как говорится в документации AngularJS:

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

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

Когда использовать что?

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

Некоторые из этих причин приведены в документации AngularJS для компонентов:

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

Еще один способ выразить это:

Директивы - это механизм, с помощью которого мы можем привязать поведение к элементам в DOM.

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

Возможный вывод

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

Идти глубже

Тодд Мотто поделится своими знаниями по этой теме в этой маленькой GIST.

Директива украшает DOM, добавляет поведение и расширяет существующий DOM. Когда вы используете .component(), вы создаете DOM, когда вы используете .directive(), вы декорируете DOM, то есть образ мышления.