Обзор архитектуры

Angular - это современная платформа для создания клиентских приложений в HTML и Typescripts. Это было написано на TypeScript. Его функциональность определяется набором библиотек TypeScript, которые вы импортируете в приложение.

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

Некоторые ключевые моменты, на которые следует обратить внимание в Angular:

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

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

• В компоненте метаданные определяют представление шаблона. Шаблон представляет собой комбинацию HTML и Angular Directives и, вероятно, с некоторыми обязательными разметками, которые позволяют angular изменять HTML перед его отображением.
• В метаданных класса обслуживания предоставляется информация, которую Angular необходимо отправить компонентам посредством внедрения зависимостей (DI)

Представление приложения обычно представляет собой набор компонентов, расположенных иерархически от верхнего до нижнего колонтитула. Angular поставляется в комплекте с сервисом Router, который помогает в определении путей навигации между видами

модуль

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

Каждое приложение Angular имеет корневой модуль, условно называемый AppModule, который обеспечивает механизм начальной загрузки, запускающий приложение. Angular Application обычно состоит из наборов функциональных модулей.

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

Тщательно организуя наши приложения в модули, можно легко реализовать некоторые функции, такие как отложенная загрузка.

Компоненты

Приложение Angular должно иметь как минимум один компонент, корневой компонент, который связывает иерархию компонентов с объектной моделью документа страницы (DOM). Компонент Angular состоит из класса данных и логики приложения, а также шаблона HTML, который определяет представление, отображаемое в целевой среде.

Шаблоны, директивы и привязка данных:

Шаблон представляет собой комбинацию разметки HTML и Angular. Угловые разметки можно использовать для изменения элементов HTML перед их отображением.

Шаблонные директивы обеспечивают логику программы, а разметка привязки соединяет данные вашего приложения и DOM. Существует два типа привязки данных:

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

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

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

Функция трубопровода также может быть использована для улучшения пользовательского опыта приложения Angular. С трубами, даты и валюта могут отображаться в зависимости от местоположения пользователя.

Услуги и внедрение зависимости

Если данные или логика не связаны с конкретным представлением и вы хотите предоставить общий доступ к компонентам, может быть создан класс обслуживания. Определению класса обслуживания непосредственно предшествует декоратор @Injectable (). Декоратор предоставляет метаданные, которые позволяют вашему сервису внедряться в клиентские компоненты в качестве зависимости.

Внедрение зависимостей (DI) позволяет вам сохранять классы компонентов эффективными и эффективными. Они не получают данные с сервера, не проверяют вводимые пользователем данные и не регистрируются непосредственно на консоли; они делегируют такие задачи службам.

маршрутизация

Angular Router NgModule предоставляет сервис, который позволяет вам определять путь навигации между различными состояниями приложения и просматривать иерархии в вашем приложении. Он смоделирован по привычным правилам навигации браузера:

• Введите URL-адрес в адресной строке, и браузер перейдет на соответствующую страницу.
• Нажмите на ссылку на странице, и браузер перейдет на новую страницу.
• Нажимайте кнопки браузера «назад» и «вперед», и браузер перемещается назад и вперед по истории страниц, которые вы видели.

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

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

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

Чтобы определить правила навигации, вы связываете пути навигации с вашими компонентами. Путь использует URL-подобный синтаксис, который интегрирует данные вашей программы, почти так же, как синтаксис шаблона объединяет ваши представления с данными вашей программы. Затем вы можете применить программную логику, чтобы выбрать, какие представления показывать или скрывать в ответ на ввод пользователя и ваши собственные правила доступа.

обзор

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

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

Предыдущая: Угловая рабочая область и структура файла проекта
Далее: Введение в сервисы и внедрение зависимостей