# abp.zero 9.0框架的前端Angular使用說明 [toc] ## 摘要 某寶可自行購買 abp.zero 框架，本文相關的[Abp Zero Angular 培訓 B站視訊](https://www.bilibili.com/video/BV1gK4y1e7Th)有需要的可前往B站觀看。 # 1 部署及啟動 ## 1.1 依賴包安裝 + 安裝nodejs（自包含npm包管理）； + yarn包管理； 備註：已經安裝的可忽略此項，國外資源不好訪問問題，自己用國內淘寶或者其他第三方映象解決。 ## 1.2 使用yarn安裝依賴包 yarn ## 1.3 啟動前端專案執行 yarn start 編譯完後，可在瀏覽器中開啟：http://localhost:4200，預設賬號：admin/123qwe # 2 程式碼使用 ## 2.1 配置路由 src/shared/layout/nav/ 找到配置路由服務app-navigation.server.ts 新增新的路由 ``` new AppMenuItem('Fsu管理', null, 'flaticon-line-graph', '/app/main/fsuManager'), ``` ## 2.2 對路由注入邏輯服務 我這裡假設將Fsu管理元件注入到main資料夾下，main-routing.module.ts檔案 ``` { path: 'fsuManager', component: FsuManagerComponent }, ``` **此時編譯會報錯，因為並無fsuManagerComponent元件服務，繼續往下新增,另外元件的命名方式（FsuManagerComponent）必須是 Pascal命名方式，首字母需要大寫否則會報錯。** ## 2.3 編寫元件程式碼 ### 2.3.1 建立元件資料夾fsuDevice 建立元件服務檔案fsuManager.component.ts, fsuManager.component.html **css檔案的引入與html檔案引入類似，舉例 styleUrls: ['./users.component.less'], 自行完善** 各元件含義自行去網上查詢學習。主要介紹AppComponentBase，框架的基類， 目的是為了更方便的生成各種業務類，業務類直接繼承此類即可。 ``` import { Component, Injector } from '@angular/core'; import { AppComponentBase } from '@shared/common/app-component-base'; import { appModuleAnimation } from '@shared/animations/routerTransition'; @Component({ templateUrl: './fsuManager.component.html', animations: [appModuleAnimation()] }) export class FsuManagerComponent extends AppComponentBase { constructor(injector: Injector) { super(injector); } } ``` ### 2.3.2 fsuManager元件html檔案 ```

welcome to Fsumanager！

``` ### 2.3.3 宣告服務 在main.module.ts中宣告fsuManager服務元件。 ``` declarations: [ DashboardComponent, FsuManagerComponent ], ``` # 3.後臺介面地址配置 ## 3.1 除錯開發遠端介面地址配置 appconfig.json 檔案位置：src/assets/ ``` "remoteServiceBaseUrl": "http://localhost:21021", ``` ## 3.2 生產環境遠端地址配置 appconfig.production.json 檔案位置：src/assets/ ``` "remoteServiceBaseUrl": "https:www.daxxxop.tech/proxyForApi", ``` # 4 後臺介面服務的呼叫 ## 4.1 呼叫形式 使用nswag掃描後臺新增介面，生成代理服務，此服務類同時會提供Dto模型（實體或者實體集合）， 非常方便前端人員編碼，根據介面文件來對後臺服務下的增刪改查介面進行呼叫。 ## 4.2 配置nswag掃描的後臺服務地址nswag/service.config.nswag文件，修改內容如下： ```` "url": "http://localhost:21021/swagger/v1/swagger.json", ```` ## 4.3 windows呼叫nswag 進入nswag資料夾呼叫refresh.bat批處理檔案 ``` ./refresh.bat ``` ## 4.4 macOs呼叫nswag 進入nswag資料夾呼叫refresh.sh批處理檔案 ``` ./refresh.sh ``` **備註：該指令碼是自己編寫，有需要讀者可提供。** ## 4.5 生成的後臺介面服務類及其實體類 位置src/shared/service-proxies.ts 這裡框架使用了代理設計模式，思考下，代理設計模式的目的？？ 自動生成了FsuManagerServiceProxy代理類，裡面有getFsu方法可傳入 filter過濾欄位；註冊到Ngmodule裡，其他頁面即可呼叫。 這裡pipe是rxjs裡的管道概念，可在管道里對資料做延時或者資料變換。 ``` @Injectable() export class FsuManagerServiceProxy { private http: HttpClient; private baseUrl: string; protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined; constructor(@Inject(HttpClient) http: HttpClient, @Optional() @Inject(API_BASE_URL) baseUrl?: string) { this.http = http; this.baseUrl = baseUrl ? baseUrl : ""; } /** * @param filter (optional) * @return Success */ getFsu(filter: string | null | undefined): Observable { let url_ = this.baseUrl + "/api/services/app/FsuManager/GetFsu?"; if (filter !== undefined) url_ += "Filter=" + encodeURIComponent("" + filter) + "&"; url_ = url_.replace(/[?&]$/, ""); let options_ : any = { observe: "response", responseType: "blob", headers: new HttpHeaders({ "Accept": "text/plain" }) }; return this.http.request("get", url_, options_).pipe(_observableMergeMap((response_ : any) => { return this.processGetFsu(response_); })).pipe(_observableCatch((response_: any) => { if (response_ instanceof HttpResponseBase) { try { return this.processGetFsu(response_); } catch (e) { return >_observableThrow(e); } } else return >_observableThrow(response_); })); } protected processGetFsu(response: HttpResponseBase): Observable { const status = response.status; const responseBlob = response instanceof HttpResponse ? response.body : (response).error instanceof Blob ? (response).error : undefined; let _headers: any = {}; if (response.headers) { for (let key of response.headers.keys()) { _headers[key] = response.headers.get(key); }}; if (status === 200) { return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => { let result200: any = null; let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver); result200 = ListResultDtoOfFsuListDto.fromJS(resultData200); return _observableOf(result200); })); } else if (status !== 200 && status !== 204) { return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => { return throwException("An unexpected server error occurred.", status, _responseText, _headers); })); } return _observableOf(null); } ``` 以及掃描出後臺FsuListDto及其介面的形式，增加了json序列化與反序列化的方法； ``` export class FsuListDto implements IFsuListDto { fsuName!: string | undefined; id!: number; constructor(data?: IFsuListDto) { if (data) { for (var property in data) { if (data.hasOwnProperty(property)) (this)[property] = (data)[property]; } } } init(_data?: any) { if (_data) { this.fsuName = _data["fsuName"]; this.id = _data["id"]; } } static fromJS(data: any): FsuListDto { data = typeof data === 'object' ? data : {}; let result = new FsuListDto(); result.init(data); return result; } toJSON(data?: any) { data = typeof data === 'object' ? data : {}; data["fsuName"] = this.fsuName; data["id"] = this.id; return data; } } ``` 介面形式如下： ``` export interface IFsuListDto { fsuName: string | undefined; id: number; } ``` 將其返回形式封裝程item ``` export class ListResultDtoOfFsuListDto implements IListResultDtoOfFsuListDto { items!: FsuListDto[] | undefined; constructor(data?: IListResultDtoOfFsuListDto) { if (data) { for (var property in data) { if (data.hasOwnProperty(property)) (this)[property] = (data)[property]; } } } init(_data?: any) { if (_data) { if (Array.isArray(_data["items"])) { this.items = [] as any; for (let item of _data["items"]) this.items!.push(FsuListDto.fromJS(item)); } } } static fromJS(data: any): ListResultDtoOfFsuListDto { data = typeof data === 'object' ? data : {}; let result = new ListResultDtoOfFsuListDto(); result.init(data); return result; } toJSON(data?: any) { data = typeof data === 'object' ? data : {}; if (Array.isArray(this.items)) { data["items"] = []; for (let item of this.items) data["items"].push(item.toJSON()); } return data; } } export interface IListResultDtoOfFsuListDto { items: FsuListDto[] | undefined; } ``` ##4.6 將生成的代理服務注入到module中去 找到service-proxy.module.ts檔案，嫁給你FsuManager代理服務注入到NgModule中去。 ``` ApiServiceProxies.FsuManagerServiceProxy, ``` ##4.7 建立對應的業務檔案 建立如下業務檔案*.ts,頁面檔案*.html，當然有需要的話可以增加*.css。 本文不對*.css多做說明，自行學習。 ``` fsuManager.component.ts fsuManager.component.html ``` fsuManager.component.ts程式碼如下 ``` import {Component, Injector, OnInit} from '@angular/core'; import { AppComponentBase } from '@shared/common/app-component-base'; import { appModuleAnimation } from '@shared/animations/routerTransition'; import {FsuListDto, FsuManagerServiceProxy} from '@shared/service-proxies/service-proxies'; import {ThemesLayoutBaseComponent} from '@app/shared/layout/themes/themes-layout-base.component'; //註冊了元件模板的位置 @Component({ templateUrl: './fsuManager.component.html', animations: [appModuleAnimation()] }) export class FsuManagerComponent extends AppComponentBase implements OnInit { fsuList: FsuListDto[] = []; filter: string = ''; constructor(injector: Injector, private _fsuManagerService: FsuManagerServiceProxy) { super(injector); } ngOnInit(): void { this.getFsu(); } getFsu(): void { this._fsuManagerService.getFsu(this.filter).subscribe((result) => { this.fsuList = result.items; } ); } } ``` subscribe rxjs 響應式程式設計中的釋出訂閱模式； [RxJS: 簡單入門](https://segmentfault.com/a/1190000012252368) [Rxjs_觀察者模式和釋出訂閱模式](https://segmentfault.com/a/1190000017833159?utm_source=tag-newest) *.html檔案中主要用了ngFor，與vue中的v-for基本類似。另外需要明確掉用的UI元件，找到其官網地址， 沒用一個元件要看其說明，可能是英文網站，學會用谷歌翻譯。 ```

{{l("Fsu列表")}}

{{l("Fsu Manager")}}

{{fsu.id + ' ' + fsu.fsuName}}

{{fsu.fsuName}}

```

---

版權宣告：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連結和本宣告。 本文連結：https://www.cnblogs.com/JerryMouseLi/p/14150