Grid и CRUD-операции

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

Вначале создадим новый проект. Определим в проекте файл package.json:

{
    "name": "gridapp",
    "version": "1.0.0",
    "description": "Grid Angular 8 Project",
    "author": "metanit.com",
    "scripts": {
        "dev": "webpack-dev-server --hot --open",
        "build": "webpack"
    },
    "dependencies": {
        "@angular/common": "~8.0.0",
        "@angular/compiler": "~8.0.0",
        "@angular/core": "~8.0.0",
        "@angular/forms": "~8.0.0",
        "@angular/platform-browser": "~8.0.0",
        "@angular/platform-browser-dynamic": "~8.0.0",
        "@angular/router": "~8.0.0",
        "core-js": "^3.1.0",
        "rxjs": "^6.5.0",
        "zone.js": "^0.9.0"
    },
    "devDependencies": {
        "@types/node": "^12.0.0",
        "typescript": "^3.5.0",
        "webpack": "^4.33.0",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.6.0",
        "angular2-template-loader": "^0.6.2",
        "awesome-typescript-loader": "^5.2.1",
        "html-loader": "^0.5.5"
    }
}

И затем установим все пакеты с помощью команды npm install.

Далее добавим в проект файл tsconfig.json с конфигурацией TypeScript:

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": ["node_modules/@types/"]
    },
    "exclude": ["node_modules"]
}

И также добавим в проект файл webpack.config.js:

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        polyfills: './src/polyfills.ts',
        app: './src/main.ts',
    },
    output: {
        path: path.resolve(__dirname, './public'), // путь к каталогу выходных файлов — папка public
        publicPath: '/public/',
        filename: '[name].js', // название создаваемого файла
    },
    devServer: {
        historyApiFallback: true,
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    module: {
        rules: [
            //загрузчик для ts
            {
                test: /\.ts$/, // определяем тип файлов
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: path.resolve(
                                __dirname,
                                'tsconfig.json'
                            ),
                        },
                    },
                    'angular2-template-loader',
                ],
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
        ],
    },
    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core/,
            path.resolve(__dirname, 'src'), // каталог с исходными файлами
            {} // карта маршрутов
        ),
    ],
};

Затем в проекте создадим папку src. А в этой папке создадим каталог app и в начале определим в нем файл user.ts, который будет описывать используемые данные:

export class User {
    constructor(
        public id: number,
        public name: string,
        public age: number
    ) {}
}

Класс User представляет пользователя и содержит три общедоступных поля id (уникальный идентификатор), name (имя) и age (возраст).

Все данные, описываемые классом User, будут храниться на сервере в базе данных. Поэтому нам необходим сервис для взаимодействия с сервером. И для этой цели в папке src/app создадим новый файл user.service.ts, в котором определим класс UserService:

import { Injectable } from '@angular/core';
import {
    HttpClient,
    HttpParams,
} from '@angular/common/http';
import { User } from './user';

@Injectable()
export class UserService {
    private url = 'http://localhost:63333/api/users';
    constructor(private http: HttpClient) {}

    getUsers() {
        return this.http.get(this.url);
    }

    createUser(user: User) {
        return this.http.post(this.url, user);
    }
    updateUser(id: number, user: User) {
        const urlParams = new HttpParams().set(
            'id',
            id.toString()
        );
        return this.http.put(this.url, user, {
            params: urlParams,
        });
    }
    deleteUser(id: number) {
        return this.http.delete(this.url + '/' + id);
    }
}

Для сервиса определен url для всех запросов. По этому url будет запущено приложение сервера. Оно может представлять любую серверную технологию: PHP, Node.js, ASP.NET. Для отправки запросов GET/POST/PUT/DELETE сервис использует соответствующие методы get()/post()/put()/delete() из объета http.

Далее добавим в папку src/app файл компонента app.component.ts:

import { TemplateRef, ViewChild } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { User } from './user';
import { UserService } from './user.service';
import { Observable } from 'rxjs';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    providers: [UserService],
})
export class AppComponent implements OnInit {
    //типы шаблонов
    @ViewChild('readOnlyTemplate', { static: false })
    readOnlyTemplate: TemplateRef<any>;
    @ViewChild('editTemplate', { static: false })
    editTemplate: TemplateRef<any>;

    editedUser: User;
    users: Array<User>;
    isNewRecord: boolean;
    statusMessage: string;

    constructor(private serv: UserService) {
        this.users = new Array<User>();
    }

    ngOnInit() {
        this.loadUsers();
    }

