1-Angular入门

1.1-开发环境的搭建

  1. 安装最新版本的NodeJS

    具体安装教程可参照 https://www.cnblogs.com/zhouyu2017/p/6485265.html

  2. 设置镜像

    在命令窗口中进行操作：

    或者设置淘宝镜像：npm config set registry https://registry.npm.taobao.org/

    查看镜像地址：npm config get registry

  3. 安装Angular Cli

    安装脚手架工具：npm install -g @angular/cli

    如果npm安装脚手架工具失败，可先安装cnpm淘宝镜像 npm install –g cnpm –registry=https：//[registry.npm.taobao.org](http://registry.npm.taobao.org/)

    再使用cnpm安装脚手架工具 cnpm install -g @angular/cli

    验证是否安装成功：ng version

  4. 安装Visual Studio Code

    具体安装教程可参照 https://jingyan.baidu.com/article/59703552b622b78fc007401b.html

    安装完成后添加Angular v8 Snippets插件来支持Angular语法;安装Chinese(Simplified) Language Pack for Visual Studio Code插件来汉化Visual Studio Code;安装jslint插件来保持代码风格的一致性。

    插件具体安装教程可参照 https://jingyan.baidu.com/article/90808022029213fd91c80f15.html

    如果网络环境受到限制无法直接安装，可采用离线安装，具体的操作教程可参考：https://blog.csdn.net/u012814856/article/details/80684376

1.2-新建项目

  1. 新建项目

    找到你要创建项目的目录，使用“ng new 项目名称”创建一个Angular项目（如果要创建带路由的项目，则使用“ng new 项目名 --routing ”来创建项目）

    进入刚刚创建的项目的目录下，添加项目依赖：npm install 或 cnpm install

    启动项目ng serve （如果使用代理proxy.conf.json，则使用“npm start”来启动项目,此时需要在package,json中做相关配置：“start” : ”ng serve --proxy-config proxy.conf.json”,）

  2. 新建组件

    在app目录下新建components文件夹

    新建组件，在命令框中使用命令 “ng g component components/组件名” 创建新组件。创建之后要在app.module.ts中引入该组件

    新建文件夹、各种文件可直接在相应的目录下右击创建

  3. 使用ng-zorro的组件

    需要安装ng-zorro-antd相关的依赖，具体教程参见 https://ng.ant.design/docs/getting-started/zh

1.3-常见命令

  1. 查看nodejs的版本 node –v

  2. 查看npm的版本 npm –v

  3. 查看Cli脚手架的版本信息 ng version

  4. 设置npm前缀 npm config set prefix "D:\Develop\nodejs\node_global" （具体路径根据实际情况来定）

  5. 查看npm前缀 npm config get prefix

  6. 设置npm缓存 npm config set cache "D:\Develop\nodejs\node_cache" （具体路径根据实际情况来定）

  7. 查看npm缓存 npm config get cache

  8. 查看npm配置信息列表 npm config list

  9. 创建一个Angular项目 ng new 项目名称

  10. 创建一个带有路由的Angular项目 ng new 项目名称 --routing

  11. 退出某个目录 cd ..

  12. 进入某个目录 cd Program Files\Microsoft VS Code\bin （具体路径根据实际情况来定）

  13. 转换盘符 d： （具体切换到那个盘根据实际情况来定）

  14. 初始化项目依赖 npm install 或者 cnpm install

  15. 创建一个组件 ng g component components/组件名 （components是自己新建的文件夹，可根据实际情况改变）

  16. 启动项目 ng serve 或 ng serve --open

  17. 使用代理时启动项目 npm start

  18. 自动完成 ng-zorro-antd 的初始化配置 ng add ng-zorro-antd

1.4-参考网站

Angular 4.x 修仙之路https://segmentfault.com/a/1190000008754631

Angular中文官网:https://angular.cn/

npm install Angular依赖包下载https://www.npmjs.com/package/package

ng zorro网址https://ng.ant.design/docs/introduce/zh

2-Angular基础

2.1-架构概览

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。

Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。 应用至少会有一个用于引导应用的根模块，通常还会有很多特性模块。

  • 组件定义视图。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 每个应用都至少有一个根组件。
  • 组件使用服务。服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件中， 这能让你的代码更加模块化、更加可复用、更加高效。

组件和服务都是简单的类，这些类使用装饰器来标出它们的类型，并提供元数据以告知 Angular 该如何使用它们。

  • 组件类的元数据将组件类和一个用来定义视图的模板关联起来。 模板把普通的 HTML 和 Angular 指令与绑定标记（markup）组合起来，这样 Angular 就可以在呈现 HTML 之前先修改这些 HTML。
  • 服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过依赖注入（DI）使用该服务。

应用的组件通常会定义很多视图，并进行分级组织。 Angular 提供了 Router 服务来帮助你定义视图之间的导航路径。 路由器提供了先进的浏览器内导航功能。

2.2-基本概念

2.2.1-模块

Angular 定义了 NgModule，它和 JavaScript（ES2015） 的模块不同而且有一定的互补性。 NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。

每个 Angular 应用都有一个根模块，通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多功能模块。

像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供其它 NgModule 使用。 比如，要在你的应用中使用路由器（Router）服务，就要导入 Router 这个 NgModule。

把你的代码组织成一些清晰的功能模块，可以帮助管理复杂应用的开发工作并实现可复用性设计。 另外，这项技术还能让你获得惰性加载（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代码体积。

2.2.2-组件

每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。 每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML 模板相关联，该模板定义了一个供目标环境下显示的视图。

@Component() 装饰器表明紧随它的那个类是一个组件，并提供模板和该组件专属的元数据。

2.2.3-模板、指令和数据绑定

模板会把 HTML 和 Angular 的标记（markup）组合起来，这些标记可以在 HTML 元素显示出来之前修改它们。 模板中的指令会提供程序逻辑，而绑定标记会把你应用中的数据和 DOM 连接在一起。 有两种类型的数据绑定：

  • 事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。
  • 属性绑定让你将从应用数据中计算出来的值插入到 HTML 中。

在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式，以修改 HTML 元素和 DOM。 Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择）同样可以反映回你的程序数据中。

你的模板也可以用管道转换要显示的值以增强用户体验。比如，可以使用管道来显示适合用户所在地区的日期和货币格式。 Angular 为一些通用的转换提供了预定义管道，你还可以定义自己的管道。

2.2.4-服务与依赖注入

对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建服务类。 服务类的定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中。

依赖注入（或 DI）让你可以保持组件类的精简和高效。有了 DI，组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台，而是会把这些任务委托给服务。

2.2.5-路由

Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。 它的工作模型基于人们熟知的浏览器导航约定：

  • 在地址栏输入 URL，浏览器就会导航到相应的页面。
  • 在页面中点击链接，浏览器就会导航到一个新页面。
  • 点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。

不过路由器会把类似 URL 的路径映射到视图而不是页面。 当用户执行一个动作时（比如点击链接），本应该在浏览器中加载一个新页面，但是路由器拦截了浏览器的这个行为，并显示或隐藏一个视图层次结构。

如果路由器认为当前的应用状态需要某些特定的功能，而定义此功能的模块尚未加载，路由器就会按需惰性加载此模块。

路由器会根据你应用中的导航规则和数据状态来拦截 URL。 当用户点击按钮、选择下拉框或收到其它任何来源的输入时，你可以导航到一个新视图。 路由器会在浏览器的历史日志中记录这个动作，所以前进和后退按钮也能正常工作。

要定义导航规则，你就要把导航路径和你的组件关联起来。 路径（path）使用类似 URL 的语法来和程序数据整合在一起，就像模板语法会把你的视图和程序数据整合起来一样。 然后你就可以用程序逻辑来决定要显示或隐藏哪些视图，以根据你制定的访问规则对用户的输入做出响应。

注：这些基础部门之间是如何关联的呢？

  • 组件和模板共同定义了 Angular 的视图。
    • 组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。
    • 组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。
  • 依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。

2.3-模块NgModule

  1. NgModule简介

Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。

每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。

虽然小型的应用可能只有一个 NgModule，不过大多数应用都会有很多特性模块。应用的根模块之所以叫根模块，是因为它可以包含任意深度的层次化子模块。

  1. @NgModule 元数据

    NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。

    • declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。

    • exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。

    • imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。

    • providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）

    • bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。

    • 一个简单的根 NgModule 定义：

      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 { }

  2. NgModule 和组件

    NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件，并在引导期间创建它。 但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。

    组件及其模板共同定义视图。组件还可以包含视图层次结构，它能让你定义任意复杂的屏幕区域，可以将其作为一个整体进行创建、修改和销毁。 一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。

  3. Angular 自带的库

    Angular 会作为一组 JavaScript 模块进行加载，你可以把它们看成库模块。每个 Angular 库的名称都带有 @angular 前缀。 使用 npm 包管理器安装 Angular 的库，并使用 JavaScript 的 import 语句导入其中的各个部分。

    例如，像下面这样，从 @angular/core 库中导入 Angular 的 Component 装饰器

    import { Component } from '@angular/core'

2.4-组件

组件控制屏幕上被称为视图*的一小片区域。比如，教程中的下列视图都是由一个个组件所定义和控制的：

  • 带有导航链接的应用根组件。
  • 英雄列表。
  • 英雄编辑器。

你在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。

比如，HeroListComponent 中有一个 名为heroes的属性，它储存着一个数组的英雄数据。 HeroListComponent 还有一个 selectHero() 方法，当用户从列表中选择一个英雄时，它会设置 selectedHero 属性的值。 该组件会从服务获取英雄列表，它是一个 TypeScript 的构造器参数型属性。本服务通过依赖注入系统提供给该组件。

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; }
}

当用户在应用中穿行时，Angular 就会创建、更新、销毁一些组件。 你的应用可以通过一些可选的生命周期钩子（比如ngOnInit()）来在每个特定的时机采取行动。

  1. 组件的元数据

    @Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。 在下面的范例代码中，你可以看到 HeroListComponent 只是一个普通类，完全没有 Angular 特有的标记或语法。 直到给它加上了 @Component 装饰器，它才变成了组件。

    组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。 具体来说，它把一个模板（无论是直接内联在代码中还是引用的外部文件）和该组件关联起来。 该组件及其模板，共同描述了一个视图。

    除了包含或指向模板之外，@Component 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。

    下面的例子中就是 HeroListComponent 的基础元数据：

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

    这个例子展示了一些最常用的 @Component 配置选项：

    • selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 比如，如果应用的 HTML 中包含 ``，Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。
    • templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用 template 属性的值来提供内联的 HTML 模板。 这个模板定义了该组件的宿主视图。
    • providers：当前组件所需的服务提供商的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。

  2. 模板与视图

    你要通过组件的配套模板来定义其视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件。

    视图通常会分层次进行组织，让你能以 UI 分区或页面为单位进行修改、显示或隐藏。 与组件直接关联的模板会定义该组件的宿主视图。该组件还可以定义一个带层次结构的视图，它包含一些内嵌的视图作为其它组件的宿主。

    带层次结构的视图可以包含同一模块（NgModule）中组件的视图，也可以（而且经常会）包含其它模块中定义的组件的视图。

  3. 模板语法

    模板很像标准的 HTML，但是它还包含 Angular 的模板语法，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。 你的模板可以使用数据绑定来协调应用和 DOM 中的数据，使用管道在显示出来之前对其进行转换，使用指令来把程序逻辑应用到要显示的内容上。

    比如，下面是本教程中 HeroListComponent 的模板：

    <h2>Hero List</h2>

    <p><i>Pick a hero from the list</i></p>
    <ul>
      <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
        {{hero.name}}
      </li>
    </ul>

    <app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

    这个模板使用了典型的 HTML 元素，比如 和，还包括一些 Angular 的模板语法元素，如 *ngFor，{{hero.name}}，click、[hero] 和 ``。这些模板语法元素告诉 Angular 该如何根据程序逻辑和数据在屏幕上渲染 HTML。

    • *ngFor 指令告诉 Angular 在一个列表上进行迭代。
    • {{hero.name}}、(click) 和 [hero] 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参见稍后的数据绑定部分。
    • 模板中的 `` 标签是一个代表新组件 HeroDetailComponent 的元素。 HeroDetailComponent（代码略）定义了 HeroListComponent 的英雄详情子视图。 注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。

  4. 数据绑定

    如果没有框架，你就要自己负责把数据值推送到 HTML 控件中，并把来自用户的响应转换成动作和对值的更新。 手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 有前端 JavaScript 开发经验的程序员一定深有体会。

    Angular 支持双向数据绑定，这是一种对模板中的各个部件与组件中的各个部件进行协调的机制。 往模板 HTML 中添加绑定标记可以告诉 Angular 该如何连接它们。

    下图显示了数据绑定标记的四种形式。每种形式都有一个方向 —— 从组件到 DOM、从 DOM 到组件或双向。

`HeroListComponent` 模板中的例子使用了其中的三种形式：

<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>
  • {{hero.name}}插值表达式在 `` 标签中显示组件的 hero.name 属性的值。
  • [hero]属性绑定把父组件 HeroListComponent 的 selectedHero 的值传到子组件 HeroDetailComponent 的 hero 属性中。
  • 当用户点击某个英雄的名字时，(click) 事件绑定会调用组件的 selectHero 方法。

双向数据绑定（主要用于模板驱动表单中），它会把属性绑定和事件绑定组合成一种单独的写法。

`HeroDetailComponent` 模板中的例子通过 `ngModel` 指令使用了双向数据绑定：

<input [(ngModel)]="hero.name">

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

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

数据绑定在模板及其组件之间的通讯中扮演了非常重要的角色，它对于父组件和子组件之间的通讯也同样重要。

  1. 管道

    Angular 的管道可以让你在模板中声明显示值的转换逻辑。 带有 @Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。

    Angular 自带了很多管道，比如 date 管道和 currency 管道，完整的列表参见 Pipes API 列表。你也可以自己定义一些新管道。

    要在 HTML 模板中指定值的转换方式，请使用 管道操作符 (|)。

    {{interpolated_value | pipe_name}}

    你可以把管道串联起来，把一个管道函数的输出送给另一个管道函数进行转换。 管道还能接收一些参数，来控制它该如何进行转换。

    比如，你可以把要使用的日期格式传给 date 管道：

    <!-- Default format: output 'Jun 15, 2015'-->

     <p>Today is {{today | date}}</p>

    <!-- fullDate format: output 'Monday, June 15, 2015'-->

    <p>The date is {{today | date:'fullDate'}}</p>

     <!-- shortTime format: output '9:43 AM'-->

     <p>The time is {{today | date:'shortTime'}}</p>

  2. 指令

    Angular 的模板是动态的。当 Angular 渲染它们的时候，会根据指令给出的指示对 DOM 进行转换。 指令就是一个带有 @Directive() 装饰器的类。

    组件从技术角度上说就是一个指令，但是由于组件对 Angular 应用来说非常独特、非常重要，因此 Angular 专门定义了 @Component() 装饰器，它使用一些面向模板的特性扩展了 @Directive() 装饰器。

    除组件外，还有两种指令：结构型指令和属性型指令。 Angular 本身定义了一系列这两种类型的指令，你也可以使用 @Directive() 装饰器来定义自己的指令。

    像组件一样，指令的元数据把它所装饰的指令类和一个 selector 关联起来，selector 用来把该指令插入到 HTML 中。 在模板中，指令通常作为属性出现在元素标签上，可能仅仅作为名字出现，也可能作为赋值目标或绑定目标出现。

    • 结构型指令

      结构型指令通过添加、移除或替换 DOM 元素来修改布局。

      这个范例模板使用了两个内置的结构型指令来为要渲染的视图添加程序逻辑：

      <li *ngFor="let hero of heroes"></li>
      <app-hero-detail *ngIf="selectedHero"></app-hero-detail>
      • *ngFor 是一个迭代器，它要求 Angular 为 heroes 列表中的每个英雄渲染出一个 ``。
      • *ngIf 是个条件语句，只有当选中的英雄存在时，它才会包含 HeroDetail 组件。

    • 属性型指令

      属性型指令会修改现有元素的外观或行为。 在模板中，它们看起来就像普通的 HTML 属性一样，因此得名“属性型指令”。

      ngModel 指令就是属性型指令的一个例子，它实现了双向数据绑定。 ngModel 修改现有元素（一般是 ``）的行为：设置其显示属性值，并响应 change 事件。

      <input [(ngModel)]="hero.name">

      Angular 还有很多预定义指令既不修改布局结构（比如 ngSwitch），也不修改 DOM 元素和组件的样子（比如 ngStyle 和 ngClass）。

2.5-服务与依赖注入

服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。

Angular 把组件和服务区分开，以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。

理想情况下，组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些模型的概念）的中介者。

组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供商，你还可以让你的应用更具适应性。

Angular 不会强迫你遵循这些原则。Angular 只会通过依赖注入来帮你更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。

  1. 服务案例

    下面是一个服务类的范例，用于把日志记录到浏览器的控制台：

    export class Logger {
      log(msg: any)   { console.log(msg); }
      error(msg: any) { console.error(msg); }
      warn(msg: any)  { console.warn(msg); }
    }

    服务也可以依赖其它服务。比如，这里的 HeroService 就依赖于 Logger 服务，它还用 BackendService 来获取英雄数据。BackendService 还可能再转而依赖 HttpClient 服务来从服务器异步获取英雄列表。

    export class HeroService {
      private heroes: Hero[] = [];

      constructor(
        private backend: BackendService,
        private logger: Logger) { }

      getHeroes() {
        this.backend.getAll(Hero).then( (heroes: Hero[]) => {
          this.logger.log(`Fetched ${heroes.length} heroes.`);
          this.heroes.push(...heroes); // fill cache
        });
        return this.heroes;
      }
    }

  2. 依赖注入

    DI 被融入 Angular 框架中，用于在任何地方给新建的组件提供服务或所需的其它东西。 组件是服务的消费者，也就是说，你可以把一个服务注入到组件中，让组件类得以访问该服务类。

    在 Angular 中，要把一个类定义为服务，就要用 @Injectable() 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中。 同样，也要使用 @Injectable() 装饰器来表明一个组件或其它类（比如另一个服务、管道或 NgModule）拥有一个依赖。

    • 注入器是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。
    • 该注入器会创建依赖、维护一个容器来管理这些依赖，并尽可能复用它们。
    • 提供商是一个对象，用来告诉注入器应该如何获取或创建依赖。

    你的应用中所需的任何依赖，都必须使用该应用的注入器来注册一个提供商，以便注入器可以使用这个提供商来创建新实例。 对于服务，该提供商通常就是服务类本身。

    当 Angular 创建组件类的新实例时，它会通过查看该组件类的构造函数，来决定该组件依赖哪些服务或其它依赖项。 比如 HeroListComponent 的构造函数中需要 HeroService：

    constructor(private service: HeroService) { }

    当 Angular 发现某个组件依赖某个服务时，它会首先检查是否该注入器中已经有了那个服务的任何现有实例。如果所请求的服务尚不存在，注入器就会使用以前注册的服务提供商来制作一个，并把它加入注入器中，然后把该服务返回给 Angular。

    当所有请求的服务已解析并返回时，Angular 可以用这些服务实例为参数，调用该组件的构造函数。

    HeroService 的注入过程如下所示：

  1. 提供服务

    对于要用到的任何服务，你必须至少注册一个提供商。服务可以在自己的元数据中把自己注册为提供商，这样可以让自己随处可用。或者，你也可以为特定的模块或组件注册提供商。要注册提供商，就要在服务的 @Injectable() 装饰器中提供它的元数据，或者在@NgModule() 或 @Component() 的元数据中。

    • 默认情况下，Angular CLI 的 ng generate service 命令会在 @Injectable() 装饰器中提供元数据来把它注册到根注入器中。本教程就用这种方法注册了 HeroService 的提供商：
    content_copy@Injectable({  providedIn: 'root', })

    当你在根一级提供服务时，Angular 会为 HeroService 创建一个单一的共享实例，并且把它注入到任何想要它的类中。这种在 @Injectable 元数据中注册提供商的方式还让 Angular 能够通过移除那些从未被用过的服务来优化大小。

    • 当你使用特定的 NgModule 注册提供商时，该服务的同一个实例将会对该 NgModule 中的所有组件可用。要想在这一层注册，请用 @NgModule() 装饰器中的 providers 属性：
    content_copy@NgModule({  providers: [   BackendService,   Logger ], ... })

    • 当你在组件级注册提供商时，你会为该组件的每一个新实例提供该服务的一个新实例。 要在组件级注册，就要在 @Component() 元数据的 providers 属性中注册服务提供商。

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

2.6-工具与技巧

响应式编程工具

  • 生命周期钩子：通过实现生命周期钩子接口，可以窃听组件生命周期中的一些关键时刻 —— 从创建到销毁。
  • 可观察对象（Observable）和事件处理：如何在组件和服务中使用可观察对象来发布和订阅任意类型的消息，比如用户交互事件和异步操作结果。

客户端与服务器的交互工具

  • HTTP：用 HTTP 客户端与服务器通讯，以获取数据、保存数据或执行服务端动作。
  • 服务端渲染：Angular Universal 会通过服务端渲染（SSR）技术在服务器上生成静态的应用页面。 这让你可以在服务器上运行 Angular 应用，以提升性能并在手机或低功耗设备上快速显示首屏，并为 Web 爬虫提供帮助（SEO）。
  • Service Worker：借助 Service Worker 来减轻对网络的依赖，你可以显著提升用户体验。

特定领域的库

  • 动画：使用 Angular 的动画库，你可以让组件支持动画行为，而不用深入了解动画技术或 CSS。
  • Forms：通过基于 HTML 的验证和脏数据检查，来支持复杂的数据输入场景。

为开发周期提供支持

  • 编译：Angular 为开发环境提供了 JIT（即时）编译方式，为生产环境提供了 AOT（预先）编译方式。

  • 测试平台：对应用的各个部件运行单元测试，让它们好像在和 Angular 框架交互一样。

  • 国际化：Angular 的国际化工具可以帮助你让应用可用于多种语言中。

  • 安全指南：学习 Angular 对常见 Web 应用的弱点和工具（比如跨站脚本攻击）提供的内置防护措施。

环境搭建、构建与开发配置

  • CLI 命令参考手册：Angular CLI 是一个命令行工具，你可以使用它来创建项目、生成应用及库代码，还能执行很多开发任务，比如测试、打包和发布。
  • 工作区与文件结构：理解 Angular 工作区与项目文件夹的结构。
  • npm 包：Angular 框架、Angular CLI 和 Angular 应用中用到的组件都是用 npm 打包的，并通过 npm 注册服务器进行发布。Angular CLI 会创建一个默认的 package.json 文件，它会指定一组初始的包，它们可以一起使用，共同支持很多常见的应用场景。
  • TypeScript 配置：TypeScript 是 Angular 应用开发的主要语言。
  • 浏览器支持：学习如何让你的应用能和各种浏览器兼容。
  • 构建与运行：学习为项目定义不同的构建和代理服务器设置的配置方式，比如开发、预生产和生产。
  • 部署：学习把你的 Angular 应用发布到远端服务器的技巧。

3-组件与模板

3.1-显示数据

  1. 使用插件表达式显示组件属性

    要显示组件的属性，最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。 要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如 {{myHero}}。

    使用 CLI 命令 ng new displaying-data 创建一个工作空间和一个名叫 displaying-data 的应用。

    删除 app.component.html 文件，这个范例中不再需要它了。

    然后，到 app.component.ts 文件中修改组件的模板和代码。

    修改完之后，它应该是这样的：

    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      template: `
        <h1>{{title}}</h1>
        <h2>My favorite hero is: {{myHero}}</h2>
        `
    })
    export class AppComponent {
      title = 'Tour of Heroes';
      myHero = 'Windstorm';
    }

    再把两个属性 title 和 myHero 添加到之前空白的组件中。

    修改完的模板会使用双花括号形式的插值表达式来显示这两个模板属性：

    template: `
      <h1>{{title}}</h1>
      <h2>My favorite hero is: {{myHero}}</h2>
      `

    Angular 自动从组件中提取 title 和 myHero 属性的值，并且把这些值插入浏览器中。当这些属性发生变化时，Angular 就会自动刷新显示。

    注意：你没有调用 new 来创建 AppComponent 类的实例，是 Angular 替你创建了它。那么它是如何创建的呢？

    注意 ：@Component 装饰器中指定的 CSS 选择器 selector，它指定了一个叫 `` 的元素。 该元素是 index.html 文件里的一个占位符。

    src/index.html

    <body>
      <app-root></app-root>
    </body>

    当你通过 main.ts 中的 AppComponent 类启动时，Angular 在 index.html 中查找一个 元素， 然后实例化一个 `AppComponent`，并将其渲染到 标签中。

    运行应用。它应该显示出标题和英雄名：

  2. 内联模板还是模板文件？

    你可以在两种地方存放组件模板。 你可以使用 template 属性把它定义为内联的，或者把模板定义在一个独立的 HTML 文件中， 再通过 @Component 装饰器中的 templateUrl 属性， 在组件元数据中把它链接到组件。

    到底选择内联 HTML 还是独立 HTML 取决于个人喜好、具体状况和组织级策略。 上面的应用选择内联 HTML ，是因为模板很小，而且没有额外的 HTML 文件显得这个演示简单些。

    无论用哪种风格，模板数据绑定在访问组件属性方面都是完全一样的。

    默认情况下，Angular CLI 命令 ng generate component 在生成组件时会带有模板文件，你可以通过参数来覆盖它

  3. 使用构造函数还是变量初始化？

    虽然这个例子使用了变量赋值的方式初始化组件，你还可以使用构造函数来声明和初始化属性。

    export class AppComponent {
      title: string;
      myHero: string;

      constructor() {
        this.title = 'Tour of Heroes';
        this.myHero = 'Windstorm';
      }
    }

  4. 使用ngFor显示数组属性

    要显示一个英雄列表，先向组件中添加一个英雄名字数组，然后把 myHero 重定义为数组中的第一个名字。

    export class AppComponent {
      title = 'Tour of Heroes';
      heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
      myHero = this.heroes[0];
    }

    接着，在模板中使用 Angular 的 ngFor 指令来显示 heroes 列表中的每一项

    template: `
      <h1>{{title}}</h1>
      <h2>My favorite hero is: {{myHero}}</h2>
      <p>Heroes:</p>
      <ul>
        <li *ngFor="let hero of heroes">
          {{ hero }}
        </li>
      </ul>
    `

    这个界面使用了由 和 标签组成的无序列表。元素里的 `*ngFor` 是 Angular 的“迭代”指令。 它将 元素及其子级标记为“迭代模板”：

    <li *ngFor="let hero of heroes">
      {{ hero }}
    </li>

  5. 为数据创建一个类

    应用代码直接在组件内部直接定义了数据。 作为演示还可以，但它显然不是最佳实践。

    现在使用的是到了一个字符串数组的绑定。在真实的应用中，大多是到一个对象数组的绑定。

    要将此绑定转换成使用对象，需要把这个英雄名字数组变成 Hero 对象数组。但首先得有一个 Hero 类。

    ng generate class hero

    代码如下：

    export class Hero {
      constructor(
        public id: number,
        public name: string) { }
    }

    你定义了一个类，具有一个构造函数和两个属性：id 和 name。

    它可能看上去不像是有属性的类，但它确实有，利用的是 TypeScript 提供的简写形式 —— 用构造函数的参数直接定义属性。

    来看第一个参数：

    public id: number,这个简写语法做了很多：

    • 声明了一个构造函数参数及其类型。
    • 声明了一个同名的公共属性。
    • 当创建该类的一个实例时，把该属性初始化为相应的参数值。

    使用Hero类：

    导入了 Hero 类之后，组件的 heroes 属性就可以返回一个类型化的Hero 对象数组了

    heroes = [
      new Hero(1, 'Windstorm'),
      new Hero(13, 'Bombasto'),
      new Hero(15, 'Magneta'),
      new Hero(20, 'Tornado')
    ];
    myHero = this.heroes[0];

    接着，修改模板。 现在它显示的是英雄的 id 和 name。 要修复它，只显示英雄的 name 属性就行了。

    template: `
      <h1>{{title}}</h1>
      <h2>My favorite hero is: {{myHero.name}}</h2>
      <p>Heroes:</p>
      <ul>
        <li *ngFor="let hero of heroes">
          {{ hero.name }}
        </li>
      </ul>
    `

  6. 通过ngIf进行条件显示

    有时，应用需要只在特定情况下显示视图或视图的一部分。

    来改一下这个例子，如果多于三位英雄，显示一条消息。

    Angular 的 ngIf 指令会根据一个布尔条件来显示或移除一个元素。 来看看实际效果，把下列语句加到模板的底部：

    <p *ngIf="heroes.length > 3">There are many heroes!</p>

    双引号中的模板表达式 *ngIf="heros.length > 3"，外观和行为很象 TypeScript 。 当组件中的英雄列表有三个以上的条目时，Angular 就会把这个段落添加到 DOM 中，于是消息显示了出来。 如果有三个或更少的条目，则 Angular 会省略这些段落，所以不显示消息。

    Angular 并不是在显示和隐藏这条消息，它是在从 DOM 中添加和移除这个段落元素。 这会提高性能，特别是在一些大的项目中有条件地包含或排除一大堆带着很多数据绑定的 HTML 时。

3.2-模板语法

Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（组件）和面向用户的模板交互来实现这一点。

