浅谈 Angular 项目实战

时间:2023-03-08 16:43:53

浅谈 Angular 项目实战

在此推荐自己开发的一款基于 Angular Material 的中后台管理框架。

Github: https://github.com/ng-matero/ng-matero

预览地址: https://ng-matero.github.io/ng-matero/

为什么使用 Angular

我不是 Angular 的布道者,但如今痴迷 Angular,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的相关教程,最早接触的是 React,但是并没有实际的项目经验,只做过一些 Demo 。使用 Vue 做过一个比较复杂的移动端大数据项目,技术栈采用 Framework7 + Vue + Vuex,整体效果还是满意的。

因为去年的项目几乎都是后台管理系统,所以框架用的不多,主要还是传统方式开发,后期为了改善前端开发体验,逐步在向框架靠拢。通过第三方 Bootstrap 框架对比发现,大多都有 Angular 版本,而且组件库是最全的,React 和 Vue 版本的组件库相对匮乏一些。事实证明使用 Angular 开发大型后台管理系统具有独特的优势。另一方面, Angular 是困难度复杂度的一个缩影,它汇聚了设计模式、设计哲学、工程化思想,对于前端开发是质的飞越。 除此之外,Angular 的文档让我着迷,除了基本的教程之外,其核心知识是最让我津津乐道的地方,不仅可以了解技术内幕,甚至可以学习很多基础知识,都非常实用,对于前端新手以及业余爱好者都有很大的帮助作用。

使用 Angular 开发需要非常多的前置知识,比如 TypeScript、RxJS 等,所以学习成本比较高,这也是很多人望而却步的一个原因。在经过很长时间的学习及准备之后,终于在今年有了项目实战的机会,项目很小,是整个系统中的一个独立模块,但是几乎所有知识都有涉猎,可谓“麻雀虽小五脏俱全”。本文就是对该项目的一些总结及思考。

搭建开发环境

开发环境的搭建非常简单,使用 Angular CLI 几乎可以完成所有工作,但是在与后端联调接口的时候,还需要做一些自定义配置。以下是 proxy.config.json 文件的基本设置:

{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}

Angular CLI 的使用贯穿整个项目,从开发到打包无处不在,这也是 Angular 工程化的体现。因为 CLI 的参数非常多,必须仔细阅读文档,合理设置参数,所有的需求几乎都能在参数中找到。其中使用 ng build 打包后可能会有资源引用错误的问题,可以看一下使用 ng build 构建后资源地址引用错误的问题

在联调接口时,可能还会遇到传输 Cookie 的问题,具体可以参见 关于 Angular 跨域请求携带 Cookie 的问题

选择 UI 库

因为项目比较小,开发之初打算自己写组件,比如分页,但实际情况比较复杂,尤其刚接触 Angular,对于组件交互、异步数据还有点懵,尝试写了一下,仍然有很多问题,所以最终还是选择比较成熟的 UI 库。

UI 库的选择需要根据样式决定,比如我的项目使用的是 Bootstrap,所以 UI 库选择了和 Bootstrap 相关的 ngx-bootstrap。对于后台管理系统,常用的组件无外乎弹窗、分页、标签页等。对于更复杂的系统,也可以根据自己的情况选择其他组件更丰富的 UI 库,比如 PrimeNG 等。

组件库主要使用了弹窗及分页,其中 ngx-bootstrap 的弹窗是一个比价优秀的组件,信息输入及提示都会用到。以下是一个自定义 Alert 弹窗,通过 Service 共享组件即可。

modal-alert.component.html 中的代码是整个组件的 HTML 结构,有两个变量及一个实例方法。

<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{{content}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">关闭</button>
</div>

modal-alert.component.ts 中定义变量及组件实例。

import { Component, OnInit } from '@angular/core';

import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
selector: 'app-modal-alert',
templateUrl: './modal-alert.component.html',
styleUrls: ['./modal-alert.component.css']
})
export class ModalAlertComponent implements OnInit { title: string;
content: string; constructor(public bsModalRef: BsModalRef) {} ngOnInit() {
} }

modal.service.ts 中定义了组件的公共方法 modalAlert()

export class ModalService {
modalRef: BsModalRef; constructor(private modalService: BsModalService, private http: HttpClient) { } modalAlert(msg: string) {
const initialState = {
content: msg,
title: '提示信息'
};
this.modalRef = this.modalService.show(ModalAlertComponent,
{
initialState: initialState,
class: 'modal-sm'
}
);
}
}

最后还需要在 app.module.ts 中定义 entryComponents,比如:

@NgModule({
declarations: [
...
],
imports: [
...
],
...
entryComponents: [ModalAlertComponent, ModalConfirmComponent]
})

还有一点需要注意,在使用模板引用变量时,不要和函数名重名,有时图省事可能会忽略这一点。比如以下代码会报错:

<ng-template #Alert>
...
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="Alert()">确定</button>
</div>
</ng-template>

表单的多样性

Angular 提供了两种表单,模板驱动表单响应式表单。其中模板驱动表单简单灵活,适用于不复杂的表单数据。

关于表单这一块,我们将 Angular 和 Vue 放在一起说,Vue 的表单绑定就属于模板驱动表单。不过 Angular 的模板驱动表单并没有复选框的多选绑定,如果有这个需求,可以选择更加灵活强大的响应式表单进行数据绑定。其实,对于数组形式的数据可以使用天然的 select 多选框实现。比如以下代码:

<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power"
multiple
required
[(ngModel)]="model.power"
name="power">
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>

关于数组类型的数据,在 Vue 中有两种绑定方法,分别是复选框及 select 多选框。然而复选框的 value 值只有 true 或者 false,而 select 多选框的 value 值就是数组。所以 Vue 对复选框的多选操作进行了处理,而 Angular 没有,需要你自己处理。通过 Angular 的响应式表单可以很容易实现。但是对于模板驱动表单也可以用另类的方式实现,比如手动实现一个双向数据绑定,虽然有点麻烦,但却是可行的。关于这个话题我放到下一篇文章中说明。

官方文档中关于表单的内容非常详细,从用户输入到绑定再到校验,比着葫芦画瓢就可以轻松实现双向数据绑定。我非常喜欢 Angular 中 [()] (盒子里的香蕉)这种数据绑定方式,通过阅读官方文档的核心知识,对于双向数据绑定的认识有了质的提高。

管道之数据映射

管道的用处非常大,就我个人而言,时间转换及数据映射比较常见。我主要想讨论一下数据映射的问题。起初打算自己写关于数据映射的管道,但是想了想,难道不同的数据映射都单独写一个管道?然后我就想有没有自带的管道实现数据映射,仔细翻了翻文档,最后终于找到了,I18nPluralPipe 就是用于映射数据的。我们用一个最常见的数据映射例子说明,比如保存性别数据时,1 表示男,2 表示女。

@Component({
selector: 'i18n-plural-pipe',
template: `<div>{{ sex | i18nPlural: sexMapping }}</div>`
})
export class I18nPluralPipeComponent {
sex: string = '1';
sexMapping: {[k: string]: string} = {'=1': '男', '=2': '女', 'other': '其他'};
}

I18nPluralPipe 使用了 ICU 格式,确实长见识了。这个管道真的很好用,至少不用对每一个数据映射都写一个专用管道了。

上方示例代码中, sexMapping 使用接口中的可索引的类型进行定义。

异步开发之 RxJS

关于 RxJS 是一个比较复杂的话题,我也没有完全弄明白。Angular 官网的定义如下:

响应式编程是一种面向数据流和变更传播的异步编程范式(Wikipedia)。RxJS(响应式扩展的 JavaScript 版)是一个使用可观察对象进行响应式编程的库,它让组合异步代码和基于回调的代码变得更简单 (RxJS Docs)。

关于异步开发的历史在面试中有遇到过,可以说的东西很多,比如回调函数、Promise、迭代器和生成器、async 和 await,除此之外,RxJS 中的可观察对象(Observable)应该是下一个更强大的异步编程方式。Angular 官网对可观察对象(Observable)和承诺(Promise)进行了对比

需要特别注意的就是,只有当订阅 Observable 的实例时,它才会开始发布值。 订阅时要先调用该实例的 subscribe() 方法,并把一个观察者对象传给它,用来接收通知。我刚开始使用时,也是因为这个原因被坑了一把。以下是一个很简单的官方示例:

import { ajax } from 'rxjs/ajax';

// 创建一个发送 AJAX 请求的 Observable 对象
const apiData = ajax('/api/data');
// 订阅请求
apiData.subscribe(res => console.log(res.status, res.response));

总结

这个简单的小项目用了大约一周多的时间,Angular 算是入门了,关于 Angular 还有非常多值得深究的知识。整体而言,Angular + TypeScript 的开发方式非常舒服,VSCode 对 TS 的支持非常完美,语法提示、自动补全都很方便,强类型语言是前端开发的趋势。使用 Angular 开发,正如我文章开头提到的一样,不仅仅是学习一个框架,而是学习一种思想,了解更加优秀的开发模式、开源项目,可以让自己始终站在技术的前沿,这是我最大的收获。

如果大家喜欢 Angular 或者对 Angular Material 感兴趣,欢迎进群讨论!