В серии постов мы собираемся описать архитектуру ядра angular и microsoft asp.net MVC и то, как они могут работать вместе. В первой части мы подробно рассмотрим архитектуру angular и специально объясним, что такое компонент angular и как вы можете использовать его для создания отличного внешнего интерфейса (в другом посте мы будет описывать другие угловые артефакты, такие как служба, директива, канал, маршрутизация и т. д...), во второй части мы создадим полную угловую боковую часть. нашего проекта мы увидим, как объединить дерево компонентов angular, чтобы сделать наше приложение, третья частьбудет посвящена архитектуре asp.net MVC core 3, особенно функциям промежуточного программного обеспечения, чтобы мы можно увидеть, как angular загружается в конвейере ядра asp.net и как использовать структуру сущности ядра dotnet для взаимодействия с нашей базой данных и передачи данных на сторону внешнего интерфейса angular (ядро dotnet — отличная тема, и мы не можем охватить в этой серии все asp.net проблем с MVC), в последней части этой серии мы увидим, как использовать mongodb для размещения наших данных, а также n мы поместим наше настенное решение в контейнер Docker и развернем его в решении Microsoft Azure PAAS, таком как:Служба приложений Azure (внутри Docker Swarm или с помощью Docker Compose), экземпляр контейнера Azure и служба Azure Kubernetes.
Приложение, которое мы будем создавать, представляет собой симуляцию решения для мониторинга Azure, где мы создадим настраиваемую панель мониторинга для управления нашим центром обработки данных, передняя часть будет использовать фреймворк angular, а внутренняя часть будет основана на asp.net MVC core 3, как вы можете. см. на изображении ниже:
Что нужно сделать, чтобы подписаться и завершить этот пост?
Для тех, кто хочет просто следовать угловой стороне этой серии, просто установите угловой артефакт, потому что в первой части мы создадим полную версию проекта только с угловой клиентской технологией, но если вы хотите следуйте всем сообщениям в этой серии, просто продолжайте и установите все инструменты в следующих строках.
- Инструменты и среда выполнения .NET Core: Комплект разработки программного обеспечения .NET Core включает в себя среду выполнения и инструменты разработки, необходимые для запуска проекта разработки и выполнения операций с базой данных: загрузите его отсюда, после установки, запустите командную строку Windows и выполните следующую команду
dotnet --version
из приведенной ниже команды, если установка пройдет успешно, вы получите версию dotnet core framework, установленную на вашем компьютере.
2. Среда выполнения nodejs. Node.js — это среда выполнения для серверных приложений JavaScript, которая стала популярной платформой для
инструментов разработки. В этом посте Node.js используется инструментами сборки Angular для компиляции и подготовки кода, который ASP.NET Core MVC отправит в браузер. Для его установки скачайте и запустите исполняемый файл отсюда.
После установки среды выполнения nodejs из командной строки выполните следующую команду
node --version or node -v
3. Контроль версий Git: мы будем использовать контроль версий git для функции DevOps в этом посте, поэтому загрузите контроль версий git здесь. Как и раньше, просто запустите следующую команду, чтобы проверить, успешно ли установился git.
git --version
Эта команда выводит версию установленного пакета Git, как показано на изображении ниже.
4. Visual Studio : для разработчиков из сообщества .net Visual Studio является предпочтительной средой разработки. Она предлагает полнофункциональные возможности разработки, но может требовать больших ресурсов. Рассмотрите возможность использования кода Visual Studio, описанного в следующем разделе, если вам нужен более легкий опыт разработки, но его также можно использовать только для разработки угловых шрифтов, поэтому загрузите выпуск сообщества Visual Studio 2019 отсюда. » , Запустите программу установки и убедитесь, что выбрана рабочая нагрузка ASP.NET и веб-разработка, как показано на изображении ниже.
5. Visual Studio Code: Visual Studio Code — это легкий редактор, в котором нет всех функций полноценного продукта Visual Studio. однако он работает на разных платформах и отлично справляется с разработкой ASP.NET Core и Angular, и я могу использовать его в этом руководстве. Загрузите и установите код Visual Studio здесь
6. Локальная БД сервера Sql: не забудьте также установить sql sever localdb, так как мы будем использовать его для части интеграции Entity framework, вы можете скачать его здесь
Я полагал, что у вас уже есть докер, установленный на вашем локальном компьютере, если нет, проверьте этот пост или этот пост.
что такое Angular?
Angular — это современная платформа веб-приложений, которая обещает предоставить разработчикам полный набор инструментов и возможностей для создания больших и надежных приложений. Основная ценность Angular заключается в том, чтобы сделать возможным создание приложений, которые работают практически на любой платформе — будь то мобильная, веб- или настольная. Команда Angular сосредоточилась на создании гораздо большего, чем надежная структура приложения; они также построили целую экосистему. Таким образом, angular — это не просто структура, такая как VUEJS или REACT, и не простая библиотека, такая как REACT или другая библиотека javascript, но это полноценная платформа, поскольку она поставляется со многими инструментами разработки и может использоваться для многих целей. Тип заявления. В этом посте мы не будем обсуждать преимущества и недостатки angular, а также сравнение angular VS React VS VUE, потому что в Интернете есть много тем на эту тему, и я предполагаю, что если вы здесь чтобы прочитать этот пост, это потому, что вы решили использовать angular в качестве разработки технологии внешнего интерфейса.
Как описано выше, чтобы начать разработку angular, нам нужно установить инструменты angular, я надеюсь, что вы следите за этим постом с самого начала и уже установили nodejs, потому что для установки инструментов angular нам нужно управление пакетами nodejs (NPM ), поэтому откройте командную строку и выполните следующую команду:
npm install --global @angular/cli@8.1.2
Приведенная выше команда установит Angular CLI (часто называемый просто CLI) — официальный набор инструментов для создания приложений Angular, которые предоставляют эти функции и многое другое. В этом посте CLI используется для всех примеров, и вам также рекомендуется использовать его для своих проектов. Вы можете использовать свои собственные инструменты сборки, но это предлагается только в том случае, если CLI не соответствует вашим потребностям (я использую версию angular 8.1.2).
ng -v
Запустите приведенную выше команду, чтобы проверить, успешно ли был установлен инструмент angular cli, вы получите изображение ниже (ng — это команда angular cli)
CLI имеет ряд функций, которые помогают в разработке приложений Angular. Вот основные особенности:
Создает каркас нового проекта. – вместо того, чтобы создавать новый проект из существующего или создавать все файлы самостоятельно, интерфейс командной строки создаст полный проект с базовым приложением. запущен для вас.
Создает новые части приложения— Нужен новый компонент? Легкий; он может генерировать файлы для вас. Он может создавать компоненты, службы, маршруты и каналы, а также автоматически обеспечивает их полное подключение в процессе сборки.
Управляет всей цепочкой инструментов сборки — поскольку файлы должны быть обработаны перед передачей клиенту (например, компиляция TypeScript), интерфейс командной строки обработает ваши исходные файлы и создаст из них оптимизированную версию для разработки или производства.
Обслуживает локальный сервер разработки — интерфейс командной строки обрабатывает поток сборки, а затем запускает сервер, прослушивающий локальный хост, чтобы вы могли видеть результаты, с функция перезагрузки в реальном времени.
Включает проверку кода и форматирование кода – помогает обеспечить качество кода, используя интерфейс командной строки для проверки кода на наличие стилевых и семантических ошибок, а также может помочь автоматически отформатировать код в соответствии с style rules.
Поддерживает выполнение модульных и e2e-тестов. Тесты жизненно важны, поэтому интерфейс командной строки настраивает Karma для запуска ваших модульных тестов и работает с Protractor для выполнения ваших e2e-тестов. Он будет автоматически подбирать и выполнять новые тесты по мере их создания.
Чтобы увидеть полный список функций, выполните команду ниже:
ng help
вы также можете прочитать больше из онлайн-документации angular cli здесь
Архитектура компонентов Angular
Во многих отношениях компонент — это способ создания пользовательских элементов HTML в приложении
. Многие современные приложения используют компонентный подход к разработке приложений. Намерение состоит в том, чтобы спроектировать каждую часть вашего приложения в автономном режиме, что ограничивает количество взаимосвязей и дублирования в различных частях программы. Компоненты настолько важны для структуры приложений Angular, что
почти каждая функция так или иначе связана с ними. В конце концов, невозможно сделать приложение Angular без компонента. Это означает, что возможность использовать возможности компонентов жизненно важна для любого углового разработчика.
Компонент включает шаблон, представляющий собой HTML-разметку, используемую для описания его визуального макета и поведения. Компонент также создает представление, которое представляет собой результат визуализации компонента, с которым пользователь может взаимодействовать, и состоит из визуализации шаблона компонента. Шаблоны могут включать ссылки на другие компоненты, которые также будут
отображать их как часть визуализации родительского компонента.
давайте на минутку сосредоточимся на приложении, которое мы создаем в этом посте, чтобы увидеть, как мы организовали нашу базу проекта angular на стороне интерфейса с компонентной архитектурой.
Как видно из изображения, angular — это просто огромное дерево компонентов, которые объединились для создания углового приложения. Коммуникация основана на обнаружении изменений углового движка, и все компоненты могут быть изолированы и инкапсулированы на базе «shadow dom».
Пошаговое создание проекта Angular
Запустите следующую команду, чтобы создать скелет нашего проекта (команда ниже будет выполняться в одной строке):
ng new AzureDataCenterMonitoring --directory AzureDataCenterMonitoring/ClientApp --routing true --style css --skip-tests true --skip-git true
Команда ng предоставляется пакетом @angular/cli, а ng new создает новый проект Angular. Проект называется AzureDataCenterMonitoring, а аргумент — каталог указывает расположение файлов проекта. Имя папки ClientApp обычно используется при использовании платформы веб-приложений в
проекте ASP.NET Core MVC. Аргументы —routing и —style настраивают проект на использование маршрутизации URL-адресов для навигации и обычных файлов CSS для стилизации HTML-элементов. Аргументы —skipTests и — skipGit создают проект
без модульных тестов и без настройки исходного кода Git (мы интегрируем git в следующем посте). В процессе установки вы можете увидеть сообщения о том, что необязательные зависимости были пропущены. Это нормально и может быть проигнорировано. После завершения настройки создается папка с именем
AzureDataCenterMonitoring/ClientApp, содержащая инструменты и файлы конфигурации для проекта Angular, а также некоторый замещающий код, помогающий ускорить разработку и проверьте, работают ли средства разработки.
Теперь вы можете открыть проект в коде Visual Studio, написав следующую команду
code .
это откроет код Visual Studio с нашим сгенерированным проектом, как на этом изображении:
Если вы используете Visual Studio, выберите параметр «Открыть локальную папку» при запуске Visual Studio (или выберите «Файл» ➤ «Открыть» ➤ «Папка», когда Visual Studio уже запущена) и выберите параметр AzureDataCenterMonitoring. > папка.
Вы можете запустить проект сейчас, выполнив приведенную ниже команду (прежде чем вам придется перемещаться внутри каталога clientApp из командной строки, вы также можете сделать это непосредственно в коде Visual Studio, открыв команду терминала из меню Терминал ➤ новый терминал):
ng serve --port 5200 -o or just run npm start
Команда говорит angular собрать приложение и запустить его на локальном http-сервере через порт 5200, это откроет браузер со следующей страницей:
Структура сгенерированного проекта поясняется ниже.
Как работает набор инструментов angular?
В разработке Angular используются три важных инструмента. Первый инструмент — это компилятор TypeScript, который отвечает за компиляцию кода TypeScript в JavaScript, который может выполняться веб-браузером.
Второй инструмент — webpack. Компилятор TypeScript создает файл JavaScript для каждого исходного файла TypeScript, который он компилирует. Это неудобный способ распространения веб-приложений, потому что каждый файл должен запрашиваться браузером, что приводит к серии HTTP-запросов для небольших файлов кода. Вместо этого
отдельные файлы JavaScript объединяются в пакеты, что позволяет доставлять приложение в браузер с помощью меньшего количества HTTP-запросов. Пакеты в проекте Angular создаются с помощью webpack, который является
самым популярным пакетом для разработки веб-приложений, независимо от используемой платформы (например, webpack также используется в разработке React и Vue.js). Выходные данные команды npm start или ng serve показывают пакеты, которые webpack создает для примера проекта (вы можете увидеть это на изображении кода Visual Studio выше). Это
пакеты, которые будут содержать все приложения Angular:
main.js Этот пакет содержит код и содержимое приложения.
polyfills.js Этот пакет содержит код, обеспечивающий поддержку современных функций JavaScript в старых браузерах. Содержимое этого пакета настраивается с помощью файла ClientApp/src/polyfills.ts.
runtime.jsЭтот пакет включает код JavaScript, необходимый для загрузки и распаковки других файлов пакета.
styles.js Сборщик включает в этот пакет таблицы стилей CSS приложения, выраженные в виде строк JavaScript. В комплект также входит код JavaScript, который обрабатывает закодированные строки и использует CSS API браузера для добавления стилей в HTML-документ.
vendor.jsЭтот пакет содержит среду выполнения Angular, которая отвечает за обработку содержимого пакета main.js и представление приложения пользователю.
Третьим важным инструментом в разработке Angular является Сервер разработки Webpack (WDS), который предоставляет HTTP-сервер, доставляющий приложение в браузер. Во время разработки пакеты, доставленные в браузер, содержат дополнительный код JavaScript, который открывает обратное соединение с сервером и ожидает сигнала. При обнаружении изменения в файлах проекта для компиляции кода используется компилятор TypeScript, создается новый набор пакетов, и в браузер отправляется сигнал для запуска перезагрузки, что гарантирует немедленное отражение эффекта изменений. . На изображении ниже показана полная цепочка инструментов:
Жизненный цикл компонента Angular
У компонентов есть жизненный цикл, который начинается с их первоначального создания и продолжается их рендерингом до тех пор, пока они не будут уничтожены и удалены из приложения.
Прежде чем мы сможем понять жизненный цикл, мы должны более внимательно изучить, что входит в состав компонента. Состав компонентов важно со временем освоить, чтобы создавать более сложные и эффективные приложения Angular.
Компоненты состоят из нескольких отдельных частей, которые объединяются для создания пользовательского интерфейса.
Откройте файл src/app/app.component.ts, как показано на изображении ниже.
Когда мы создаем компонент с помощью CLI, он создает набор файлов, содержащих активы, которые объединяются во время рендеринга. Вот список основных вещей, из которых состоит компонент:
Декоратор метаданных компонента — все компоненты должны быть снабжены аннотациями с помощью декоратора @Component(), чтобы правильно зарегистрировать компонент в Angular. Метаданные содержат множество свойств, помогающих изменить способ поведения или отображения компонента.
Контроллер. Контроллер — это класс, украшенный @Component() и содержащий все свойства и методы компонента. Большая часть логики находится в контроллере.
Шаблон. Компонент не является компонентом без шаблона. Разметка для компонента определяет макет и содержимое пользовательского интерфейса, которое может видеть пользователь, а визуализированная версия шаблона будет просматривать значения из контроллера для привязки любых данных.
Вы можете просто видеть, что angular следует шаблону MVC (Model View Controller), или, как обычно говорят некоторые люди, его также можно рассматривать как шаблон MVVM (Model View ViewModel).
Эти три части должны существовать, чтобы любой компонент был действительным. Кроме того, есть некоторые дополнительные возможности, которые можно использовать вместе с компонентами для их улучшения в определенных ситуациях. Первые два — это концепции, которые вводят значения в компонент, а остальные — это концепции, которые изменяют результирующее поведение, внешний вид или взаимодействие компонента с другими компонентами:
- Поставщики и хосты. Службы могут внедряться непосредственно в компонент, если они еще не предоставлены на уровне корневого модуля. У вас также есть некоторый контроль над тем, как эти службы обнаруживаются и где они становятся доступными.
- Входные данные. Компоненты могут принимать данные, передаваемые им с помощью входных данных компонента, что позволяет родительскому компоненту связывать данные непосредственно с дочерним компонентом, что является способом передачи данных вниз по дереву компонентов. .
- Стили и инкапсуляция. При желании компоненты могут включать набор стилей CSS, предназначенных для применения только к компоненту. Это обеспечивает уровень инкапсуляции для проектирования компонентов, поскольку стили компонентов не нужно внедрять глобально. Компоненты могут настроить способ внедрения и инкапсуляции стилей в приложение.
- Анимации — Angular предоставляет библиотеку анимаций, которая упрощает стилизацию переходов компонентов и анимаций, подключаемых к шаблону, и может определять ключевые кадры или состояния анимации для переключения между ними.
- Выходные данные. Выходные данные — это свойства, связанные с событиями, которые можно использовать для прослушивания изменений данных или других событий, которые могут быть интересны родительскому компоненту, а также для обмена данными вверх по дереву компонентов. .
- Перехватчики жизненного цикла. Во время отрисовки и жизненного цикла компонента вы можете использовать различные перехватчики для запуска логики приложения. Например, вы можете запустить логику инициализации один раз во время создания экземпляра компонента и отключить логику во время уничтожения. Вы также можете использовать эти хуки для переноса данных в компонент, поэтому хуки жизненного цикла хорошо работают как с входными, так и с выходными данными.
Вы можете ознакомиться с полной документацией компонента angular здесь.
У компонентов есть жизненный цикл от создания до удаления, и понимание этого процесса поможет вам создавать качественные компоненты. Могут быть небольшие различия в том, как ведет себя жизненный цикл компонента, в зависимости от используемого инструментария сборки, но в большинстве случаев этим инструментом будет Angular CLI.
изображение ниже описывает жизненный цикл компонента angular:
Первым важным действием является регистрация компонента в модуле App. Обычно это происходит потому, что мы объявляем компонент как часть метаданных NgModule и это происходит во время начальной загрузки приложения, но компоненты также могут быть зарегистрированы динамически на лету позже во время работы приложения (см. код студии, где в app.module.ts app.component является начальной загрузкой, поскольку это уникальный и единственный компонент, сгенерированный инструментом angular cli).
Когда компонент регистрируется, он создает класс фабрики компонентов и сохраняет его для последующего использования. Затем в течение жизненного цикла приложения что-то будет запрашивать компонент. Обычно это происходит потому, что компонент был найден в шаблоне, и компилятору нужен компонент, но иногда компоненты также запрашиваются вручную. На этом этапе необходимо загрузить экземпляр компонента. Существует реестр компонентов
, принадлежащих модулю, и Angular будет искать рассматриваемый компонент и получать его фабрику компонентов, которая создается во время компиляции с использованием интерфейса командной строки перед запуском приложения. Этот специальный класс знает, как создать экземпляр нового экземпляра компонента. По мере создания экземпляра компонента считываются метаданные и запускается метод конструктора. Любая логика построения будет выполняться на ранних этапах жизненного цикла компонента, и вам следует
быть осторожным и не размещать ничего, что может зависеть от доступности дочерних компонентов, потому что шаблон еще не проанализирован.
Затем метаданные компонента будут полностью обработаны Angular, включая синтаксический анализ шаблона компонента, стилей и привязок. Если шаблон содержит какие-либо дочерние компоненты, они также запускают тот же жизненный цикл для этих компонентов, но они не блокируют продолжение визуализации этого компонента.
На этом этапе мы инициализировали компонент, и начинается цикл, в котором дочерние компоненты полностью визуализируются, состояние приложения изменяется, а компоненты обновляются. Во время этого цикла будут срабатывать хуки жизненного цикла, чтобы предупредить вас о важных моментах, когда вы будете знать, что определенные действия безопасны. Например, есть хук жизненного цикла, который позволяет узнать, когда какие-либо входные данные изменились; другой позволяет узнать, когда все дочерние компоненты полностью разрешены (на случай, если у вас есть логика, которая зависит от их запуска).
В какой-то момент компонент может больше не понадобиться в приложении. В этот момент Angular уничтожит компонент (и все его дочерние элементы). Любые новые экземпляры должны быть воссозданы из класса фабрики компонентов, как мы видели ранее.
Во время процесса рендеринга приложения и реакции на действия пользователя можно использовать различные хуки для запуска кода на разных контрольных точках. Эти хуки полезны, когда вам нужно знать, что определенные условия истинны перед выполнением кода, например, убедиться, что дочерние компоненты были инициализированы, или когда обнаружены изменения.
Angular будет запускать хук жизненного цикла только в том случае, если он определен в компоненте. Хуки жизненного цикла не похожи на прослушиватели событий — это специальные методы с определенными именами, которые вызываются в течение жизненного цикла компонента, если они определены.
Ниже приведен хук углового жизненного цикла:
OnChanges: срабатывает каждый раз, когда привязки ввода изменяются. Это даст вам объект (SimpleChange), который включает текущее и предыдущее значения, чтобы вы могли проверить, что изменилось. Это наиболее полезно для чтения изменений в значениях привязки.
OnInit: выполняется один раз после полной инициализации компонента (хотя
не обязательно, когда все дочерние компоненты готовы), то есть после
первого хука OnChanges. Это лучшее место для выполнения любого кода инициализации
, например для загрузки данных из API.
OnDestroy: до того, как компонент будет полностью удален, обработчик OnDestroy
позволяет вам запустить некоторую логику. Это наиболее полезно, если вам нужно прекратить
прослушивание входящих данных или сбросить таймер.
DoCheck: каждый раз, когда запускается обнаружение изменений, чтобы определить, нужно ли обновлять приложение, хук жизненного цикла DoCheck позволяет вам реализовать свой собственный тип обнаружения изменений.
AfterContentInit: когда какие-либо дочерние элементы контента полностью инициализированы, эта ловушка позволит вам выполнить любую первоначальную работу, необходимую для завершения настройки компонентов дочерних элементов контента, например, если вам нужно проверить, не кон-
переданная палатка была действительной или нет.
AfterContentChecked: каждый раз, когда Angular проверяет дочерние элементы контента, это может выполняться, чтобы вы могли реализовать дополнительную логику обнаружения изменений.
AfterViewInit: этот хук позволяет вам запускать логику после того, как все дочерние элементы представления были изначально отрисованы. Это позволяет узнать, когда все дерево компонентов полностью инициализировано и им можно манипулировать.
AfterViewChecked: когда Angular проверяет представление компонента и все дочерние элементы представления были проверены, вы можете реализовать дополнительную логику, чтобы определить
, произошли ли изменения.
Перехватчики OnInit, OnChanges и OnDestroy являются наиболее часто используемыми перехватчиками жизненного цикла. Хуки DoCheck, AfterContentChecked и AfterViewChecked наиболее полезны для отслеживания логики, которая должна выполняться во время любого процесса обнаружения изменений, и при необходимости реагировать. Перехватчики OnInit, AfterContentInit и AfterViewInit в первую очередь полезны для запуска логики во время первоначального рендеринга компонента для его настройки, и каждый из них обеспечивает различный уровень целостности компонента (например, готовность или если
дочерние компоненты также готов).
мы подошли к концу с этой первой частью основного поста angular и Asp.net MVC, в второй части мы создадим полный угловой побочный проект и объясним, как комбинировать компоненты (дерево компонентов ) для построения всего проекта. Просто делитесь, делитесь и делитесь.
