ABP-Book Store Application中文讲解 - Part 9: Authors: User Interface

ABP-Book Store Application中文讲解 - Part 9: Authors: User Interface

TBD

 1. 汇总

ABP-Book Store Application中文讲解-汇总-CSDN博客

2. 前一章 

ABP-Book Store Application中文讲解 - Part 8: Authors: Application Layer-CSDN博客

项目之间的引用关系。

​​

目录

1. 利用Angular Cli创建authors

 2. 更改AuthorModule

3. 定义菜单-Menu Definition

3.1. 更改path为/book-store的requiredPolicy

 3.2 新增path为/authors的菜单

3.3 route.provider.ts完整代码

4. ABP generate service proxy

5. 提示信息本地化

6. Author列表和新增、编辑、删除

 7. 继续学习

---

 

1. 利用Angular Cli创建authors

右击app文件夹，选择Open in Integrated Terminal打开Terminal页面，输入以下命令，敲回车：

ng generate module author --module app --routing --route authors 

​命令结束后，生成文件结构如下图所示： 

​

 2. 更改AuthorModule

/src/app/author/author.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';import { AuthorRoutingModule } from './author-routing.module';
import { AuthorComponent } from './author.component';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';// new added
import { SharedModule } from '../shared/shared.module';// new added@NgModule({declarations: [AuthorComponent],imports: [CommonModule,SharedModule,// new addedAuthorRoutingModule,NgbDatepickerModule// new added]
})
export class AuthorModule { }

3. 定义菜单-Menu Definition

src/app/route.provider.ts

3.1. 更改path为/book-store的requiredPolicy

      {path: '/book-store',name: '::Menu:BookStore',iconClass: 'fas fa-book',order: 2,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books || BookStore.Authors',// 新增加|| BookStore.Authors}

 3.2 新增path为/authors的菜单

      {path: '/authors',name: '::Menu:Authors',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 4,layout: eLayoutType.application,requiredPolicy: 'BookStore.Authors',// new added}

3.3 route.provider.ts完整代码

import { RoutesService, eLayoutType } from '@abp/ng.core';
import { APP_INITIALIZER } from '@angular/core';export const APP_ROUTE_PROVIDER = [{ provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
];function configureRoutes(routesService: RoutesService) {return () => {routesService.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,requiredPolicy: 'BookStore.Books || BookStore.Authors',// 新增加|| BookStore.Authors},{path: '/books',name: '::Menu:Books',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 3,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books',// new added},{path: '/authors',name: '::Menu:Authors',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 4,layout: eLayoutType.application,requiredPolicy: 'BookStore.Authors',// new added}]);};
}

4. ABP generate service proxy

前置条件是需要保证Acme.BookStore.HttpApi.Host启动。

在angular根目录，然后ctrl+`新打开一个Terminal console，运行以下命令：

abp generate-proxy -t ng

生成完成后的目录结构如下图所示： 

5. 提示信息本地化

打开Acme.BookStore.Domain.Shared，找到Localization/BookStore文件夹，编辑en.json和zh-Hans.json。添加内容如下：

en.json

    "Menu:Authors": "Authors","Authors": "Authors","AuthorDeletionConfirmationMessage": "Are you sure to delete the author '{0}'?","BirthDate": "Birth date","NewAuthor": "New author","EditAuthor": "Edit author"

zh-Hans.json

    "Menu:Authors": "作者管理","Authors": "作者","AuthorDeletionConfirmationMessage": "你确定要删除作者 '{0}'?","BirthDate": "生日","NewAuthor": "新建作者","EditAuthor": "编辑作者"

6. Author列表和新增、编辑、删除

/src/app/author/author.component.ts

此处新增、编辑界面可以参考Book那一章进行分开设计，即生成create-update-author component，然后动过NgbModal的open事件控制create-update-author的显示。

本篇文章不再介绍单独create-update-author component的方式，大家可以用这一个进行练手。

如果忘记怎么实现了，可以参考：（推荐使用这种方式）ABP-Book Store Application中文讲解 - Part 3: Creating, Updating and Deleting Books-CSDN博客

如果想要放在同一个组件里面，可参考ABP官网：

Web Application Development Tutorial - Part 9: Authors: User Interface | ABP.IO Documentation

 7. 继续学习

ABP-Book Store Application中文讲解 - Part 10: Book to Author Relation-CSDN博客