在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 modulebook[文件夹名] --module app --routing --route books
并在文件夹下生成对应的页面文件
> yarn ng generate module book --module app --routing --route booksyarn run v1.19.1$ ng generate module book --module app --routing --route booksCREATE src/app/book/book-routing.module.ts (336 bytes)CREATE src/app/book/book.module.ts (335 bytes)CREATE src/app/book/ponent.html (19 bytes)CREATE src/app/book/ponent.spec.ts (614 bytes)CREATE src/app/book/ponent.ts (268 bytes)CREATE src/app/book/ponent.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 './ponent';@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/ponent.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: './ponent.html',styleUrls: ['./ponent.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/ponent.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"。
即可生成页面展示 项目。
如果觉得《abp框架学习笔记（三）--Angular和前端》对你有帮助，请点赞、收藏，并留下你的观点哦！
