Привет, меня зовут Infanty, мой профиль в LinkedIn.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.

Введение

Angular - фреймворк с открытым исходным кодом, предназначенный для разработки веб-приложений. Он упрощает создание пользовательских компонентов, которые могут быть добавлены в документ HTML, а также упрощает реализацию логики приложения.

Angular разработан на TypeScript. Данный язык программирования расширяет возможности JavaScript и представлен Microsoft в 2012 году.

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

Этот фреймворк содержит механизм создания пользовательских тегов и атрибутов HTML с помощью концепции директив, которая позволяет расширять набор тегов HTML в соответствии с потребностями приложения.

Для Angular имеется инструментарий подобный Create React App - Angular CLI. Он позволяет генерировать новые проекты, компоненты, сервисы и маршруты для Angular, а также создавать приложение для развертывания.

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

Постановка задачи

Разработаем фронтенд для сайта магазина состоящего из главной страницы, страницы каталога и страницы товара используя Angular версии 7.

Создание приложения используя Angular CLI

Установим Angular CLI, набрав в консоли:

npm install -g @angular/cli

Создадим приложение (оно и будет фронтендом для сайта магазина) в текущей папке, перейдём в папку приложения и запустим сервер разработки, набрав в консоли:

ng new my-shop-app
cd my-shop-app
ng serve --open 

После чего, приложение будет доступно в браузере по URL: "http://localhost:4200/". Дополнительная команда: "--open" (в последней строке) - позволяет автоматически открыть данный URL в браузере после запуска сервера разработки.

Обзор файлов, папок и пакетов приложения созданного с помошью Angular CLI

Обзор файлов в корневой директории:

  • .editorconfig - файл настройки IDE, например: используя плагин EditorConfig для Visual Studio Code.
  • .gitignore - содержит список файлов и директорий, которые Git должен игнорировать.
  • angular.json - файл настройки Angular CLI, включает параметры конфигурации для сборки, а так же параметры настройки TSLint (статический анализатор кода TypeScript), Karma (инструментарий тестирования) и Protractor (фреймворк тестирования для запуска тестов в браузере).
  • package.json - файл настройки зависимостей приложения от пакетов Node.js.
  • package-lock.json - содержит информацию о версиях пакетов, установленных в node_modules менеджер пакетов npm для Node.js.
  • README.md - содержит описание основных команд Angular CLI.
  • tsconfig.json - файл настройки TypeScript.
  • tslint.json - файл настройки TSLint.

Обзор папок в корневой директории:

  • dist - каталог для результатов сборки приложения.
  • e2e - каталог для Protractor тестов.
  • node_modules - каталог пакетов Node.js.
  • src - основной каталог приложения.

Обзор папки src:

  • src/app - основной каталог для кода приложения. Здесь обычно создаются подкаталоги для маршрутов и дочерних компонентов.
  • src/app/app.component.ts - код класса компонента, написанный на TypeScript.
  • src/app/app.component.html - шаблон компонента, написанный на HTML.
  • src/app/app.component.css - CSS стили компонента.
  • src/app/app.component.spec.ts - файл тестирования для компонента.
  • src/app/app.module.ts - корневой модуль (AppModule) в приложении Angular, используется в качестве точки входа, содержит список используемых компонентов.
  • src/assets - в процессе сборки все файлы из данного каталога копируются в каталог dist кроме файла: .gitkeep. Он необходим когда данная папка пустая, что бы папка попала в Git (так как в папке должен быть минимум один файл для сохранения её в Git).
  • src/environments - каталог для хранения файлов настроек переменных окружения Node.js для различных сред развёртывания.
  • src/browserslist - данный файл определяет список браузеров под которые разрабатывается проект (данный список используется: @babel/preset-env и autoprefixer).
  • src/favicon.ico - иконка приложения в браузере.
  • src/index.html - основная HTML-страница приложения. CLI автоматически добавляет все файлы JavaScript и CSS при сборке приложения в данный HTML.
  • src/karma.conf.js - файл настроек инструментария тестирования: Karma.
  • src/main.ts - основная точка входа приложения. Загружает корневой модуль приложения (AppModule) для запуска в браузере.
  • src/polyfills.ts - предоставляет сценарии polyfill для поддержки устаревших браузеров.
  • src/styles.css - глобальные (основные) стили для приложения.
  • src/test.ts - точка входа для юнит-тестов, с некоторой специфичной для Angular конфигурацией.
  • src/tsconfig.app.json - унаследован от файла tsconfig.json (файл настройки TypeScript), содержит переопределение настроек TypeScript для данной папки и подпапок.
  • src/tsconfig.spec.json - унаследован от файла tsconfig.json (файл настройки TypeScript), содержит переопределение настроек TypeScript для юнит-тестов данной папки и подпапок.
  • src/tslint.json - унаследован от файла tslint.json (файл настройки TSLint), содержит переопределение настроек TSLint для данной папки и подпапок.

