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

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

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

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

Итак, по какой причине я должен продолжать использовать директиву?

Angular 2 утверждает, что все является компонентом, поэтому, работая над легким переходом с 1.5 на 2, не имеет ли смысл использовать только компоненты в будущем?

В прошлом я использовал директивы для создания, например, текстового поля автоматического поиска, нет причин, по которым я не должен делать это сейчас внутри компонента, верно? И затем я могу повторно использовать этот компонент внутри других компонентов, которые я создаю?


angularjs angular-directive
person Martin    schedule 13.07.2016    source источник

Ответы (2)


arrow_upward
36
arrow_downward

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

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

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

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

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

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

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

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

дополнительная литература: https://docs.angularjs.org/guide/component

person bresleveloper    schedule 13.07.2016
comment
было бы здорово, если бы вы упомянули различия :) - person Vikas Bansal; 25.09.2017

arrow_upward
3
arrow_downward

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

Директивы

В компьютерных науках есть понятие «директивная прагма». Согласно Википедии:

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

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

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

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

Компоненты

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

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

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

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

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

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

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

Другой способ выразить это:

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

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

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

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

Углубление

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

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

person Flip    schedule 17.04.2019