Angular

Angular的八大件。Angular主要有8个东西构成，包括：

• 模块 (module)

• 组件 (component)

• 模板 (template)

• 元数据 (metadata)

• 数据绑定 (data binding)

• 指令 (directive)

• 服务 (service)

• 依赖注入 (dependency injection)

这八大件就好比孙悟空身上的毛，拔下来一吹，能变出各种东西来。所以啊，只要你吃透了这老北京八大件，那做一个客户端应用简直就是分分钟的事儿。

模板基本定义了你的应用长啥样，长得好不好看得有人看着，组件就负责管理这些模板。长得好看没用那不就成了花瓶了么，所以还需要服务来给应用添加一些逻辑，这些东西东一块西一块的乱七八糟还真不行，我们还需要模块来打包所有的组件、服务等等。所以说，模块就是用来打包的。一个应用程序有很多模块打的包，一层一层的，最开始那个就叫做根模块。我们通过引诱（其实是引导吧）根模块来启动程序。

我偷偷从官网偷了一张照片来给大家感受一下这八大件是怎么互相配合的。

　　

那下面就浅显地介绍一下这八大件。

模块 （Module）

刚才提到了根模块，是用来启动程序的。没有根模块，再好的程序也跑不起来。所以模块很重要很重要。Angular的应用，都是模块化的。每个feature特性都有自己的子模块，无论是子模块还是根模块定义的结构都差不多。我们可以把模块看成一个行李箱，里面装满了各种东西。包括declaration、imports、providers等。declaration用来放各种小零件，包括组件、指令、管道等。imports是导入其他的模块。providers用来盛放各种service。for一个example，一个module大概长这个样子。关于Module的细节，下一篇Angular的文章我会详细说哒。

　　

组件 (Component) 元数据 (Metadata) 模板 (Template)

这仨可以一起说。

模板就是HTML，就是你告诉Angular，喂喂喂，这儿你给我加个按钮，那儿你给我来个日历就是这样。除了<h1> <p>等等这些常见的html元素，我们还可以加自定义的元素在模板里面。

组件负责让模板看起来没那么无聊。比如你在模板里面定义了一个按钮，那你按了之后发生了什么啊？或者你定义了一个input box，你输入你的名字后会发生什么啊？这就需要Component来定义。

那每个Component都不一样，我们怎么区分呢？其实应该说Angular怎么识别呢？就是靠这个叫做元数据的东西。元数据会定义一些配置细节，告诉Angular：嘿Angular，如果你想把这个东西给大家看，那你得先去做ABCDEFG这几件事儿。Angular按照元数据的指示，根据Template的样子最后创建视图。

数据绑定 (Data Binding)

如果没有任何框架，我们自己写数据绑定，那简直就是人间地狱啊，噩梦啊。之前我们可怜的前端程序员都是用jQuery，我们要纯手工打造各种数据更新，UI更新，经常犯错，bug一堆堆，debug简直就是家常便饭。后来越来越多的框架都有数据绑定了，无论是单向的双向的还是五花板门乱七八糟项的，都帮我们可怜的前端程序员省去了很多时间。这样我们就可以早早下班回家老婆孩子热炕头了。

Angular2比Angular1更好滴实现了数据绑定。一共有四种吧：

1. {{someString}}这个叫插值绑定，从Component到DOM，之前在Angular1里面也有

2. [someThing] 这个叫属性绑定，也是从Component到DOM

3. （event）这个是事件绑定，从DOM到Component

4. 最后一个就是把上面这两个结合在一起[(ng…)] 双向绑定

　　

除了这四种现在在各大框架中都十分普遍的绑定方式外，Angular2里面还有一种爸爸对儿子的@input绑定和儿子对爸爸的@output绑定。这种方式让爸爸跟儿子毫无代沟，交流起来丝毫不费力。

指令 (directive)

指令跟组件(Component)非常类似，其实组件就相当于一个指令。指令地位崇高，包括结构型指令和属性指令。

结构型我们在Angular1里面也经常用啊，就是现在语法不太一样了，比如ngfor, ngIf等等，都是结构型指令。这些一般是不会改变任何元素的行为啦，外观啦等等。相反，属性型就非要改外观或者行为。

服务（Service）

以前呐，总听说中国服务业不发达，我回家一看，这挺发达的啊，到处灯红酒绿的。人想活的好啊，还得靠服务业，不是大保健那种服务啦。

　　

应用程序中的服务无处不在无孔不入，哪儿都有它。上面介绍的组件里面有一些变量，有些用户输入的变量啦，用户的选择啦，这些数据都乖乖地待在前端呢，不直接跟服务器对话。要不你用户爱输入什么输入什么，爱上传什么上传什么，服务器不就炸裂了么？组件要与服务(service)直接沟通。这样服务里面就可以加一些验证逻辑，比如你想下载小黄片什么的，服务可以阻止你（其实没有这种服务）。服务就像大宅子里面的大管家，所有的琐事儿都是服务来管。大管家希望每一个组件尽量精简，其余的细节内容都交给服务托管。那组件中如何使用这些服务呢？就靠下面要介绍的依赖注入。

依赖注入（Dependency Injection）

Angular通过依赖注入让组件可以使用服务。Angular创建一个组件的时候，首先你得跟上级领导请求，喂，领导啊，我这个组件需要这些服务，领导说，那好吧，那给你个注射器（injector）你用去吧。就像这样：

constructor( private service: MyService)

这个注射器啊会存放以前创建的那个服务，上面这行代码就是用service来存放之前创建好的MyService。那有些同学就要问了，你啥时候创建MyService的，我咋不知道？哦对，那如果这个服务还没有被创建的话，聪明的注射器同学就会先创建一个MyService服务实例，然后把这个服务跟Angular讲。这就是依赖注入啦。