Введение в Angular

Что такое Angular. Первый проект

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular - Angular 17 вышла в ноябре 2023 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm, если они отсутствуют на рабочей машине. При этом особого какого-то знания для работы с NodeJS и npm не требуется. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm.

Следует учитывать, что Angular поддерживает те версии node.js, которые в текущий момент находятся в статусе "Active LTS" или "Maintenance LTS". На момент написания данной статьи это версии 18 и 20. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить. Проверить совместимость версий node.js (а также версий typescript и библиотеки RxJS) для определенных версий Angular можно по адресу: https://angular.dev/reference/versions. Так, для последний на данный момент версии Angular 17 требования следующие:

• Версия Node.js должна быть либо 18 начиная с подверсии 18.13.0, либо 20 начиная с подверсии 20.9.0

• Версия TypeScript должна быть 4.9.3 и выше, но ниже 5.3.0 (нужная версия TypeScript устанавливается локально в проект)

То же самое касается и npm. Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.

Установка Angular CLI

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

npm install -g @angular/cli

Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.

Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:

ng version

Если Angluar CLI уже был установлен, то можно его обновить с помощью команды:

ng update

При работе на Windows и выполнении команд в PowerShell вместо командной строки стоит учитывать, что по умолчанию выполнение скриптов в PowerShell отключено. Чтобы разрешить выполнение скриптов PowerShell (что требуется для npm), необходимо выполнить следующую команду:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку проекта. Путь она будет называться helloapp.

Установка пакетов. Package.json

В выше созданной папке проекта создадим новый файл package.json со следующим содержимым:

{
  "name": "helloapp",
  "version": "1.0.0",
  "description": "First Angular 17 Project",
  "author": "Eugene Popov metanit.com",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/common": "~17.0.0",
    "@angular/compiler": "~17.0.0",
    "@angular/core": "~17.0.0",
    "@angular/forms": "~17.0.0",
    "@angular/platform-browser": "~17.0.0",
    "@angular/platform-browser-dynamic": "~17.0.0",
    "@angular/router": "~17.0.0",
    "rxjs": "~7.8.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.0.0",
    "@angular/cli": "~17.0.0",
    "@angular/compiler-cli": "~17.0.0",
    "typescript": "~5.2.2"
  }
}

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.

В секции "scripts" описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

C:\WINDOWS\system32>cd C:\angular\helloapp

И затем выполним команду npm install, которая установит все необходимые модули:

C:\angular\helloapp>npm install

added 923 packages, and audited 924 packages in 1m

115 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

C:\angular\helloapp>

После выполнения этой команды в папке проекта должна появиться подпапка node_modules, которая содержит все используемые зависимости и пакеты.

Определение приложения

Затем создадим в папке проекта подпапку, которую назовем src - она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app.

Создание компонента Angular

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

import { Component } from "@angular/core";
import {FormsModule} from "@angular/forms";
	
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    template: `<label>Введите имя:</label>
				 <input [(ngModel)]="name" placeholder="name">
				 <h1>Добро пожаловать {{name}}!</h1>`
})
export class AppComponent { 
	name= "";
}

В начале файла определяется директива import, которая импортирует функциональность модуля angular/core, предоставляя доступ к функции декоратора @Component. И также импортируем модуль FormsModule, который понадобится для работы с полями ввода.

Далее собственно идет функция-декоратор @Component, которая ассоциирует метаданные с классом компонента AppComponent. В эту функцию передается конфигурационных объект с рядом параметров:

• параметр selector определяет селектор css для HTML-элемента, который будет представлять компонент. В данном случае это селектор "my-app". То есть на веб-странице приложения должен быть элемент "<my-app>", и в этот элемент будет загружаться приложение Angular

• параметр standalone: true указывает, что компонент будет независимым, то есть для него не нужно создавать дополнительных модулей, что уменьшает и упрощает код приложения

• параметр imports импортирует в компонент другие модули. Сторонние модули могут содержать различный функционал, который мы можем использовать. Например, в нашем случае мы будем использовать поле ввода, куда пользователь будет вводить имя. И для работы с этим полем ввода импортируем в компонент модуль FormsModule.

• параметр template представляет шаблон или визуальную часть компонента - то, что мы собственно увидим в браузере. В частности, в шаблоне определено поле ввода, куда пользователь будет вводить имя. А в заголовке h1 будет выводиться введенное значение. Для связи поля ввода и заголовка применяется двусторонняя привязка поля с помощью выражений [(ngModel)]="name" и {{name}} к некоторой модели name.

И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name - в данном случае это пустая строка.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположен файл "app.component.ts") файл main.ts со следующим содержимым:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
bootstrapApplication(AppComponent).catch(e => console.error(e));

Этот код запускает приложение в виде ранее определенного компонента AppComponent. При возникновении ошибок они выводятся на консоль.

Создание главной страницы

Далее определим в папке src главную страницу index.html приложения:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <my-app>Загрузка...</my-app>
</body>
</html>

А в элементе body определен элемент <my-app>, в который собственно и будет загружаться приложение.

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "ES2022",
    "moduleResolution": "node",
    "target": "ES2022",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "ES2022",
      "dom"
    ]
  },
    "files": [ "src/main.ts" ],
    "include": [ "src/**/*.d.ts"]
}

Данный файл определяет настройки для компилятора TypeScript. Опция "compilerOptions" устанавливает параметры компиляции. А опция "files" определяет компилируемые файлы. В нашем случае это файл приложения - main.ts, который подтягивает все остальные файлы приложения.

Angular.json

Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "helloapp:build"
          }
        }
      }
    }
  }
}

Вкратце пройдемся по структуре файле. Вначале определяется параметр version. Он определяет версию конфигурации проекта.

Далее идет секция projects, которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта - helloapp.

Проект определяет следующие опции:

• projectType: тип проекта. Значение "application" указывает, что проект будет представлять приложение, которое можно будет запускать в браузере

• root: указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают

• sourceRoot: определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения

• architect: задает настройки для построения проекта. В файле package.json определены команды build и serve, и для каждой из этих команд в секции architect заданы свои настройки.

  Для каждой команды задается параметр builder, который определяет инструмент для построения проекта. Так, для команды "build" задано значение "@angular-devkit/build-angular:browser" - данный билдер для построения использует сборщик пакетов webpack. А для команды "serve" задано значение "@angular-devkit/build-angular:dev-server" - данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.

Параметр options задает параметры построения файлов. Для команды "build" здесь определены следующие опции:

• outputPath: путь, по которому будет публиковаться скомпилированное приложение

• index: путь к главной странице приложения

• main: путь к главному файлу приложения, где собственно запускается приложение Angular

• polyfills: путь к файлам полифилов, в качестке которого выступает "zone.js"

• tsConfig: путь к файлу конфигурации TypeScript

• aot: указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Для команды "serve" указана только одна опцияя - buildTarget, которая содержит ссылку на конфигурацию для команды build - "helloapp:build". То есть по сути эта команда использует ту же конфигурацию, что и команда build.

• Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта "helloapp" будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

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

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve:

C:\WINDOWS\system32>cd C:\angular\helloapp
C:\angular\helloapp>ng serve --open

Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер - по умолчанию это "http://localhost:4200/". Если мы передаем команде флаг --open, как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:

Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.