Angular 指令

2017-09-09

Angular的设计核心理念是数据绑定、组件化. 请时刻牢记这句话！

按照惯例，先来剧情透露：

angular指令种类
angular内置ngif指令
<template>标签
*ngIf语法糖
学习自定义一个指令

1.angular指令种类

Angular的指令分为以下三种：

组件
属性指令
结构指令

① 组件

Angular应用是由一个个的组件（component）构成的;组件是由html模板、组件类构成。
html模板实现页面的展示内容，组件类用来控制视图的展示形式。每一个组件都以@Component装饰器函数开始，该函数接受一个元数据对象参数，
这个元素苏描述了html模板与组件类如何协同工作的。

②属性指令

属性指令用于改变元素的外观和行为。如内置的ngClass、ngStyle指令。

③结构指令

结构指令通过添加或删除DOM元素来改变DOM布局。如内置的ngIf、ngSwitch、ngFor等指令。

下面我们主要针对ngIf来谈一下angular的一部分优缺点。

先看一个栗子：

<p *ngIf="true">
This information1 is displayed if condition is true.
</p>
<p *ngIf="!true">
Tihs information2 is deleted if condition is true.
</p>

打开浏览器及开发工具，效果如下;

我们看到dom树里面只有一个段落，也就是说第二个段落被*ngIf指令从DOM树种移除了，当然我们也可以通过设置元素节点css属性display:none将其隐藏。
在彻底明白angular底层是如何实现这一功能的，我们还有必要来看看html的一个不常用标签元素<template>
html5的template标签，允许开发者在里面添加一些代码段，这些代码段这页面初始化时不会被渲染，但可以被Javascript语句操作，并渲染在页面；
下面是angular2, ngIf代码的两种使用方法：

<!--(A)*语法糖 *ngIf paragraph-->
<p *ngIf="condition">This will show if condition is true.</p>
<!--(B)template标签 [ngIf] with template-->
<template [ngIf]="condition">
  <p>This will show if condition is true.</p>
</template>
//ps.通常我们采用第一种书写方式（A）： angular内部会将风格(A)转换成(B)

为什么angular将其从DOM树种删除，而不是隐藏，我们先来看看两者之间的区别：

①元素隐藏：元素仍在页面DOM树里面存在，仍然实时监听着页面的事件，如果绑定了数据，angular会继续对其进行动态监测；
②元素删除：元素彻底从页面DOM树消失，不会对页面的事件、数据及渲染造成任何影响；

我们之前说过，angular设计的核心理念之一便是数据绑定，就像官网所说：

最小化初始化的成本，并考虑把状态缓存在一个半生的服务中。

angular核心对数据进行自动检测；dom元素的操作、数据脏值检测，这两件事都是非常消耗cpu内存的，
angular吸取了angular1数据绑定的负面经验，采用了第一种方案。无疑这对于数据动态监听来说效率提高了很多，但仍不能说这是一个最好的实践方法。
作为一个开发者，在自定义新的指令时，我们同样面临着这种取舍，需要仔细考量添加元素、删除元素及销毁组件的成本和效率。