Angular - 架构简介

Posted 2021-04-26 技术农夫

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放

很高兴，可以给大家聊聊 Angular 的一些趣事。

编者使用Angular是从学习Ionic搭建hybrid应用开始的。当时的Angular2方兴未艾，vue才刚刚起步，前端却已经风起云涌。回到正题：

Angular 是一门性能出色，UI组件丰富，构建工具成熟但是学习陡峭的前端框架，使用Typescript语言,目前更新到 Angular 5。

以下是内容的简介，希望读者注意：

1. Angular架构简介

2. Angular 5的新知识

---

一. Angualr的架构

    1.元数据

    2.模块、组件、模板

    3.数据绑定

    4.指令

    5.服务与依赖注入

1.元数据

这是 Angular 的概念，当一个类被写好后，在Angular中仍是不完整的，因为她缺少必要的修饰器元素方便Angular识别，这就是元数据。同时，注入元数据的方式是通过使用装饰器函数（Decorator )，比如@NgModule，@Component 等等，以@Component 装饰器举例，当我们创建完一个类A，并期望其成为一个Angular组件，我们会使用@Component 装饰器来标记该类，标记的目的是：让Angular 基于这些元数据信息创建和展示组件及其视图，将元数据( 蓝色部分 )添加进类中去：

@Component ({   

         selector:    ' xxx ',  

        templateUrl: ' xxx ',  

         providers:  ' xxx '

})

class A { xxx... }

这样就组件A就完成了。同样的当我们使用带有元数据的装饰器@NgModule标记其他类，那么该类也会变成根模块，并担起根模块所要肩负的责任。

2.模块、组件、模板

模块：

每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。每个 Angular 应用都有一个带有 @NgModule 装饰器( 往期文章中有修饰器的相关简介可以查询 )的类，被称作根模块。

组件：

组件负责控制屏幕上的一小块区域，我们称之为视图。组件通过提供一些由属性和方法组成的 API 与视图交互。

组件的实例有一个生命周期：新建、更新和销毁。 通过 Angular 的生命周期钩子接口（同样作为类的方法），开发者可以介入该生命周期中的这些关键时刻。这十分重要，下表为生命周期钩子接口：

钩子	目的和时机
ngOnChanges()	当Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象 当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit()之前。
ngOnInit()	在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。 在第一轮ngOnChanges()完成之后调用，只调用一次。
ngDoCheck()	检测，并在发生Angular无法或不愿意自己检测的变化时作出反应。 在每个Angular变更检测周期中调用，ngOnChanges()和ngOnInit()之后。
ngAfterContentInit()	当把内容投影进组件之后调用。 第一次ngDoCheck()之后调用，只调用一次。 只适用于组件。
ngAfterContentChecked()	每次完成被投影组件内容的变更检测之后调用。 ngAfterContentInit()和每次ngDoCheck()之后调用 只适合组件。
ngAfterViewInit()	初始化完组件视图及其子视图之后调用。 第一次ngAfterContentChecked()之后调用，只调用一次。 只适合组件。
ngAfterViewChecked()	每次做完组件视图和子视图的变更检测之后调用。 ngAfterViewInit()和每次ngAfterContentChecked()之后调用。 只适合组件。
ngOnDestroy()	当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。 在Angular销毁指令/组件之前调用。

模板：组件的元数据会带来用于交互的视图层信息，那就是模板。模板看起来很像标准 html，来渲染组件。

除了标准的HTML规范，模板还使用了 Angular 的模板语法。

其中，模板中可以嵌入自定义组件或者 Angular 内部组件，而子组件的构成又依赖于模板的建构。

3.数据绑定

通常的，想要数据更新，页面需要进行重新的渲染，而使用类似数据绑定的数据加载方式可以解决这些重渲染问题。

Angular 支持数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。 我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。

在Angular的官网，我们可以清楚知道，数据绑定包括事件绑定与属性绑定：

• 事件绑定：绑定事件，这是一种表现层导向数据逻辑层，即view 到view model的过程。

• 数据绑定：数据流，这是数据从组件到页面的过程，与以上过程恰恰相反。

到了双向绑定，就干脆融合了两者的功能，使用特别的指令，比如 ngModel。这里并不提供详细的指令用法。（如果对于数据绑定的内容你很感兴趣，比较 Angular 与 Vue 的实现细节会让你收获颇多）

4.指令

Angular 早期的教程可能会提到组件来源于指令，一切标签化的语言皆是指令（组件是一个带模板的指令）。

后来，组件的概念深入人心，于是组件被从指令的概念中脱离出去，成为前端运动的扛旗卫士。在Angular中，指令常常在标签中直接以属性的方式出现

现在的Angular内置指令分为两种：

• 结构型指令：改变页面。通过在 DOM 中添加、移除和替换元素来修改布局

• 属性型指令：改变页面。修改一个现有元素的外观或行为。如ngModule

5.服务和依赖注入

服务：该如何理解 Angular 架构的服务概念？Server 是一个用Typescript的一般类来实现的内容，并被组件、指令消费。比如你要写个通信工具，比如聊天室，那么通信协议及实现内容，可以被作为一个服务HttpServer类的一部分，而组件可以适时地调用这个服务去通信。这就是服务实现的一种，当然请在使用前实例她。

依赖注入：我们刚刚提到实例一个服务类是很重要的，Angular 通过查看构造函数的参数类型得知组件需要哪些服务。 

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。

官网原文是：

注入器维护了一个服务实例的容器，存放着以前创建的实例。如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

以上的核心是：

• 注入器负责维护一个容器，用于存放它创建过的服务实例。

• 注入器能使用提供商创建一个新的服务实例。

未完待续....