Перейти к содержанию

Установка и конфигурация

Для начала работы установите на свой компьютер node.js не ниже 8 версии.

Далее установите глобально в системе @angular/cli:

1
npm i @angular/cli -g

@angular/cli — это интерфейс командной строки для работы с Angular, его использование значительно облегчает процесс разработки. Например, одной командой можно сгенерировать полностью сконфигурированное работающее приложение или создать новую сущность (модуль, сервис, компонент и т. д.) в существующем приложении. Более подробно здесь.

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

Для создания нового проекта просто нужно выполнить:

1
ng new my-app

Запуск команды ng new создает базовое приложение в папке my-app.

Структура my-app:

  • e2e — директория с интеграционными тестами;
  • node_modules — установленные npm-модули;
  • src — исходные файлы;
  • angular.json — описание конфигурации;
  • package.json — метаинформация и список необходимых npm-модулей;
  • README.md — описание ПО;
  • tsconfig.json — общая конфигурация typescript;
  • tslint.json — настройка tslint.

Структура src:

  • app — модули, компоненты, сервисы, директивы и т. д.;
  • assets — статический контент (изображения, аудио);
  • environments — конфигурации для каждой среды запуска;
  • favicon.ico — иконка, отображаемая в верхней части вкладки браузера;
  • index.html;
  • karma.conf.js — конфигурация protractor (для e2e-тестов);
  • main.ts — необходим для запуска в режиме разработки, использует JIT-компиляцию;
  • polyfills.ts — список модулей, подключаемых для поддержки кроссбраузерности;
  • styles.css — описание действующих глобально стилей;
  • test.ts — отвечает за поиск и загрузку тестов при их запуске;
  • tsconfig.app.json — настройка typescript;
  • tsconfig.spec.json — настройка typescript при запуске unit-тестов.

angular.json

Следующий шаг после установки Angular и изучения структуры "скелета" приложения — настройка. angular.json — главный конфигурационный файл так называемого Angular Workspace (директория my-app), сгенерированного с использованием @angular/cli и объединяющего в себе множество проектов (само приложение и созданные библиотеки для него).

Основные свойства:

  • version — версия Angular Workspace;
  • newProjectRoot — указывает, где будут располагаться внутренние приложения и библиотеки, по умолчанию projects;
  • projects — описание конфигураций для каждого из элементов Angular Workspace. По умолчанию вместе с основным генерируется проект с интеграционными тестами. Опции:
    • root — определяет директорию с файлами, включая конфигурационные, всего проекта;
    • sourceRoot — определяет директорию с исходными файлами;
    • projectType — тип проекта, может быть только application или library;
    • prefix — префикс, который будет использоваться при именовании компонентов и директив;
    • schematics — позволяет задавать отличную от по умолчанию конфигурацию сущностей Angular, например, можно для всех создаваемых компонентов переопределить работу механизма Change Detection;
    • architect — используется для настройки запуска или сборки.
  • defaultProject — имя проекта, который будет использоваться при использовании команд Angular CLI (по умолчанию основной).

Рассмотрим подробно в angular.json параметр build свойства architect. Здесь нас интересуют options и configurations.

В options указываются следующие опции:

  • outputPath — путь, где будет находиться "собранный" проект (подробно о сборке здесь);
  • index — путь к index.html;
  • main — путь к main.ts;
  • polyfills — путь к polyfills.ts;
  • tsConfig — путь к tsconfig.app.json;
  • assets — массив с указанием путей к статическому контенту, могут быть папки или отдельные файлы;
  • styles — массив с указанием путей к стилям, причем стили распространяются на все приложение;
  • scripts — массив с указанием путей к javascript-файлам, обычно здесь подключаются сторонние библиотеки, не являющиеся модулями Angular, например, jQuery.

Всегда подключайте сторонние скрипты и стили не в index.html, а в angular.json.

В configurations указываются настройки, связанные со средой окружения (environment, далее СО) работы приложения.

Каждое свойство объекта configurations — название СО с объектом настроек среды в качестве значения.

1
ng build -c production

СО указывается при запуске (сборке) в качестве параметра --configuration (краткая запись -c).

В объекте настроек СО множество параметров, назначение большинства которых понятно из их названия. Остановимся на fileReplacements.

В директории environments по умолчанию находятся два файла: environment.ts и environment.prod.ts. В них указываются параметры, зависящие от СО, например, адрес сервера, с которого будут запрашиваться данные. По умолчанию используется environment.ts.

Объект, используемый в качестве значения fileReplacements, позволяет переопределить источник для указанной СО.

Можете открыть angular.json и найти соответствующий код.

1
2
3
4
{
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
}

Директория app

Теперь разберем подробно содержимое src/app.

Минимально каждое приложение должно состоять из одного корневого модуля, содержащего обособленные функциональные части — компоненты. Также корневой модуль может обращаться к компонентам других модулей.

Архитектура детально описана в следующей главе.

Объявление корневого модуля находится в src/app/app.module.ts.

app.module.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

Здесь импортируются все модули и компоненты приложения.

Декоратор @NgModule() создает корневой модуль, которому передается объект конфигурации со свойствами:

  • imports — используемые второстепенные модули Angular;
  • declarations — все компоненты приложения;
  • bootstrap — основной компонент, отвечающий за загрузку.

Название может быть любым, но общепринято использовать AppModule.

Основной компонент приложения — AppComponent.

app.component.ts

1
2
3
4
5
6
7
8
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'app';
}

За объявление компонента отвечает декоратор @Component() из @angular/core. Принимаемый объект:

  • selector — название компонента;
  • template (templateUrl) — HTML-разметка в виде строки (путь к HTML-файлу);
  • styles — массив путей к CSS-файлам, содержащим стили для создаваемого компонента.

Это не все свойства декоратора @Component(), полное описание здесь.

Хорошей практикой считается вынесение HTML-разметки в отдельные файлы.

Чтобы убедиться в работоспособности происходящего, из папки my-app необходимо выполнить:

1
ng serve -o

По умолчанию приложение запускается по адресу http://localhost:4200, а наличие параметра -o указывает на то, что после компиляции оно автоматически откроется в браузере.

Для указания другого порта используйте параметр --port.

1
ng serve -o --port 5000

Ссылки

Комментарии