浅谈 Angular 项目实战

为什么使用 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 开发，正如我文章开头提到的一样，不仅仅是学习一个框架，而是学习一种思想，了解更加优秀的开发模式、开源项目，可以让自己始终站在技术的前沿，这是我最大的收获。