Angular 9 для начинающих – компоненты и интерполяция строк

1656201850 angular 9 dlya nachinayushhih – komponenty i interpolyacziya strok

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

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

Если хотите, вы также можете просмотреть видеоверсию:

Что такое компонент?

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

Компонент Angular состоит из 3 основных частей:

  • Шаблон HTML — просмотр
  • Файл TypeScript – модель
  • CSS — Стиль

Зачем нам нужные компоненты?

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

Еще одна важная причина состоит в том, что компоненты делят код на меньшие части, которые можно использовать повторно. Иначе нам придется включать нескончаемые строки кода в один файл HTML, что значительно усложняет поддержку кода.

Создание нашего первого углового компонента

Теперь создадим наш первый компонент. Краткий способ создать компонент – это использовать Angular CLI:

ng g c component-name
g: генерировать, c: компонент

Эта команда создает совершенно новый компонент с собственными файлами (HTML, CSS и TypeScript) и автоматически регистрирует его в модуле программы:

Экран-Ресми-2020-04-29-10.59.14
Модуль программы

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

Теперь давайте подробнее рассмотрим модель компонента (файл компонента TypeScript):

Экран-Ресми-2020-04-29-10.57.59
Внутри компонента программы

На самом деле это класс TypeScript, но определить его как компонент:

  • Прежде всего, нам нужно импортировать Компонент от @angular/core библиотеку, поэтому мы можем использовать декоратор компонентов
  • The @Component decorator обозначает класс как компонент и позволяет нам добавить следующие метаданные
  • The селектор предназначен для того, чтобы позже вызвать компонент как тег HTML: <app-root> </app-root>
  • TemplateUrl – это путь, где находится HTML-представление компонента.
  • СURL-адреса типов (может быть больше 1) – это местоположение файлов стилей компонента.
  • Наконец-то мы экспорт класс (компонент), чтобы мы могли вызвать его внутри app.module или в других местах проекта позже.

Что такое интерполирование строк?

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

Мы используем фигурные скобки внутри других фигурных скобок для воспроизведения динамических данных: {{ data }} и это представление называется интерполированием строки. Вы можете увидеть пример в видеоверсии выше.

Завершите

Один из самых больших шагов в обучении Angular – это знать, как создавать компоненты и эффективно их использовать. Надеюсь, этот пост будет вам полезен. В следующей части мы рассмотрим директивы Angular, такие как ng-if, ng-for, ng-class и т.д. Следите за обновлениями 🙂

Если вы хотите узнать больше о веб-разработке, смело следите за мной на Youtube!

Спасибо, что читаете!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *