Angular 第二篇 | Angular 架构

Angular架构

用angular扩展语法编写html模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。

以上包括了Angular 8个主要的架构

一、模块

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。
根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，没eigenvalue模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
angular模块无论是跟模块还是特性模块都是一个带有@NgModule装饰的类。
装饰器用来修饰javascript类的函数。angular有很多装饰类，它们负责把元数据附加到类上，好让那些类知道是如何工作的。
@NgModule是一个装饰函数，它接手一个用来描述模块属性的元素对象，其中最重要的属性是：

declarations - 声明本模块拥有视图类，Angular有三种视图类：组件、指令、管道
exports - declarations的自己，用于其他模块的组件模板
providers - 创建服务，并加入到全局服务列表中，可用于任何部分
bootstrap - 指定应用的主视图（成为根组件），它是所有视图的主视图，只有**根模块才能设置bootstrap属性。
示例模版：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

二、组件

图意

组建负责控制屏幕上的一小块区域，我们称它为视图。
我们在类中定义组建的应用逻辑，为视图提供支持。组件通过一些由属性和方法组成的API与视图交互。
示例：

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

以上HeroListComponent类有个heroes属性，它返回一个数组，这个数组从HeroService服务中获得。HeroListComponent还有一个selectHero()方法，当用户从列表中选中数组中一个，就把它设置到selectedHero属性。这里的HeroListComponent类它就是一个组件。

三、模板

图意

我们通过组件的自带模板来定义组件视图，模板以HTML形式存在，告诉Angular如何渲染组件。

Hero List
Pick a hero from the list

  
    {{hero.name}}

模版就可以理解为HTML元素，可以在typescript中直接写模版，也可单独建一个页面，然后引用该模版。在Angular中还可以自定义模版，以上就是自定义的模版。

四、元数据

元数据告诉Angular如何处理一个类。
在TypeScript中。用装饰器来附加元数据。

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

这里的@Component就是一个装饰器，它可以接受一个配置对象，然后Angular会基于这些信息创建和展示组件和视图。。

selector：CSS选择器，它告诉Angular在父级HTML中查找标签，创建并插入该组件，例如，如果应用的 HTML 包含， Angular 就会把HeroListComponent的一个实例插入到这个标签中。
templateUrl：组件HTML模板的模块相对地址。
providers：组件所需服务的*服务依赖注入提供商数组。告诉Angular在该组件的构造函数需要一个HeroServive服务，这样组件就可以从服务中获得该数据。
这里我的理解是元数据、模版、还有组件三个都存在就展现了视图，元数据告诉Angular从那个地方获取我们为组件制定的主要构建模块。

五、数据绑定

Angular有四种数据绑定形式：

    {{hero.name}}

第一种：显示组件的hero.name属性的值。
第二种：属性绑定把负组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。
第三种：事件绑定在用户点击它的时候调用组件的selectHero方法。
第四种：它使用ngModel指令组合了属性绑定和事件绑定的功能。
这里粗略的了解一下，日后深入。

六、指令

组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。虽然严格来讲的话组件就是一个指令，但在Angular 4.0 中指令被独立了出来。
指令包括了两种类型指令：结构型指令和属性型指令。
结构型指令就是在页面DOM中改变了页面结构，在DOM中添加、删除、和替换元素来修改了布局。
示例：

*ngFor告诉 Angular 为heroes列表中的每个英雄生成一个

标签。
*ngIf表示只有在选择的方法存在时，才会包含HeroDetail组件。
属性型指令也就好理解了，就是修改元素的属性。示例：

七、服务

服务是一个广义的范畴，包括：值、函数，或应用所需的特性。这是官方的解释，其实我也没明白服务具体到底是个什么鬼，也可能只是不理解。
组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。它们把这些任务委托给服务。
这里就不做示例了，还没有理解透。

八、依赖注入

Angular使用依赖注入来提供新组件以及组件所需的服务。当Angular创建组件时，会首先为组件索取要的服务请求一个注入器（injector)
注入器维护了一个服务实例的容器。存放着以前创建的实例。如果说请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给Angular。当所有请求的服务都被解析完并返回时。Angular会以这些服务为参数去调用组件的构造函数。这就是依赖注入.
如果注入器没有说需要的服务。我们就必须用注入器为需要的服务注册一个提供商（provider）。这个提供商用来创建或返回服务，通常就是这个服务类本身（相当new HeroServe()）。
我们可以在模块中或组件中注册提供商。
但通常会把提供商添加到根模块上，以便在任何地方都使用服务的同一个实例。示例：

providers: [
  BackendService,
  HeroService,
  Logger
],

或者也可以在@Component元数据中的providers属性中把它注册在组件层：

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。
关于依赖注入的要点是：

依赖注入渗透在整个Angular框架中，被到处使用。
注入器（injector） 是本机制的核心
注入器负责维护一个容器，用于存放它创建过的服务实例。
注入器能使用提供商创建一个新的服务实例。
提供商是一个用于创建服务的地方。
把提供商注册到注入器。

对于以上总结就是先创建模块，然后创建模版和组件，通过元数据展示到视图，组件管理模版，服务复杂应用的逻辑。
后面配上代码。