Angular 6 - Ускоренный курс MEAN Stack - Часть 1: Настройка и маршрутизация внешнего интерфейса проекта

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Подпишитесь на YouTube | Живая демонстрация | Код на GitHub

Создание приложения Angular 6 CRUD с нуля с помощью MongoDB, Express, Node.js и пользовательского интерфейса Material Design

Термин стек MEAN относится к набору технологий на основе JavaScript, используемых для разработки веб-приложений. MEAN - это аббревиатура от MongoDB, ExpressJS, Angular и Node.js.

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

Если вам нравится CodingTheSmartWay, подумайте о поддержке нас через Patreon. С вашей помощью мы сможем чаще выпускать руководства для разработчиков. Большое спасибо! Станьте покровителем!

Из этой серии вы узнаете:

Как настроить и реализовать интерфейсное веб-приложение с помощью Angular 6
Использование Angular Material для реализации пользовательского интерфейса на основе материального дизайна
Настройка и запуск MongoDB
Реализация внутреннего API с помощью Node.js и Express.js
Подключите внутренний сервер к базе данных MongoDB
Используйте Postman для тестирования серверного API
Подключение шрифтового приложения Angular 6 к серверной части Node.js

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

Ниже вы можете увидеть основные строительные блоки приложения стека MEAN:

Что мы собираемся построить в этой серии

Мы собираемся создать приложение для отслеживания проблем. На этой стартовой странице вы увидите список уже созданных записей о проблемах:

С помощью кнопки Создать новую проблему вы можете перейти к следующему виду:

Ввод данных и нажатие кнопки Сохранить создает новую запись о проблеме и возвращает вас к просмотру списка. В представлении списка вы также можете выбрать Удалить или Изменить существующие элементы задачи:

Данные о проблемах хранятся в базе данных MongoDB и доступны через API сервера Node.js / Express.js.

Установка Node.js и Angular CLI

Сначала нам нужно убедиться, что в системе установлены Node.js и Angular CLI. Чтобы установить Node.js, вам необходимо перейти на веб-сайт проекта по адресу https://nodejs.org/, найти и загрузить установщик для своей платформы и выполнить установку, запустив установщик.

При установке Node.js в вашу систему одновременно устанавливается Node Package Manager (NPM). В этом руководстве мы будем использовать NPM для установки зависимостей в наших проектах и установки Angular CLI на следующих этапах.

Angular CLI позволяет легко инициировать новый проект и устанавливается с помощью NPM следующим образом:

$ npm install -g @angular/cli

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

Настройка проекта Angular 6 с помощью Angular CLI

В нашем приложении стека MEAN Angular 6 используется для реализации одностраничного веб-приложения со шрифтами. Давайте воспользуемся ранее установленным Angular CLI для настройки нового проекта Angular CLI:

$ ng new frontend

Эта команда создает новую папку frontend, загружает шаблон приложения Angular по умолчанию и обеспечивает установку всех зависимостей. Успешно выполнив эту команду, вы можете теперь войти в каталог

$ cd frontend

и запустите веб-сервер разработки с помощью следующей команды:

$ ng serve --open

Эта команда должна открыть приложение Angular в браузере, и вы должны увидеть следующий результат:

Добавление углового материала

С выпуском Angular 6 стала доступна новая команда ng add, которая упрощает добавление новых возможностей в проект. Эта команда будет использовать диспетчер пакетов для загрузки новых зависимостей и вызова соответствующих сценариев установки. Это обеспечивает обновление проекта зависимостями, изменениями конфигурации и выполнение кода инициализации для конкретного пакета.

Далее мы будем использовать команду ng add, чтобы добавить Angular Material в ранее созданное приложение Angular 6:

$ ng add @angular/material

Теперь мы готовы использовать Angular Material в нашем интерфейсном проекте.

Создание компонентов

Теперь давайте создадим три новых компонента в нашем приложении Angular 6. Мы снова используем Angular CLI:

$ ng g c components/list

$ ng g c components/create

$ ng g c components/edit

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

Добавление маршрутизации

Чтобы настроить маршрутизацию, нам сначала нужно импортировать RouterModule и Routes из пакета @ angular / router в app.module.ts :

import { RouterModule, Routes } from '@angular/router';

Затем давайте добавим конфигурацию маршрутизации в виде массива Routes:

const routes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/list', pathMatch: 'full'}
];

Каждый объект Routes состоит из двух свойств: path и component. Это подключение расширения URL (например, «create») к компоненту (CreateComponent). Кроме того, настраивается перенаправление с маршрута приложения по умолчанию на маршрут, отображающий содержимое из ListComponent.

Чтобы активировать конфигурацию маршрутизации для нашего приложения Angular, вам необходимо обязательно добавить следующее в массив, который назначен свойству imports декоратора @NgModule:

imports: [
    ...
    RouterModule.forRoot(routes)
  ],

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

В зависимости от запрашиваемого маршрута приложения содержимое подключенного компонента должно быть частью вывода. Точное место, куда следует вставить содержимое этого компонента, отмечено элементом ‹router-outlet›. Вставьте этот элемент в app.component.html:

<mat-toolbar>
  <span>Angular 6 - MEAN Stack Sample Application</span>
</mat-toolbar>
<div>
  <router-outlet></router-outlet>
</div>

Обратите внимание, что мы используем первый компонент из библиотеки материалов Angular: MatToolbar. Чтобы иметь возможность использовать здесь элемент ‹mat-toolbar›, нам нужно добавить еще один оператор импорта в app.module.ts:

import { MatToolbarModule } from '@angular/material';

Также добавьте MatToolbarModule в массив импорта:

imports: [
    ...
    MatToolbarModule
 ],

Что дальше

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

В следующей части этой серии мы продолжим реализацию приложения стека MEAN. Поэтому внутренний проект будет настроен с использованием MongoDB, Node.js и Express.js.

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Angular и NodeJS №1 - Руководство по стеку MEAN

Узнайте, как подключить ваш Angular Frontend к Backend NodeJS, Express и MongoDB, создав реальное приложение
Go To Course…

# 2 Angular 6 - Полное руководство

Осваивайте Angular (Angular 2+, включая Angular 6) и создавайте потрясающие, реактивные веб-приложения с преемником Angular.js
Go To Course…

Отказ от ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!

Angular 6 - Ускоренный курс MEAN Stack - Часть 1: Настройка и маршрутизация внешнего интерфейса проекта