从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。 在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。

  1. 模板中的HTML

    HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。 但值得注意的例外是 元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上， 只是被忽略了。）

    有些合法的 HTML 被用在模板中是没有意义的。、 和 `` 元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。

    可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。

    首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。

  2. 插值与模板表达式

    插值能让你把计算后的字符串合并到 HTML 元素标签之间和属性赋值语句内的文本中。模板表达式则是用来供你求出这些字符串的。

    • 插值表达式

      所谓 “插值” 是指将表达式嵌入到标记文本中。 默认情况下，插值表达式会用双花括号 {{`和 `}} 作为分隔符。

      在下面的代码片段中，{{ currentCustomer }} 就是插值表达式的例子。

      <h3>Current customer: {{ currentCustomer }}</h3>

      插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值

      <p>{{title}}</p>
      <div><img src="{{itemImageUrl}}"></div>

      在括号之间的“素材”，通常是组件属性的名字。Angular 会用组件中相应属性的字符串值，替换这个名字。 上例中，Angular 计算 title 和 itemImageUrl 属性的值，并把它们填在空白处。 首先显示粗体的应用标题，然后显示英雄的图片。

      一般来说，括号间的素材是一个模板表达式，Angular 先对它求值，再把它转换成字符串。 下列插值表达式通过把括号中的两个数字相加说明了这一点：

      <!-- "The sum of 1 + 1 is 2" -->
      <p>The sum of 1 + 1 is {{1 + 1}}.</p>

      这个表达式可以调用宿主组件的方法，就像下面用的 getVal()：

      <!-- "The sum of 1 + 1 is not 4" -->
      <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>

      Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给元素或指令的属性。

      从表面上看，你就像是在元素标签之间插入了结果并对标签的属性进行了赋值。

  3. 表达式上下文

    典型的表达式上下文就是这个组件实例，它是各种绑定值的来源。 在下面的代码片段中，双花括号中的 recommended 和引号中的 itemImageUrl2 所引用的都是 AppComponent 中的属性。

    <h4>{{recommended}}</h4>
    <img [src]="itemImageUrl2">

    表达式的上下文可以包括组件之外的对象。 比如模板输入变量 (let customer)和模板引用变量(#customerInput)就是备选的上下文对象之一。

    <ul>
      <li *ngFor="let customer of customers">{{customer.name}}</li>
    </ul>
    <label>Type something:
      <input #customerInput>{{customerInput.value}}
    </label>

    表达式中的上下文变量是由模板变量、指令的上下文变量（如果有）和组件的成员叠加而成的。 如果你要引用的变量名存在于一个以上的命名空间中，那么，模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员。

  4. 模板语句

    模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。 模板语句将在事件绑定一节看到，它出现在 = 号右侧的引号中，就像这样：(event)="statement"。

    <button (click)="deleteHero()">Delete hero</button>

    模板语句有副作用。 这是事件处理的关键。因为你要根据用户的输入更新应用状态。

    响应事件是 Angular 中“单向数据流”的另一面。 在一次事件循环中，可以随意改变任何地方的任何东西。

    和模板表达式一样，模板语句使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同，特别之处在于它支持基本赋值 (=) 和表达式链 (; 和 ,)。

    然而，某些 JavaScript 语法仍然是不允许的：

    • new 运算符
    • 自增和自减运算符：++ 和 --
    • 操作并赋值，例如 += 和 -=
    • 位操作符 | 和 &
    • 模板表达式运算符

  5. 语句上下文

    和表达式中一样，语句只能引用语句上下文中 —— 通常是正在绑定事件的那个组件实例。

    典型的语句上下文就是当前组件的实例。 (click)="deleteHero()" 中的 deleteHero 就是这个数据绑定组件上的一个方法。

    <button (click)="deleteHero()">Delete hero</button>

    语句上下文可以引用模板自身上下文中的属性。 在下面的例子中，就把模板的 $event 对象、模板输入变量 (let hero)和模板引用变量 (#heroForm)传给了组件中的一个事件处理器方法。

    <button (click)="onSave($event)">Save</button>
    <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
    <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

    模板上下文中的变量名的优先级高于组件上下文中的变量名。在上面的 deleteHero(hero) 中，hero 是一个模板输入变量，而不是组件中的 hero 属性。

    模板语句不能引用全局命名空间的任何东西。比如不能引用 window 或 document，也不能调用 console.log 或 Math.max。

  6. 绑定语法

    数据绑定是一种机制，用来协调用户所见和应用数据。 虽然你能往 HTML 推送值或者从 HTML 拉取值， 但如果把这些琐事交给数据绑定框架处理， 应用会更容易编写、阅读和维护。 只要简单地在绑定源和目标 HTML 元素之间声明绑定，框架就会完成这项工作。

    绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

    数据方向语法绑定类型
    单向
    从数据源到视图    		[target]=”expression” bind-target=”expression”插值
    属性
    Attribute
    CSS 类
    样式
    从视图到数据源的单向绑定(target)=”statement” on-target=”statement”事件事件
    双向[(target)]=”expression” bindon-target=”expression”双向

  7. 绑定目标

    绑定类型目标范例
    属性元素的 property
    组件的 property
    指令的 property    		<img [src]=”heroImageUrl”>
    <app-hero-detail [hero]=”currentHero”>
    <div [ngClass]=”{‘special’: isSpecial}”>