Подготовка: Установка необходимого инструментария (5 минут). Прежде всего, вам понадобится Node.js (рекомендуется LTS-версия) и менеджер пакетов npm (он идет в комплекте). Установите их с официального сайта. Далее, откройте терминал и установите Angular CLI глобально — это основной инструмент, который в разы ускорит все операции: `npm install -g @angular/cli`. Проверьте установку: `ng version`. Также убедитесь, что у вас установлен Git для контроля версий.
Шаг 1: Создание нового проекта с оптимизированными настройками (10 минут). Вместо простой команды `ng new`, используйте флаги для ускорения последующей разработки и сборки.
```bash
ng new my-lightning-app --routing --style=scss --strict=false
```
Пояснение флагов: `--routing` сразу генерирует модуль маршрутизации, что сэкономит время позже. `--style=scss` позволяет использовать препроцессор SCSS для более удобной работы со стилями. `--strict=false` отключает строгий режим TypeScript и строгие проверки шаблонов на начальном этапе, чтобы избежать излишних ошибок, мешающих быстрому старту. Согласитесь на добавление Angular Routing (Yes) и выберите CSS preprocessor (SCSS).
Перейдите в созданную директорию: `cd my-lightning-app`.
Шаг 2: Быстрая разработка первого модуля и компонента (15 минут). Вместо ручного создания файлов, используем мощь CLI.
Создайте основной модуль функциональности: `ng generate module home --route home --module app.module`. Эта команда сделает все за вас: создаст модуль `HomeModule`, компонент `HomeComponent`, настроит lazy loading (ленивую загрузку) маршрута `home` в `AppRoutingModule` и объявит компонент в модуле. Это лучшая практика для масштабируемости с самого начала.
Добавим навигационную панель. Отредактируем `src/app/app.component.html`, заменив стандартный контент на простую разметку:
```html
Home
```
Теперь запустите сервер для разработки: `ng serve -o`. Флаг `-o` автоматически откроет браузер. Вы увидите работающее приложение с навигацией.
Шаг 3: Добавление UI-библиотеки для скорости прототипирования (10 минут). Ручное написание CSS — долго. Воспользуйтесь библиотекой компонентов, например, Angular Material.
Установите ее: `ng add @angular/material`. В интерактивном меню выберите предварительно настроенную тему (например, Indigo/Pink), согласитесь на настройку глобальных стилей и анимаций HammerJS (если нужно).
Теперь быстро создадим карточку на домашней странице. В `src/app/home/home.component.html`:
```html
Приложение развернуто за 1 час!
<p>Это работает на Angular {{ version }}.</p>
Нажми меня
```
В `home.component.ts` добавьте логику для кнопки и получение версии Angular:
```typescript
import { Component, VERSION } from '@angular/core';
@Component({...})
export class HomeComponent {
version = VERSION.full;
showAlert() {
alert('Экспресс-развертывание успешно!');
}
}
```
Не забудьте импортировать `MatCardModule` и `MatButtonModule` в `home.module.ts`. Сервер разработки (ng serve) автоматически пересоберет приложение.
Шаг 4: Подготовка к продакшен-сборке и оптимизация (10 минут). Современный Angular CLI делает большую часть работы сам, но есть ключевые моменты.
Проверьте конфигурацию сборки в `angular.json`. Убедитесь, что в конфигурации production (`projects.my-lightning-app.architect.build.configurations.production`) включены оптимизации: `"optimization": true, "outputHashing": "all", "sourceMap": false`.
Для ускорения сборки можно использовать более производительный бандлер, например, ESBuild (в Angular CLI 15+ он используется по умолчанию в dev-режиме, для продакшена можно настроить экспериментально).
Шаг 5: Развертывание на хостинге (10 минут). Выберите простой хостинг для статических сайтов. Идеальный кандидат — Vercel или Netlify. Они бесплатны для небольших проектов и интегрируются с Git.
- Создайте production-сборку: `ng build --configuration production`. В папке `dist/my-lightning-app` появятся оптимизированные файлы.
- Инициализируйте Git-репозиторий, если еще не сделали: `git init`, `git add .`, `git commit -m "Initial commit"`.
- Создайте репозиторий на GitHub, GitLab или Bitbucket.
- Зарегистрируйтесь на Vercel (vercel.com) и подключите ваш Git-репозиторий. При деплое укажите, что это Angular-проект. Vercel автоматически определит команду сборки (`ng build`) и выходную директорию (`dist/my-lightning-app`).
- После пуша кода в ветку `main` (`git push origin main`) Vercel автоматически запустит сборку и развернет приложение, выдав вам уникальный URL (например, `my-lightning-app.vercel.app`).
Комментарии (11)