После разрыва Угловые и его версии Пришло время сделать глубже погружение в внутреннюю работу рамки, а именно директивы. Они являются основным преимуществом работы с угловой, и должны помочь кому-либо работать с рамками, предоставляя полезные, многоразовые решения как опытных пользователей, так и для которых только начинаются. Прежде чем мы попадем в подробности, давайте посмотрим на то, что они на самом деле.
Что именно являются директивами?
Директивы в основном функции выполняются, когда компилятор находит их. Их роль состоит в том, чтобы улучшить возможности HTML путем прикрепления пользовательского поведения до DOM. С версии 2.0 угловой угла имеет три типа директив:
- Структурные директивы,
- Директивы атрибутов,
- компоненты,
Угловой предоставляет вам ряд встроенных директив, но вы также можете создать собственные или использовать пользовательские, сделанные другими.
Структурные
Структурные директивы несут ответственность за компоновку HTML. Они меняют структуру дома путем добавления, удаления или манипулирования элементами. Структурные директивы легко узнавают, поскольку они содержат префикс звездочки перед их именем. Самые популярные встроенные структурные директивы:
NGIF : Позволяет условную рендурирование деталей шаблонов, он покажет или скрывает HTML-элемент на вашем угловом шаблоне HTML на основе выполнения определенного состояния
NGFOR : Директива ретранслятора, которая выводит список элементов, итерацией по массиву , это помогает создавать списки представления данных и таблиц в шаблонах HTML.
Ngswitch : Работает так же, как оператор выключателя JavaScritpt IE. Отображает один или несколько элементов DOM на основе предопределенного условия.
Источник: Angular.io.
Атрибут
Директивы атрибутов несут ответственность за прослушивание и изменение поведения других HTML-элементов, атрибутов, свойств и компонентов в структуре DOM. Название происходит от того, что они применяются к элементам, как если бы они были атрибутами HTML. Самые популярные встроенные директивы атрибутов:
NGClass : Динамически устанавливает классы CSS для элемента DOM, это можно использовать различными способами изменить стили и скрывать или показать контент.
Ngstyle : Устанавливает множество встроенных стилей одновременно и динамически на основе состояния компонента, полезного для динамически меняющихся появления элементов.
Ngmodel : Раствор угловых углов для двусторонней задачи связывания передачи данных связывает значение HTML-контроля к данным приложения.
Источник: Angular.io.
Компоненты
Компоненты на самом деле являются директивами с шаблонами, поскольку они являются основной точкой работы с угловой, вы можете сказать, что угловое приложение – это дерево компонентов. Компоненты влекуют за собой поведение (что делать с данными и как реагировать на взаимодействия пользователя) и шаблон (как данные отображаются). Хотя это может звучать проще, он поддерживает базовые, а также расширенные взаимодействия и необходимы для снижения времени и усилий, необходимых для создания приложения.
Угловые компоненты (ранее угловые материалы) : Официальный пакет компонентов, сделанный командой позади угловой. Это набор инструментов для создания адаптных компонентов с использованием общих шаблонов взаимодействия в соответствии с лучшими практиками угловой группы. Он также обеспечивает консистенцию проекта и бесшовные пользовательский опыт в различных операционных системах (Windows, MacOS, IOS, Android, Chrome OS)
NGX-Bootstrap : Все основные компоненты Bootstrap, питающиеся угловым угловым, включая оповещения, кнопки, пагинацию, бар прогресса и интерактивные элементы, такие как раскрывающиеся меню, пользовательские подсказки и другие. Вам не нужно использовать оригинальные компоненты JS, просто используйте разметку Bootstrap и CSS. Поскольку в виду адаптируемость Целью здесь является предоставление повышения производительности для мобильных и настольных приложений, независимо от того, начинаете ли вы с нуля или планируете интегрировать его в существующую работу.
Primeng : Вероятно, самый полный пользовательский набор для угловых с более чем 80 компонентами, направленными на помощь дизайнерам пользовательских интерфейсов ускорить процесс разработки. Включает в себя компоненты ввода (автозаполнение, календарь, кейфлтер) панельные компоненты (TabView, панель инструментов, Scrollpanel) (галерия, перетаскивание, падение, бар прогресса, капча) и многие другие другие. Чтобы закрыть его, если вы создаете UI, это путь.
NGX Admin : Приборная панель администратора в интернет-концевой администрации на основе угловых 9+ и небелей с поддержкой системы проектирования EVA. Содержит компоненты, такие как диаграммы, столы, карты, формы, редакторы, отзывчивый макет, высокое разрешение и другие. Обеспечивает согласованность всех устройств от Desktop на мобильный. Дополнительно предлагает 4 визуальные темы на выбор (Light, Dark, Corporate и Cosmic) поставляется с 2 панелями, IoT и электронной коммерцией, а более 40 страниц на выбор. Мало удивительно, что это так популярно с почти 22000 звезд на Github.
Источник: Angular.io.
Все они довольно часто обновляются, наряду с самой угловой, поэтому, если вы ищете некоторые функции, которые здесь не упоминаются, проверьте запланированные дорожные карты, может быть, они скоро будут добавлены. Очевидно, что есть также тонны других библиотек, которые вы можете найти на Github, или вы всегда можете создавать свои собственные или адаптировать, которые уже сделаны для ваших потребностей. Ключ здесь находит, что будет соответствовать вашему рабочему процессу и то, что вы найдете на самом деле полезным. Это может занять некоторое время, чтобы найти правильное подгонка для вас, но большинство тех, кто работает с угловой, уверяет вас, оно того стоит.
Гостевой блог Post для Блог для редактора GraphQL Михал Тишкевич
Хотите ускорить развитие схемы GraphQl?
Редактор графов Является поддерживающим инструментом для пользователей Advanced GraphQL, а также те, кто принимает свои первые шаги с APICQL API. Наша общая среда разработки для GraphQL поможет вам построить, управлять и развертывать ваш API GraphQl намного быстрее. Попробуйте редактор GraphQl бесплатно!
Оригинал: “https://dev.to/graphqleditor/angular-directives-the-most-used-units-in-angular-5eip”