MEAN стек: Добавляем Angular CLI к проекту

Стек MEAN включает четыре технологии: Node.js, Express.js, MongoDB и Angular. В предыдущих уроках мы использовали Node.js для создания сервера, Express.js для обработки URL-адресов и MongoDB для работы с базой данных. Теперь добавим Angular для создания интерфейса сайта.

Установка Angular CLI

Для работы с Angular установим Angular CLI. Выполните в терминале команду: npm install -g @angular/cli. Установка может занять некоторое время.

Возможные ошибки связаны с конфликтом версий. При ошибке, например, о невозможности перезаписать файл, удалите указанный в сообщении файл (например, angular-cli) и повторите установку. Система может запросить разрешение на отправку аналитики Google.

Создание Angular приложения

Создадим Angular приложение командой: ng new front-end. Имя приложения (front-end) можно изменить. Система задаст вопросы:

  • Добавить маршрутизацию? (y/n) – Рекомендуется «y».
  • Стиль CSS? (обычный CSS, Sass, Less, Stylus) – Выберем обычный CSS.

При проблемах запустите команду с правами администратора (например, добавив sudo).

Структура проекта

В созданной папке front-end (или с другим именем) находятся:

  • node_modules: зависимости.
  • .git: управление версиями Git.
  • Папка с настройками.
  • src: исходный код:
    • index.html: основной HTML-файл.
    • favicon.ico: иконка.
    • styles.css: стили.
    • app.component.*: файлы основного компонента (.ts, .html, .css, .spec.ts).

В файле angular.json настройте путь к выходным файлам (outputPath). По умолчанию это dist/front-end. Измените на public для размещения скомпилированных файлов в папке public, используемой для статических файлов проекта. Для сохранения изменений может потребоваться пароль.

Запуск приложения

Перейдите в папку front-end и запустите сервер командой ng serve. Приложение будет доступно по адресу localhost:4200. Стандартная страница Angular будет отображаться временно.

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

Создавайте компоненты командой ng generate component componentName. Например, ng generate component header. При недостатке прав используйте sudo. Компонент включает файлы: .ts, .html, .css, .spec.ts.

Создадим компонент header. Удалим содержимое app.component.html и добавим <app-header></app-header>. В header.component.html добавим <h1>Шапка сайта</h1>.

Подключение Bootstrap

Подключим Bootstrap. Добавьте ссылку на CDN-версию Bootstrap (с сайта getbootstrap.com) в <head> файла index.html.

Заменим содержимое header.component.html на шаблон Bootstrap, добавим текст и ссылки на страницы входа и регистрации, а также стили Bootstrap.

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

Импортируем необходимые модули и классы в app.module.ts. Создадим массив маршрутов const routes = […], где каждый элемент – объект с path (URL-адрес) и component (компонент). Добавим RouterModule.forRoot(routes) в imports модуля.

В app.component.html добавим <router-outlet>. Создадим компоненты registration, auth и dashboard, укажем их в маршрутах и используем routerLink в компоненте шапки для ссылок.

Мы создали функциональный проект с компонентами и маршрутизацией, используя Angular CLI и Bootstrap. В следующих уроках объединим его с Node.js, Express.js и MongoDB.

Что будем искать? Например,программа