abp框架学习笔记（三）--Angular和前端

在API接口做好之后，需要在前端显示数据，这里使用的Angular框架来进行开发的。
在开发前端之前需要先写本地化文件。本地化文件位于.Domain.Shared 项目的 Localization/项目名 文件夹下，按照语种命名的json文件。英文是en.json，中文是zh-Hans.json。

{
  "culture": "en",
  "texts": {
    "Menu:Home": "Home",
    "Welcome": "Welcome",
    "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
    "Menu:BookStore": "Book Store",
    "Menu:Books": "Books",
    "Actions": "Actions",
    "Close": "Close",
    "Delete": "Delete",
    "Edit": "Edit",
    "PublishDate": "Publish date",
    "NewBook": "New book",
    "Name": "Name",
    "Type": "Type",
    "Price": "Price",
    "CreationTime": "Creation time",
    "AreYouSure": "Are you sure?",
    "AreYouSureToDelete": "Are you sure you want to delete this item?",
    "Enum:BookType:0": "Undefined",
    "Enum:BookType:1": "Adventure",
    "Enum:BookType:2": "Biography",
    "Enum:BookType:3": "Dystopia",
    "Enum:BookType:4": "Fantastic",
    "Enum:BookType:5": "Horror",
    "Enum:BookType:6": "Science",
    "Enum:BookType:7": "Science fiction",
    "Enum:BookType:8": "Poetry"
  }
}

在前端直接调用对应文字的定义即可实现多语言，如：[name]=“‘::Name’ | abpLocalization”。

在前端使用的是yarn工具来安装NPM包的，在 angular 目录下打开命令行窗口,选择 yarn 命令安装NPM包:

yarn

也可以在vscode中打开angular 目录，并运行终端，在终端中输入：yarn

ABP Angular前端应用程序时,需要使用一些工具:
Ng Bootstrap 用做UI组件库。
ngx-datatable 用做 datatable 类库。

加载完所有的package，需要再生成基础页面，生成可以直接把对应模块的API接口生成到Angular项目的生成对应的文件夹
yarn ng generate module book [文件夹名] --module app --routing --route books
并在文件夹下生成对应的页面文件

> yarn ng generate module book --module app --routing --route books

yarn run v1.19.1
$ ng generate module book --module app --routing --route books
CREATE src/app/book/book-routing.module.ts (336 bytes)
CREATE src/app/book/book.module.ts (335 bytes)
CREATE src/app/book/book.component.html (19 bytes)
CREATE src/app/book/book.component.spec.ts (614 bytes)
CREATE src/app/book/book.component.ts (268 bytes)
CREATE src/app/book/book.component.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (1289 bytes)
Done in 3.88s.

book.module.ts页面是模块页面，创建BookModule 模块

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { BookRoutingModule } from './book-routing.module';
import { BookComponent } from './book.component';

@NgModule({
  declarations: [BookComponent],
  imports: [
    BookRoutingModule,
    SharedModule
  ]
})
export class **BookModule** { }

app-routing.module.ts页面是路由页面，新建页面后需要在此文件中新增路由定义，指向book.module路径

const routes: Routes = [
  // other route definitions...
  { path: 'books', loadChildren: () => import('./book/book.module').then(m => m.**BookModule**) },
];

route.provider.ts页面中增加路由

function configureRoutes(routes: RoutesService) {
  return () => {
    routes.add([
      {
        path: '/',
        name: '::Menu:Home',
        iconClass: 'fas fa-home',
        order: 1,
        layout: eLayoutType.application,
      },
      {
        path: '/book-store',
        name: '::Menu:BookStore',
        iconClass: 'fas fa-book',
        order: 2,
        layout: eLayoutType.application,
      },
      {
        path: '/books',
        name: '::Menu:Books',
        parentName: '::Menu:BookStore',
        layout: eLayoutType.application,
      },
    ]);
  };
}

RoutesService 是ABP框架提供的用于配置主菜单和路由的服务
path 路由的URL。
name 菜单项的名称(本地化)。
iconClass 菜单项的图标(可以使用默认的Font Awesome图标)。
order 菜单项的排序。
layout BooksModule路由的布局. (有三个预定义的布局类型: eLayoutType.application, eLayoutType.account 或 eLayoutType.empty)。

页面好了后可以生成API的代理，ABP CLI 提供 generate-proxy 命令为HTTP APIs生成客户端代理。在生成代理前需要先运行host项目。可以在vs中选中.HttpApi.Host项目启动。
在 angular 文件夹下运行以下命令：

abp generate-proxy -t ng

这个命令将在/src/app/proxy/books文件夹下产生以下文件：
index.ts --注入
model.ts --参数
book.service.ts --api接口的调用

/src/app/book/book.component.ts文件内容

**import** { **ListService**, PagedResultDto } from '@abp/ng.core';
**import** { Component, OnInit } from '@angular/core';
**import** { **BookService**, **BookDto** } from '@proxy/books';

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss'],
  providers: [ListService],
})
export class BookComponent implements OnInit {
  book = { items: [], totalCount: 0 } as PagedResultDto<BookDto>;

  constructor(public readonly list: ListService, private bookService: BookService) {}

  ngOnInit() {
    const bookStreamCreator = (query) => this.bookService.getList(query);

    this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
      this.book = response;
    });
  }
}

ListService它是一个工具服务，提供了易用的分页，排序和搜索。

/src/app/book/book.component.html为页面展示

<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">
          {{ '::Menu:Books' | abpLocalization }}
        </h5>
      </div>
      <div class="text-end col col-md-6"></div>
    </div>
  </div>
  <div class="card-body">
    <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
      <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ '::Enum:BookType:' + row.type | abpLocalization }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row.publishDate | date }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row.price | currency }}
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>
  </div>
</div>

至此，简单的列表展示完成。
想要查看完整效果，可以运行host项目后用yarn的在vscode的终端输入"yarn start"。
即可生成页面展示 项目。