    //загрузка пользователей
    private loadUsers() {
        this.serv.getUsers().subscribe((data: User[]) => {
            this.users = data;
        });
    }
    // добавление пользователя
    addUser() {
        this.editedUser = new User(0, '', 0);
        this.users.push(this.editedUser);
        this.isNewRecord = true;
    }

    // редактирование пользователя
    editUser(user: User) {
        this.editedUser = new User(
            user.id,
            user.name,
            user.age
        );
    }
    // загружаем один из двух шаблонов
    loadTemplate(user: User) {
        if (
            this.editedUser &&
            this.editedUser.id == user.id
        ) {
            return this.editTemplate;
        } else {
            return this.readOnlyTemplate;
        }
    }
    // сохраняем пользователя
    saveUser() {
        if (this.isNewRecord) {
            // добавляем пользователя
            this.serv
                .createUser(this.editedUser)
                .subscribe((data) => {
                    (this.statusMessage =
                        'Данные успешно добавлены'),
                        this.loadUsers();
                });
            this.isNewRecord = false;
            this.editedUser = null;
        } else {
            // изменяем пользователя
            this.serv
                .updateUser(
                    this.editedUser.id,
                    this.editedUser
                )
                .subscribe((data) => {
                    (this.statusMessage =
                        'Данные успешно обновлены'),
                        this.loadUsers();
                });
            this.editedUser = null;
        }
    }
    // отмена редактирования
    cancel() {
        // если отмена при добавлении, удаляем последнюю запись
        if (this.isNewRecord) {
            this.users.pop();
            this.isNewRecord = false;
        }
        this.editedUser = null;
    }
    // удаление пользователя
    deleteUser(user: User) {
        this.serv.deleteUser(user.id).subscribe((data) => {
            (this.statusMessage = 'Данные успешно удалены'),
                this.loadUsers();
        });
    }
}

Так как каждая строка грида может быть в двух состояниях — в режиме редактирования и в режиме просмотра, то соответственно определяем с помощью декоратора ViewChild две переменных readOnlyTemplate и editTemplate, через которые мы будем ссылаться на используемые для строк шаблоны. Каждая переменная представляет тип TemplateRef. TemplateRef используется для создания вложенных представлений.

Для хранения редактируемого пользователя определена переменная editedUser, а для хранения списка пользователей — переменная users.

В методе ngOnInit вызывается метод loadUsers, в котором происходит загрузка данных с помощью сервиса UserService в список users.

В методе addUser() добавляется новый объект User. При этом добавляемый объект помещается в переменную editedUser и затем добавляется в массив users. И кроме того, для переменной isNewRecord устанавливается значение true. Это позволит идентифицировать в дальнейшем объект как именно как объект для добавления.

Метод editUser() получает объект User, который надо отредактировать, и передает его переменной editedUser.

Метод loadTemplate() позволяет загрузить для определенного объекта User нужный шаблон. То есть, как было сказано выше, строка грида может находиться в двух состояниях, и соответственно у нас будет два шаблона: для просмотра и для редактирования. Объект, для которого надо загрузить шаблон, передается в качестве параметра. И если определена переменная editedUser и ее свойство Id совпадает со значением свойства Id у того объекта, для которого надо загрузить шаблон, то выбирается шаблон для редактирования. Иначе же загружается шаблон для просмотра.

В методе saveUser() в зависимости от значения переменной isNewRecord данные отправляются на сервер либо через запрос типа POST (добавление нового объекта), либо через запрос типа PUT (редактирование объекта).

Метод cancel() сбрасывает редактирование.

И метод deleteUser() удаляет объект, отправляя через сервис UserService запрос к серверу.

И также добавим в проект в папку src/app новый файл app.component.html, который будет представлять шаблон для компонента AppComponent и который будет содержать следующий код:

<h1>Список пользователей</h1>
<input
    type="button"
    value="Добавить"
    class="btn btn-default"
    (click)="addUser()"
/>
<table class="table table-striped">
    <thead>
        <tr>
            <td>Id</td>
            <td>Имя</td>
            <td>Возраст</td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <ng-template
                [ngTemplateOutlet]="loadTemplate(user)"
                [ngTemplateOutletContext]="{ $implicit: user}"
            >
            </ng-template>
        </tr>
    </tbody>
</table>
<div>{{statusMessage}}</div>

<!--шаблон для чтения-->
<ng-template #readOnlyTemplate let-user>
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
    <td>
        <input
            type="button"
            value="Изменить"
            class="btn btn-default"
            (click)="editUser(user)"
        />
    </td>
    <td>
        <input
            type="button"
            value="Удалить"
            (click)="deleteUser(user)"
            class="btn btn-danger"
        />
    </td>
</ng-template>

