Первое приложение на Angular

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

Для написания приложений нам потребуется обычный текстовый редактор, хотя можно использовать специальные среды программирования, как Visual Studio, Netbeans, WebStorm и другие.

Кроме того, для запуска приложения Angular потребуется веб-сервер. В качестве веб-сервера опять же можно использовать множество различных серверов - Apache, IIS, NodeJS и т.д. В данном случае мы будем опираться на NodeJS.

Итак, создадим на жестком диске папку приложения. Путь она будет называться purchaseapp. В этой папке создадим новый файл package.json со следующим содержимым:

{
  "name": "purchaseapp",
  "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"
  }
}

Также добавим в папку проекта новый файл 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" ]
}

Как было уже описано в прошлой теме, файл package.json устанавливает пакеты и зависимости, которые будут использоваться проектом.

Файл tsconfig.json устанавливает конфигурацию для компилятора TypeScript.

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

{
  "version": 1,
  "projects": {
    "purchaseapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/purchaseapp",
            "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": "purchaseapp:build"
          }
        }
      }
    }
  }
}

После создания этих трех файлов в папке проекта откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

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

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

C:\angular\purchaseapp>npm install

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

Затем создадим в папке проекта каталог src, а в этом каталоге определим папку app.

В каталог src/app добавим новый файл, который назовем app.component.ts и который будет иметь следующий код:

import { Component } from "@angular/core";
import { FormsModule }   from "@angular/forms";
     
class Item{
    purchase: string;
    done: boolean;
    price: number;
     
    constructor(purchase: string, price: number) {
  
        this.purchase = purchase;
        this.price = price;
        this.done = false;
    }
}
 
@Component({
    selector: "purchase-app",
    standalone: true,
    imports: [FormsModule],
    template: `
        <h1> Список покупок </h1>
        <div>
            <p>
                <label>Товар</label><br>
                <input [(ngModel)]="text" />
            </p>
            <p>
                <label>Цена</label><br>
                <input type="number" [(ngModel)]="price" />
            </p>
            <button (click)="addItem(text, price)">Добавить</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Предмет</th>
                    <th>Цена</th>
                    <th>Куплено</th>
                </tr>
            </thead>
            <tbody>
            @for (item of items; track item.purchase) {
                <tr>
                    <td>{{item.purchase}}</td>
                    <td>{{item.price}}</td>
                    <td><input type="checkbox" [(ngModel)]="item.done" /></td>
                </tr>
            }
            </tbody>
        </table>`
})
export class AppComponent { 
    text: string = "";
    price: number = 0;
     
    items: Item[] = 
    [
        { purchase: "Хлеб", done: false, price: 15.9 },
        { purchase: "Масло", done: false, price: 60 },
        { purchase: "Картофель", done: true, price: 22.6 },
        { purchase: "Сыр", done: false, price:310 }
    ];
    addItem(text: string, price: number): void {
         
        if(text==null || text.trim()=="" || price==null)
            return;
        this.items.push(new Item(text, price));
    }
}

Двумя первыми строками здесь импортируется функциональность компонента из angular/core и модуль FormsModule из пакета "angular/forms".

Для работы нам потребуется вспомогательный класс Item. Этот класс содержит три поля: purchase (название покупки), done (сделана ли покупка) и price (ее цена).

В самом классе компонента определяется начальный список покупок, который будет выводиться на страницу:

items: Item[] = 
	[
        { purchase: "Хлеб", done: false, price: 15.9 },
        { purchase: "Масло", done: false, price: 60 },
        { purchase: "Картофель", done: true, price: 22.6 },
        { purchase: "Сыр", done: false, price:310 }
    ];

И также в классе определен метод добавления в этот список:

addItem(text: string, price: number): void {
		
	if(text==null || text.trim()=="" || price==null)
		return;
	this.items.push(new Item(text, price));
}

Для вывода покупок здесь определен большой шаблон. Вообще подобные большие шаблоны стоит выносить в отдельные файлы, чтобы сделать код компонента проще. Но в нашем случае пусть все пока будет определено в самом компоненте.

В самом шаблоне для вывода данных из массива items в таблицу предусмотрена директива:

@for (item of items; track item.purchase) {
    <tr>
        <td>{{item.purchase}}</td>
        <td>{{item.price}}</td>
        <td><input type="checkbox" [(ngModel)]="item.done" /></td>
    </tr>
}

Кроме того, сверху от таблицы расположена форма для ввода нового объекта Item. А к нажатию кнопки привязан метод addItem() компонента.

Уровнем выше в каталоге src определим файл main.ts для запуска проекта:

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

Здесь с помощью функции bootstrapApplication запускается приложение в виде выше определенного компонента AppComponent.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Приложение покупок</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <purchase-app>Загрузка...</purchase-app>
</body>
</html>

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

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

C:\angular\purchaseapp>ng serve --open

После этого в веб-браузере обратимся к нашему приложению и увидем таблицу с покупками и форму для добавлени новой покупки: