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

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

Для начала работы установите на свой компьютер 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

Ссылки

Комментарии