- Архитектура угловых приложений Angular - это фреймворк, предназначенный для создания одностраничных...
- Угловые компоненты
- Угловые строительные блоки: шаблоны
- Угловые строительные блоки: Услуги
- Угловые строительные блоки: Другие ресурсы
Архитектура угловых приложений
Angular - это фреймворк, предназначенный для создания одностраничных приложений (SPA), и большая часть его архитектуры направлена на то, чтобы сделать это эффективным образом.
Одностраничное приложение (или SPA) - это приложения, доступ к которым осуществляется через веб-браузер, как и другие веб-сайты, но предлагающие более динамичные взаимодействия, напоминающие родные мобильные и настольные приложения. Наиболее заметная разница между обычным веб-сайтом и SPA заключается в уменьшении количества обновлений страниц.
Как правило, 95 процентов кода SPA выполняется в браузере; остальное работает на сервере, когда пользователю нужны новые данные или он должен выполнять защищенные операции, такие как аутентификация.
В результате процесс рендеринга страниц происходит в основном на стороне клиента.
Угловые Модули
Модули помогают организовать приложение в единые функциональные блоки, заключая в себе компоненты, каналы, директивы и сервисы. Они просто все об эргономике разработчика.
Угловые приложения являются модульными. Каждое приложение Angular имеет как минимум один модуль - корневой модуль, условно называемый AppModule. Корневой модуль может быть единственным модулем в небольшом приложении, но большинство приложений имеют гораздо больше модулей. Как разработчик, вам решать, как использовать модули. Как правило, вы отображаете основные функции или функции в модуль. Допустим, у вас есть четыре основных направления в вашей системе. Каждый из них будет иметь свой собственный модуль в дополнение к корневому модулю, всего пять модулей.
Любой угловой модуль - это класс с декоратором @NgModule. Декораторы - это функции, которые модифицируют классы JavaScript. Они в основном используются для присоединения метаданных к классам, чтобы они знали конфигурацию этих классов и то, как они должны работать. Свойства декоратора @NgModule, которые описывают модуль:
- объявления: классы, которые принадлежат этому модулю и связаны с представлениями. В Angular есть три класса, которые могут содержать представления: компоненты, директивы и каналы.
- экспорт: классы, которые должны быть доступны для других компонентов модулей.
- import: Модули, классы которых нужны компонентам этого модуля.
- провайдеры: услуги, присутствующие в одном из модулей, которые будут использоваться в других модулях или компонентах. Как только услуга включена в поставщики, она становится доступной во всех частях этого приложения.
- bootstrap: корневой компонент, который является основным видом приложения. Только корневой модуль имеет это свойство, и оно указывает на компонент, который будет загружен.
- entryComponents: Компонент entry - это любой компонент, который Angular принудительно загружает (что означает, что вы не ссылаетесь на него в шаблоне) по типу.
Угловые компоненты
Компоненты являются самым основным строительным блоком пользовательского интерфейса и приложений Angular. Компонент контролирует один или несколько разделов на экране (то, что мы называем представлениями). Например, в этом примере у нас есть такие компоненты, как AppComponent (загруженный компонент), CategoriesComponent, CategoryQuestionsComponent, QuestionAnswersComponent и т. Д.
Компонент самодостаточен и представляет собой многократно используемый элемент пользовательского интерфейса, который обычно состоит из трех важных вещей:
- Кусок HTML-кода, который известен как представление
- Класс, который инкапсулирует все доступные данные и взаимодействия с этим представлением через API свойств и методов, спроектированных Angular. Здесь мы определяем логику приложения (что оно делает для поддержки представления)
- И вышеупомянутый элемент HTML, также известный как селектор.
Используя Angular @Component decorator, мы предоставляем дополнительные метаданные, которые определяют, как компонент должен обрабатываться, создаваться и использоваться во время выполнения. Например, мы устанавливаем HTML-шаблон, связанный с представлением, затем мы устанавливаем HTML-селектор, который мы будем использовать для этого компонента, мы устанавливаем таблицы стилей для этого компонента.
Компонент передает данные в представление, используя процесс, называемый Data Binding. Это делается путем привязки элементов DOM к свойствам компонента. Привязка может использоваться для отображения значений свойств для пользователя, изменения стилей элемента, ответа на пользовательское событие и т. Д.
Компонент должен принадлежать модулю NgModule, чтобы его мог использовать другой компонент или приложение. Чтобы указать, что компонент является членом NgModule, вы должны указать его в свойстве объявлений этого NgModule.
Одно замечание о важности компонентов с точки зрения принципов архитектуры программного обеспечения: это очень важно и рекомендуется иметь отдельные компоненты, и вот почему. Представьте, что у нас есть два разных блока пользовательского интерфейса в одном компоненте и в одном файле. В начале они могут быть маленькими, но каждый может расти. Мы обязательно получим новые требования для одного, а не для другого. Однако каждое изменение подвергает риску оба компонента и удваивает нагрузку на тестирование без каких-либо преимуществ. Если бы нам пришлось повторно использовать некоторые из этих блоков пользовательского интерфейса в другом месте нашего приложения, другой был бы склеен.
Этот сценарий нарушает Принцип единой ответственности , Вы можете подумать, что это всего лишь учебник, но нам нужно делать все правильно - особенно если делать это правильно легко, и мы учимся создавать приложения Angular в процессе.
Angular поддерживает этот принцип, контролируя каждый патч страницы своим собственным компонентом.
Типичное приложение Angular выглядит как дерево компонентов. Следующая диаграмма иллюстрирует эту концепцию. Обратите внимание, что модальные компоненты находятся на стороне родительского компонента, поскольку они являются обязательными компонентами, которые не объявлены в html-шаблоне компонента.
Угловые строительные блоки: шаблоны
Шаблоны используются для определения вида компонента. Шаблон выглядит как обычный HTML, но он также имеет некоторые отличия. Код наподобие * ngFor, {{hero.name}}, (click) и [hero] использует Angular синтаксис шаблона расширить возможности разметки HTML. Шаблоны могут также включать пользовательские компоненты, такие как <custom-element>, в виде нестандартных HTML-тегов. Эти компоненты легко смешиваются с нативным HTML в тех же макетах.
Угловые строительные блоки: Услуги
Почти все может быть службой, любым значением, функцией или функцией, которая нужна вашему приложению. Служба обычно представляет собой класс с узкой, четко определенной целью. Он должен делать что-то конкретное и делать это хорошо. Основной целью Angular Services является совместное использование ресурсов между компонентами.
Возьмите классы Компонента, они должны быть простыми, работа компонента состоит в том, чтобы обеспечить взаимодействие с пользователем (посредник между представлением и логикой приложения) и ничего более. Они не получают данные с сервера, не проверяют вводимые пользователем данные и не регистрируются непосредственно на консоли. Они делегируют такие задачи и все нетривиальное сервисам.
Сервисы являются основополагающими для любого приложения Angular, а компоненты являются крупными потребителями сервисов, поскольку помогают им быть экономными.
Сценарий, который мы только что описали, имеет много общего с Разделение проблем принцип. Angular не применяет эти принципы, но помогает вам следовать этим принципам, упрощая структурирование логики приложения в сервисы и делая эти сервисы доступными для компонентов посредством внедрения зависимостей.
В нашем примере приложения у нас есть три службы: Служба ответов, Служба вопросов, Служба категорий. У каждого из них есть только функции, связанные с ними. В этом конкретном руководстве мы сосредоточимся только на CategoriesService, а в следующих частях мы обсудим остальные.
CategoriesService имеет следующие методы:
// получает все категории вопросов из локального json getCategories () {return this.http.get ("./ assets / Categories.json") .map ((res: any) => res.json ()) .toPromise (); } // находит определенную категорию по slug getCategoryBySlug (slug: string) {return this.getCategories () .then (data => {return data.categories.find ((category) => {return category.slug == slug; });})}
Угловые строительные блоки: Другие ресурсы
Внешние ресурсы, такие как базы данных, API и т. Д., Являются основополагающими, поскольку они позволяют нашему приложению взаимодействовать с внешним миром.
Существует гораздо больше информации об основных строительных блоках Angular-приложений, таких как внедрение зависимостей, привязка данных, директивы и т. Д. Вы можете найти эти и многие другие сведения в нашей следующей статье «Angular: путь обучения».
Теперь давайте углубимся и сопоставим структуру проекта с архитектурой приложения, чтобы мы могли лучше понять, как все части взаимодействуют друг с другом.