<!--шаблон для редактирования-->
<ng-template #editTemplate>
    <td>
        <input
            type="text"
            [(ngModel)]="editedUser.id"
            readonly
            disabled
            class="form-control"
        />
    </td>
    <td>
        <input
            type="text"
            [(ngModel)]="editedUser.name"
            class="form-control"
        />
    </td>
    <td>
        <input
            type="text"
            [(ngModel)]="editedUser.age"
            class="form-control"
        />
    </td>
    <td>
        <input
            type="button"
            value="Сохранить"
            (click)="saveUser()"
            class="btn btn-success"
        />
    </td>
    <td>
        <input
            type="button"
            value="Отмена"
            (click)="cancel()"
            class="btn btn-warning"
        />
    </td>
</ng-template>

С помощью директивы ngFor для каждого объекта из массива users создается строку с нужным шаблоном. Для встраивания шаблона в строку применяется элемент ng-template.

<tr *ngFor="let user of users">
    <ng-template
        [ngTemplateOutlet]="loadTemplate(user)"
        [ngTemplateOutletContext]="{ $implicit: user}"
    >
    </ng-template>
</tr>

С помощью директивы ngTemplateOutlet встраивается шаблон, который представляет объект TemplateRef. Эта директива привязана к методу loadTemplate(), который определен в классе AppComponent и который возвращает определенный шаблон.

А свойство ngTemplateOutletContext для передачи контекста в шаблон. С помощью параметра $implicit задается передаваемый объект. В данном случае это объект user.

В конце файла определены два шаблона для строк грида: readOnlyTemplate и editTemplate. Для определения шаблонов Angular использует элемент ng-template.

Шаблон readOnlyTemplate отображает объект User в режиме для чтения. Он содержит кнопки для редактирования и удаления объекта. Шаблон editTemplate определяет текстовые поля, которые привязаны к свойствам переменной editedUser из класса AppComponent. И также шаблон содержит кнопки для сохранения и отмены операции.

И также определим в папке src/app файл модуля приложения app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
    imports: [BrowserModule, FormsModule, HttpClientModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule {}

В папке src определим файл main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Также добавим в папку src файл polyfills.ts:

import 'core-js';
import 'zone.js/dist/zone';

И в конце определим в проекте в корневой папке проекта главную веб-страницу index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Angular 8</title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
        />
    </head>
    <body>
        <my-app>Загрузка...</my-app>
        <script src="public/polyfills.js"></script>
        <script src="public/app.js"></script>
    </body>
</html>

В итоге весь проект будет выглядеть следующим образом:

Для тестирования я определил приложение на ASP NET Core Web API в виде следующего контроллера:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using AngularMvcService.Models;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;

namespace AngularMvcService.Controllers {
  [Route("api/[controller]")][enablecors("allowallorigin")]
  public class UsersController : Controller {
    ApplicationContext db;

    public UsersController(ApplicationContext context) {
      db = context;
    }

    [HttpGet]
    public IEnumerable<User> Get(){
      return db.Users.ToList();
    }

    // GET api/users/5
    [HttpGet("{id}")]
    public IActionResult Get(int id)
    {
        User user = db.Users.FirstOrDefault(x => x.Id == id);
        if (user == null)
            return NotFound();
        return new ObjectResult(user);
    }

    // POST api/users
    [HttpPost]
    public IActionResult Post([FromBody]User user)
    {
        if (user == null)
        {
            return BadRequest();
        }

        db.Users.Add(user);
        db.SaveChanges();
        return Ok(user);
    }

    // PUT api/users/
    [HttpPut]
    public IActionResult Put([FromBody]User user)
    {
        if (user == null)
        {
            return BadRequest();
        }
        if (!db.Users.Any(x => x.Id == user.Id))
        {
            return NotFound();
        }

        db.Update(user);
        db.SaveChanges();
        return Ok(user);
    }

    // DELETE api/users/5
    [HttpDelete("{id}")]
    public IActionResult Delete(int id)
    {
        User user = db.Users.FirstOrDefault(x => x.Id == id);
        if (user == null)
        {
            return NotFound();
        }
        db.Users.Remove(user);
        db.SaveChanges();
        return Ok(user);
    }
  }
/* используемая модель данных
public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}*/
}

Но естественно для приложения уровня сервера можно использовать любую другую технологию бекэнда: PHP, Node.js, Java и т.д.

Поле запуска приложения на сервере запустим приложение Angular. Если сервер возвратит какие-либо данные, то будут отображены в таблице с помощью шаблона readOnlyTemplate:

При нажатии на кнопку "Изменить" для редеринга строка используется шаблон editTemplate, и объект становится доступен для редактирования:

Комментарии