Angular — это фреймворк javascript, который используется для создания одностраничного веб-приложения. Это означает, что одно приложение имеет одну страницу для отображения всей информации в intex.html.
Угловая архитектура
Строительные блоки Angular Architecture:
- Модуль
- Компонент
- Шаблон
- Метаданные
- Привязка данных
- Услуги
- Директивы
- Внедрение зависимости
Модуль
Модули или NgModules в архитектуре angular — это механизм для создания компонентов, директив, сервисов и пайпов. Это помогает в создании приложений в сочетании с другими модулями.
@NgModule принимает объект метаданных, который обычно описывает способ компиляции шаблона компонента и создания инжектора во время выполнения.
Еще одна аналогия понимания модулей — это классы. В классах у нас есть публичные и приватные методы. общедоступные методы будут доступны из другой части кода. Пока реализация приватного метода скрыта. Точно так же модуль может экспортировать или скрывать компоненты, директивы, сервисы и пайпы. экспортированные компоненты используются другими компонентами, а те, которые не экспортируются, скрыты и будут использоваться внутри самого модуля.
Функция декоратора @NgModule, которая принимает один объект с указанными ниже свойствами.
import { NgModule } from '@angular/core';
@NgModule({
declarations: [...],
imports: [...],
exports: [...],
providers: [...],
bootstrap: [...]
})
Для декоратора NgModule требуется как минимум три импорта свойств, объявления и начальная загрузка.
экспорт: экспортированные компоненты, директивы, службы и каналы видны и могут использоваться в шаблоне компонента другого NgModule.
imports: другие модули, чьи экспортируемые классы нужны шаблонам компонентов, объявленным в этом свойстве Ngmodule.
declarations: здесь будут добавлены компоненты, директивы и пайпы, принадлежащие этому NgModule.
Поставщики: должны сделать службы и значения известными для внедрения зависимостей. Они добавляются в корневую область и становятся доступными во всех частях приложения.
Компонент
Вид экрана контролируется компонентом. по крайней мере один компонент всегда присутствует в каждом проекте angular, и это корневой компонент. Декоратор @component — это функция, которая принимает объект со свойствами selector, templateUrl, styleUrls и provider.
import { Component } from '@angular/core';@Component({ selector: ' ', templateUrl: ' ', styleUrls: [...] })
Шаблон
Шаблон — это форма HTML, которая сообщает Angular, как отображать компонент. который может изменять элементы перед отображением. Он также связывает данные приложения и DOM с помощью разметки привязки.
Метаданные
Метаданные в структуре компонента angular используются для украшения класса, чтобы он мог настроить ожидаемое поведение класса.
Привязка данных
Привязка данных — это механизм координации компонентов и шаблонов. Он устанавливает канал связи между частями HTML DOM (шаблон) с частями компонентов. Добавьте разметку привязки в HTML-шаблон, чтобы указать Angular, как соединить обе стороны.
Два типа привязки данных — это привязка событий и привязка свойств.
Привязка событий. используется, когда пользователь вводит данные, и вашему приложению необходимо отреагировать на них, обновив данные вашего приложения.
Привязка свойства: когда ваше приложение вычисляет некоторые значения на основе заданных данных, и вам необходимо отразить эти данные в HTML DOM.
Услуги
В angular службы — это часть кода или функций, которые доступны и могут повторно использоваться во многих других компонентах вашего приложения. Сервисы Angular — это объекты, которые вызываются только один раз за время существования приложения, а данные доступны на протяжении всего времени существования приложения.
Особенности угловых сервисов
Службы в angular — это классы машинописного текста с декоратором @injectable, который сообщает angular, что службы могут быть внедрены в компоненты, которым нужна эта служба. Они также могут внедрять другие службы в качестве зависимостей.
Создается только экземпляр службы, и один и тот же экземпляр используется каждым блоком приложения.
Директивы
Директивы — это атрибуты HTML, которые сообщают angular об изменении стилей или поведения элементов DOM. это в основном класс с декоратором @directive(). Различают следующие типы угловых директив.
Структурная директива. Они несут ответственность за изменение макета путем добавления, удаления и замены элементов в DOM.
Директива об атрибутах. Они отвечают за изменение поведения элементов DOM.
Директива компонента.Этот тип директив является наиболее распространенным типом директив. Он содержит информацию о том, как компоненты должны обрабатываться и использоваться во время выполнения. Он обозначается декоратором @component.
Внедрение зависимости
Зависимости — это службы или объекты, которые необходимы классу для выполнения его функций. Внедрение зависимостей или DI — это шаблон проектирования, в котором класс запрашивает зависимости от внешних ресурсов, а не создает их.
Чтобы определить класс как сервис в angular, используйте декоратор @injectable(), чтобы предоставить метаданные, которые позволяют angular внедрить его в компонент в качестве зависимости. Инжектор создает зависимости и поддерживает экземпляры зависимостей, которые можно повторно использовать на протяжении всего жизненного цикла приложения.
