11. 架构---3. Service , Dependency

总结:

1. 服务 的工作：

• 从服务器获取数据;
• 验证用户输入;
• 直接往控制台写日志

2. 创建可注入服务
   ng generate service heroes/hero
3. injector 创建服务或其他依赖前必须先用provider配置
4. injector 是可继承的
5. You can configure injector with providers in one of three places:

• In the @Injectable() decorator for the service itself
• In the @NgModule() decorator for an NgModule
• In the @Component() decorator for a component

对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建服务类。
服务类的定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中。
组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。

1. Service

1. 创建服务

ng generate service heroes/hero

// src/app/heroes/hero.service.ts

import  {  Injectable  }  from  '@angular/core'; 
// 导入一个数据模型
import { HEROES } from './mock-heroes';
 @Injectable({ 
 providedIn
:  'root',  
})  
export  class  HeroService  {
//导出一个方法
  getHeroes() { 
return HEROES; 
}
  constructor()  {  }  
}

2. Dependency Injection

The class we have created provides a service. The @Injectable() decorator marks it as a service that can be injected,but Angular can't actually inject it anywhere until you configure an Angular dependency injector with a provider of that service
创建的服务类，不用服务的provider配置Angular injector ，Angular 实际无法将其注入到任何地方。

provider 会告诉injector 如何创建服务。injector 创建服务或其他依赖前，必须先配置injector

注入器是可继承的，这意味着如果指定的注入器无法解析某个依赖，它就会请求父注入器来解析它。 组件可以从它自己的注入器来获取服务、从其祖先组件的注入器中获取、从其父 NgModule 的注入器中获取，或从 root 注入器中获取。
你可以在三种位置之一设置元数据，以便在应用的不
同层级使用提供商来配置注入器：

• In the @Injectable() decorator for the service itself
• In the @NgModule() decorator for an NgModule
• In the @Component() decorator for a component

1. @Injectable()

// src/app/heroes/`hero.service.ts`
import  {  Injectable  }  from  '@angular/core';
import { HEROES } from './mock-heroes';

 @Injectable({ 
providedIn
:  'root',  
})  

export  class  HeroService  {
//导出一个方法
  getHeroes() { 
return HEROES; 
}
  constructor()  {  }  
}

2. @NgModule()

//  src/app/app.module.ts (providers)
providers:  [  
{ provide:  LocationStrategy, useClass:  HashLocationStrategy  } 
 ]

3. @Component()

//  src/app/heroes/heroes.component.ts
import  {  Component }  from  '@angular/core'; 
import  {  HeroService  }  from  './hero.service';  @Component({ 
selector:  'app-heroes', 
providers:  [  HeroService  ],  
template:  ` <h2>Heroes</h2> <app-hero-list></app-hero-list> `  }) 
export  class  HeroesComponent  {  }

3. HttpClient

大多数前端应用都需要通过 HTTP 协议与后端服务器通讯。现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest接口和 fetch() API。

@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。

1. 导入 Angular 的 HttpClientModule

要想使用HttpClient，就要先导入 Angular 的 HttpClientModule。大多数应用都会在根模块 AppModule 中导入它。

image.png

2. 把HttpClient， 注入到应用类中

在 AppModule 中导入HttpClientModule 之后，你可以把HttpClient， 注入到应用类中，就像下面的 ConfigService 例子中这样。

image.png

3. 获取 JSON 数据

应用通常会从服务器上获取 JSON 数据。 比如，该应用可能要从服务器上获取配置文件 config.json，其中指定了一些特定资源的 URL。

image.png

Because the service method returns an Observable of configuration data, the component subscribes to the method's return value. The subscription callback copies the data fields into the component's config object

Lambda 函数
(params1:type1, params2: type2) => statement;
var functionA = (x) => {
x=x+10;
}

Type-checking the response
The subscribe callback above requires bracket notation to extract the data values.
You can't write data.heroesUrl because TypeScript correctly complains that the data object from the service does not have a heroesUrl property.
The HttpClient.get() method parsed the JSON server response into the anonymous Object type. It doesn't know what the shape of that object is.
You can tell HttpClient the type of the response to make consuming the output easier and more obvious.

HttpClient.get() 方法会把JSON 响应体解析成匿名的Object类型，不知道具体的Object形态。
所有必须告诉 HttpClient该响应体的类型。
1. 首先定义一个具有正确形态的接口：

image.png
2. 在服务器中把该接口指定为 HttpClient.get()] 调用的类型参数：
》 app/config/config.service.ts (getConfig v.2)

getConfig(){
// now returns an Observable of Config
return this.http.get<Config>(this.configUrl);
}

image.png

1. Reading the full response

The response body doesn't return all the data you may need. Sometimes servers return special headers or status codes to indicate certain conditions that are important to the application workflow.
Tell HttpClient that you want the full response with the observe option: