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

Angular предоставляет мощный инструментарий для разработки динамичных одностраничных приложений (SPA). В этом разделе рассмотрим процесс создания нового проекта с использованием Angular CLI — официального инструмента командной строки для работы с фреймворком Angular.

Установка Angular CLI

Перед созданием проекта необходимо установить Angular CLI. Для этого требуется наличие Node.js и npm (Node Package Manager) на компьютере.

  1. Убедитесь, что у вас установлен Node.js. Версию можно проверить с помощью команды:

    node -v

    Если Node.js не установлен, его можно скачать с официального сайта: https://nodejs.org.

  2. Установите Angular CLI глобально через npm. Для этого выполните команду:

    npm install -g @angular/cli

    После установки вы сможете использовать команду ng для работы с проектами Angular.

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

Чтобы создать новый проект, нужно использовать команду ng new с указанием имени проекта:

ng new имя-проекта

При выполнении команды Angular CLI предложит ряд параметров:

  • Angular Routing: Указывает, будет ли использоваться маршрутизация в приложении. Если выбрано “Yes”, создаются файлы для работы с маршрутизацией.
  • Style Sheets: Позволяет выбрать формат стилей, используемый в проекте. Доступны следующие варианты: CSS, SCSS, Sass, Less, или Stylus.

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

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

После создания проекта Angular, структура каталогов будет следующей:

  • e2e — папка с тестами для end-to-end тестирования.

  • node_modules — директория с зависимостями проекта.

  • src — исходный код приложения.

    • app — основная директория с кодом приложения (компоненты, сервисы, модули и т. д.).
    • assets — папка для статичных ресурсов (изображений, шрифтов и других файлов).
    • environments — файлы конфигурации для разных окружений (например, для разработки или продакшн).
    • index.html — главный HTML-файл приложения.
    • main.ts — основной файл TypeScript, который инициализирует приложение.
    • styles.css — глобальные стили для проекта.

Запуск проекта

После того как проект создан, необходимо перейти в папку с проектом и запустить сервер разработки:

  1. Перейдите в каталог проекта:

    cd имя-проекта

  2. Для запуска проекта выполните команду:

    ng serve

    Это запускает сервер разработки и открывает приложение в браузере по адресу http://localhost:4200.

Структура и настройка конфигурации

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

  • angular.json — основной файл конфигурации Angular CLI. Он управляет настройками проекта, такими как пути к исходным файлам, конфигурация сборки и тестирования.
  • tsconfig.json — конфигурация TypeScript. Здесь можно настроить параметры компиляции TypeScript, такие как пути и модули.
  • package.json — файл, который содержит все зависимости проекта, а также скрипты для запуска различных команд (например, сборка проекта, запуск тестов и т. д.).

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

Команды Angular CLI

Angular CLI предоставляет большое количество команд для удобной работы с проектом. Вот некоторые из них:

  • ng generate — команда для генерации различных сущностей, таких как компоненты, сервисы, модули, директивы и т. д.

    Например, чтобы создать новый компонент:

    ng generate component название-компонента

  • ng build — команда для сборки проекта. При запуске ng build происходит компиляция TypeScript в JavaScript и сборка ресурсов.

    ng build --prod

    Параметр --prod запускает сборку для продакшн-окружения с оптимизацией производительности.

  • ng test — запуск unit-тестов с использованием Karma и Jasmine.

    ng test

  • ng lint — проверка кода на соответствие стандартам стиля.

    ng lint

Работа с компонентами

После создания проекта можно начать создавать компоненты, которые являются строительными блоками Angular-приложений. Компонент состоит из трех основных частей:

  • HTML-шаблон — файл с разметкой.
  • CSS/SCSS — стили для компонента.
  • TypeScript — логика компонента.

Пример базового компонента:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'мой-angular-проект';
}

Модули

Angular приложения делятся на модули, каждый из которых содержит компоненты, сервисы и другие элементы. Наиболее важным модулем является AppModule, который определяет корневой компонент и конфигурацию для всего приложения.

Пример кода для AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Использование сторонних библиотек

Angular CLI упрощает подключение сторонних библиотек с помощью команды ng add. Например, чтобы добавить Angular Material, выполните команду:

ng add @angular/material

CLI автоматически установит зависимости и добавит необходимые импорты и настройки в проект.

Заключение

Создание нового проекта на Angular с использованием Angular CLI — это быстрый и удобный процесс. Благодаря мощному инструментарию, предоставляемому CLI, разработчики могут сосредоточиться на функциональности приложения, а не на настройке инструментов сборки. Созданный проект включает в себя все необходимые конфигурации и структуру, что значительно ускоряет процесс разработки и улучшает поддержку приложения в будущем.

Оглавление