Angularv4入门篇1

国庆时按照官网的tutorial写了遍官方示例，一知半解，不明白angular的服务的服务为何要单独抽离出来、angular应用是如何启用的。近期打算看下angular的文档部分，然后梳理遍以理解angular的架构思想。

下面是一些需要明确的关键概念：

• angular：编写客户端应用的前端框架，官方推荐用angular/cli脚手架来进行开发，并且最新的angular版本使用ts语言。
• 组件(component)：负责控制屏幕一小块区域，也可以叫做视图(view)。
• 模块(module): 每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
• 模板： 组件通过模板来定义视图，模板以html的模式告诉angular如何渲染组件。与标准html不同的是，模板使用angular的模板语法，因此还能使用其他元素如*ngFor、<my-component>等。
• 元数据(metadata): 元数据告诉angular如何处理一个类。使用装饰器如@Component、@Injectable、@Input、@Output添加元数据来指导angular的行为。比如export class MyComponent implements OnInit{} 是一个js的原生类，需要使用@Component(configObj)附加元数据来修饰这个类，这会将之标记成angular的组件。
• 数据绑定(data binding): mvvm框架的核心功能。数据的变动会使UI更新，用户交互行为会修改数据，这使得创建应用程序的逻辑更为清楚。
• 指令(directive)：当angular渲染组件时，angular会根据指令提供的操作对dom进行转换。
• 服务(service): 一般是一个类，具有专注、明确的用途。它应该做一个特定的事情，并把它做好，比如：日志服务、服务数据、消息总线等。
• 依赖注入(Dependency injection):“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

angular的架构设计

这是angular的架构图。
angular用组件模块（Module Component）来构成应用程序，并向组件注入服务模块（Module Service）来向模块组件添加应用的逻辑部分，最终使用模块打包器来打包成最终的应用程序。组件模块的命名一般为```组件.component.ts```。
一般用模板(Template)来写页面部分，在脚手架中是使用扩展的语法来写html文件，模板名为```组件名.component.ts```,模板中可以写angular的指令(directive)，并且可以绑定组件模块中的数据（属性绑定、事件绑定等）。
通过向组件注入(inject)服务，可让组件具有各类功能。
angular应用程序按组件来编写应用程序页面，页面的一小块区域就是一个组件，并且一般会把css与模板抽离成单独的文件。比如有一个分页组件，那么在```page-select```文件夹下会有```page-elect.component.ts```,```page-elect.component.html```,```page-elect.component.css```这么三个文件。写组件模块化意味着页面且的解耦，便于维护。
在所有页面组件都编写完成后，angular可以从引导根模块（一般命名为AppModule)来启动应用。

模块

angular是模块化的，angular有自己的模块系统NgModules，angular中的模块都是带有```@NgModule```装饰器的类,装饰器用来把元数据附加到类上。模块一般都是专注于某个应用领域、某一工作流、或者由一系列功能相近的功能构成的。简单根模块示例：
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule,FormrModule,HttpModule,ApproutingModule ],
providers: [ Logger，SqlServer,CalcServer ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```

• declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。程序编写的所有页面布局组件都需要在这里声明。
• bootstrap - 指定应用的主视图（称为根组件），它是其他视图的宿主。只有根模块才能设置bootstrap属性。
• providers 与服务(service)有关的类，它会在应用程序的其他部分都可访问。
• imports 其他一些模块，它们能被declarations中的组件模板所使用。
• exports 它是其他declarations的子集，对其他模块的组件模板可见且能使用。

需要注意的是，angular的模块与js的模块系统完全不同且无关。不过在angular中它们是互补的。

另外，angular提供了一组JS模块，可以把它们当作库模块。

组件

组件负责控制屏幕一小块区域，也可以叫做视图(view)。

组件主要控制页面UI，创建一个angular组件需要从angular核心模块(@angular/clore)中引入component修改器，然后用它来修饰一个JS类，这样auglar就会知道这是一个组件。

简单示例：

@Component({

selector : 'mycomponent',

template : '<h2>测试</h2>'，

directives : [ComponentDetails]

})

export class TestComponent{...}

@Component中的参数是这个组件的配置信息，比如:

• template 模板，一般是用反引号`括起来的字符串。
• templateUrl 模板的url，把一个文件当作该组件的模板。templateUrl与template并与本质区别，但显然如果模板代码较多应使用templateUrl。
• selector 选择器，父组件使用该组件需要使用该选择器的中线命名法(dash-case)，比如这个示例就是<my-component></my-component>。当页面发现一个<my-component> 元素时，就会创建一个该组件TestComponent的实例，然后将其渲染到<my-component>标记处。
• directives组件用到的指令

元数据

比如```@Component```装饰器就是通过给一个js类附加相应的元数据来让angular知道它是一个组件。

数据绑定

MVVM框架的一大优点。想象Jquery时代是如何手动push和pull数据的。如果有多种途径可以改变某个值，那么数据的变动就会变得混乱且不方便跟踪。

数据绑定有三个方向： 绑定到 DOM 、绑定自 DOM 以及双向绑定（ to the DOM, from the DOM, or in both directions），具体有如下4种形式：

• {{person.age}}插值表达式;
• [name]属性绑定;
• (click)事件绑定;
• [(ngModel)]双向绑定。

Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。

数据绑定也在父子组件的通讯间起到作用。但如果同级组件、或者多个组件间需要共享数据的话，只使用数据绑定会把事情弄的复杂。这时候就需要使用状态管理如ngrx和redux,在angular的官方示例中有专门的服务。

数据绑定被人称作单向数据绑定(one-way data binding)，因为只能从组件的数据流动到目标的元素，而不能从目标元素流动到组件的数据中。同样的，也不能用数据绑定来调用目标元素上的方法。

指令

严格来说组件就是一个指令，```@Component```装饰器实际就是一个```@Directive```装饰器。
此外还有其他两种类型的指令：结构型指令(structural directives)和(属性型指令(attribute directives)。
结构型指令通常在DOM中添加、移除和替换元素来修改布局，如```*ngIf```、```*ngFor```。
属性型指令修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性，故名。比如```ngModel```实现了双向绑定，```Ngclass```用于添加或者移除CSS类,```NgStyle```用于添加或移除一组CSS样式。

服务

按照我的理解，服务是指将组件中的一些功能单独抽离出来，以保持组件的精简。
比如一个简单的购物车组件```Cart```，当然可以在其中定义大量的方法比如获取商品的详细信息的方法```getDetail```、判断仓库是否还有剩余你选中的商品```isRest```、根据你购物车中的商品给出推荐的搭配```match```，甚至还有对比购物车中商品在不同店铺中的价格等等各类功能。如果你想，你可以为一个购物车写上十几种方法，但现在这个组件就会显得很复杂。如果把这个方法抽离成独立的服务，比如商品信息获取服务、推荐搭配服务、价格比对服务等，单独写到一个文件中，再导入到组件，这就会显得比较简洁。
angular推荐的作法:组件只提供用户体验，它介于视图与应用逻辑之间，并把诸如写日志之类的任务委托给服务;服务本身不从服务器获得数据、不进行验证输入。
虽然这些要求不是强制性的，但显然将任务委托给服务能让代码更容易看懂些。

依赖注入

可以通过查看构造函数的参数类型得知需要哪些服务，比如以下示例类需要一个ServiceA服务： constructor(private service:ServiceA){}

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

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