31
Июл
2019

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

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

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

npm i @angular/cli -g

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

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

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

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 – название СО с объектом настроек среды в качестве значения.

ng build -c production

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

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

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

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

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


    {
      replace: src/environments/environment.ts,
      with: src/environments/environment.prod.ts
    }
    

Директория app

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

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

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

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


    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


    @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 необходимо выполнить:

ng serve -o

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

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

ng serve -o --port 5000
Share

Тебе может это понравится...