Angular 知识点记录

1. 元数据：

Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。这些信息被称为元数据（metadata）。
Angular needs to know how the pieces of your application fit together and what other files and libraries the app requires. This information is called metadata.

有些元数据位于 @Component 装饰器中，你会把它加到组件类上。另一些关键性的元数据位于 @NgModule 装饰器中。
最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

2. 组件声明

每个组件必须声明，且只能声明一次（在一个ngModule里）。

如果使用@angular/cli创建组件，那么会自动把组件加到 AppModule 中。
手动创建的组件，必须手动添加声明。

3. import

所有用到的类型与符号，都需要通过import来导入。

import { Observable, of } from 'rxjs';   //Observable 和 of 符号
import { HeroService } from '../hero.service';  //服务
import { Injectable } from '@angular/core';    //装饰器
import { FormsModule } from '@angular/forms';    //双向绑定
import { AppComponent } from './app.component';  //组件

4. 服务

Why services?
组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务.

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.

服务是在多个“互相不知道”的类之间共享信息的好办法。

Services are a great way to share information among classes that don't know each other.

在inject一个服务到组件之前，需要将这个服务注册到依赖注入系统。
我们通过注册一个提供商来完成。

提供商(provider)是什么？
A provider is something that can create or deliver a service。

看代码：

@Injectable({
  providedIn: 'root'   //提供商，root表示根注入器
})

通过Injectable({})装饰器的注入器providedIn来注册服务。
服务必须具有某种形式的异步函数签名。因为浏览器不会在服务的等待期间停止响应。
服务--可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象）。
Observable 是 RxJS 库中的一个关键类。

提供商就相当于说明书，用来指导 DI 系统该如何获取某个依赖的值。大多数情况下，这些依赖就是你要创建和提供的那些服务。

A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

5. 模块

宏观来讲，NgModule 是组织 Angular 应用的一种方式，它们通过 NgModule装饰器中的元数据来实现这一点。这些元数据可以分成三类：

静态的：编译器配置，用于告诉编译器指令的选择器并通过选择器匹配的方式决定要把该指令应用到模板中的什么位置。它是通过 declarations 数组来配置的。

Static: Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching. This is configured via the [declarations](https://www.angular.cn/api/core/NgModule#declarations) array.

运行时：通过 providers 数组提供给注入器的配置。

Runtime: Injector configuration via the providers array.
组合/分组：通过 imports 和 exports数组来把多个 NgModule 放在一起，并彼此可用。

Composability/Grouping: Bringing NgModules together and making them available via the imports and exportsarrays.

1.  @[NgModule](https://www.angular.cn/api/core/NgModule)({
2.  // Static, that is compiler configuration
3.  declarations:  [],  // Configure the selectors
4.  entryComponents:  [],  // Generate the host factory

6.  // Runtime, or injector configuration
7.  providers:  [],  // Runtime injector configuration

9.  // Composability / Grouping
10.  imports:  [],  // composing NgModules together
11.  exports:  []  // making NgModules available to other parts of the app
12.  })

6. 可观察对象（Observable）

delete(hero: Hero): void {
  this.heroes = this.heroes.filter(h => h !== hero);
  this.heroService.deleteHero(hero).subscribe();
}

如果你忘了调用 subscribe()，本服务将不会把这个删除请求发送给服务器。作为一条通用的规则，Observable 在有人订阅之前什么都不会做。

$ 是一个命名惯例，写在heroes后面，用来表明 heroes$ 是一个 Observable，而不是数组。（如果写在前面，也是一种命名惯例，用来表示什么呢？小伙伴们可以在留言区把答案写上）。

*[ngFor] 不能直接使用 Observable。不过，它后面还有一个管道字符（|），后面紧跟着一个 [async]，它表示 Angular 的 [AsyncPipe]。

[AsyncPipe] 会自动订阅到 Observable，这样你就不用再在组件类中订阅了。

可观察对象是声明式的 —— 也就是说，虽然你定义了一个用于发布值的函数，但是在有消费者订阅它之前，这个函数并不会实际执行。订阅之后，当这个函数执行完或取消订阅时，订阅者就会收到通知。

Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.

Observables 同 Observer 之间的订阅发布关系如下：

订阅： Observer 通过 Observable 提供的 subscribe() 方法订阅 Observable。
发布：Observable 通过回调 next 方法向 Observer 发布事件。

Observables 的订阅类似于函数的调用。执行时同步的。
Observables 传递值时，可以是同步的，也可以是异步的。
Observables 与函数的区别是：Observable 可以随着时间的推移“返回”多个值。

结论：
函数是：同步的给我一个值。
Observables 是随着时间，给我任意多个值，无论是同步还是异步的。

7. 路由（router）

每个路由模块都会根据导入的顺序把自己的路由配置追加进去。

路由配置的顺序很重要。路由器会接受第一个匹配上导航所要求的路径的那个路由。

ActivatedRouter
有两个旧式属性仍然是有效的，但它们不如其替代品那样强力，建议不再用它们，它们还将在未来的 Angular 版本中废弃。

params —— 一个 Observable 对象，其中包含当前路由的必要参数和可选参数。请改用 paramMap。

queryParams —— 一个 Observable 对象，其中包含对所有路由都有效的查询参数。请改用 queryParamMap。

8. Operators (操作符)

操作符是 Observable 类型上的方法，比如 .map(...)、.filter(...)、.merge(...)，等等。当操作符被调用时，它们不会改变已经存在的 Observable 实例。相反，它们返回一个新的 Observable ，它的 subscription 逻辑基于第一个 Observable 。

操作符是函数，它基于当前的 Observable 创建一个新的 Observable。这是一个无副作用的操作：前面的 Observable 保持不变。 （实例操作符）

操作符本质上是一个纯函数 (pure function)，它接收一个 Observable 作为输入，并生成一个新的 Observable 作为输出。订阅输出 Observable 同样会订阅输入 Observable 。

操作符图形可以参考此网站：
http://rxmarbles.com/

9. $event

$event 对象的属性取决于 DOM 事件的类型。所有标准 DOM 事件对象都有一个 target 属性，引用触发该事件的元素。

如果是<input>触发的事件，则通过$event.target.value返回的是输入的文本。

Angular 知识点记录