Обзор основных используемых пакетов Node.js:

  • @angular/animations - пакет анимации Angular позволяющий легко определять и применять эффекты анимации, такие как переходы страниц и списков.
  • @angular/common - пакет для работы с директивами и сервисами в Angular.
  • @angular/compiler - пакет компилятора Angular.
  • @angular/core - пакет содержащий основные функции Angular, необходимые в каждом приложении.
  • @angular/forms - пакет для работы с формами.
  • @angular/platform-browser - пакет для работы с DOM (объектной моделью HTML документа) в Angular.
  • @angular/platform-browser-dynamic - пакет для компиляции и запуска приложения на клиенте с использованием JIT-компилятора.
  • @angular/router - пакет для перемещения (роутинга) по страницам приложения при изменении URL-адреса браузера.
  • core-js - библиотека JavaScript, включающая polyfills (сценарии для поддержки устаревших браузеров) для ECMAScript 5 и ECMAScript 6.
  • rxjs - набор библиотек, необходимых для создания асинхронных программ и программ, основанных на событиях, с использованием наблюдаемых коллекций
  • tslib - библиотека содержащая вспомогательные функции TypeScript.
  • zone.js - пакет предоставляющий контекст выполнения, который сохраняется между выполнением асинхронных задач и позволяет наблюдать и контролировать выполнение кода внутри зоны.

Обзор используемых dev пакетов Node.js:

  • @angular-devkit/build-angular - пакет интеграции Webpack и Angular.
  • @angular/cli - пакет Angular CLI.
  • @angular/compiler-cli - пакет компилятора Angular CLI.
  • @angular/language-service - пакет работы с errors, hints и navigation внутри приложения Angular.
  • @types/node - пакет содержит определения типов для Node.js.
  • @types/jasmine - пакет содержит определения типов для Jasmine.
  • @types/jasminewd2 - пакет содержит определения типов для jasminewd2 (адаптер "Jasmine to WebDriverJS").
  • codelyzer - набор правил для статического анализа кода проектов Angular.
  • jasmine-core - пакет содержащий основные функции фреймворка тестирования Jasmine.
  • jasmine-spec-reporter - пакет вывода отчётов в консоль для фреймворка тестирования Jasmine.
  • karma - инструментарий тестирования Karma.
  • karma-chrome-launcher - плагин Karma для браузера Chrome.
  • karma-coverage-istanbul-reporter - плагин отчётов для Karma.
  • karma-jasmine - плагин интеграции Jasmine и Karma.
  • karma-jasmine-html-reporter - плагин отчётов Jasmine для Karma.
  • protractor - фреймворк тестирования для запуска тестов в браузере.
  • ts-node - реализует выполнение TypeScript в Node.js.
  • tslint - статический анализатор кода TypeScript.
  • typescript - пакет реализации TypeScript.

Сборка приложения

Сборка приложения осуществляется командой (в консоли):

ng build --prod --aot