发表于： 2019-06-26 20:28:54
1 1027
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识）
1.httpclient
大多数前端应用都需要通过 HTTP 协议与后端服务器通讯。现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest 接口和 fetch() API。
@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。
（1）准备工作
要想使用 HttpClient，就要先导入 Angular 的 HttpClientModule。大多数应用都会在根模块 AppModule 中导入它。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
// import HttpClientModule after BrowserModule.
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
AppModule 中导入 HttpClientModule 之后，可以把 HttpClient 注入到应用类中，就像下面的 ConfigService 例子中这样。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
}
（2）获取json数据
应用通常会从服务器上获取 JSON 数据。 比如，该应用可能要从服务器上获取配置文件 config.json，其中指定了一些特定资源的 URL。
assets/config.json
{
"heroesUrl": "api/heroes",
"textfile": "assets/textfile.txt"
}
ConfigService 会通过 HttpClient 的 get() 方法取得这个文件。
app/config/config.service.ts (getConfig v.1)
configUrl = 'assets/config.json';
getConfig() {
return this.http.get(this.configUrl);
}
像 ConfigComponent 这样的组件会注入 ConfigService，并调用其 getConfig 方法。
app/config/config.component.ts (showConfig v.1)
showConfig() {
this.configService.getConfig()
.subscribe((data: Config) => this.config = {
heroesUrl: data['heroesUrl'],
textfile: data['textfile']
});
}
这个服务方法返回配置数据的 Observable 对象，所以组件要订阅（subscribe） 该方法的返回值。 订阅时的回调函数会把这些数据字段复制到组件的 config 对象中，它会在组件的模板中绑定，以供显示。
2.路由与导航
在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。
（1）概览
浏览器具有熟悉的导航模式：
在地址栏输入 URL，浏览器就会导航到相应的页面。
在页面中点击链接，浏览器就会导航到一个新页面。
点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。
Angular 的 Router（即“路由器”）借鉴了这个模型。它把浏览器中的 URL 看做一个操作指南， 据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。 你可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。 当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，你也可以在代码控制下进行导航。 路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。
（2）<base href> 元素
大多数带路由的应用都要在index.html的 <head> 标签下先添加一个 <base> 元素，来告诉路由器该如何合成导航用的 URL。
<base href="/">
（3）从路由库中导入
Angular 的路由器是一个可选的服务，它用来呈现指定的 URL 所对应的视图。 它并不是 Angular 核心库的一部分，而是在它自己的 @angular/router 包中。 像其它 Angular 包一样，你可以从它导入所需的一切。
import { RouterModule, Routes } from '@angular/router';
（4）配置
每个带路由的 Angular 应用都有一个Router（路由器）服务的单例对象。 当浏览器的 URL 变化时，路由器会查找对应的 Route（路由），并据此决定该显示哪个组件。
路由器需要先配置才会有路由信息。 下面的例子创建了五个路由定义，并用RouterModule.forRoot() 方法来配置路由器， 并把它的返回值添加到 AppModule 的 imports 数组中。
（5）路由出口
RouterOutlet 是一个来自路由模块中的指令，它的用法类似于组件。 它扮演一个占位符的角色，用于在模板中标出一个位置，路由器将会把要显示在这个出口处的组件显示在这里。
<router-outlet></router-outlet>
<!-- Routed components go here -->
有了这份配置，当本应用在浏览器中的 URL 变为 /heroes 时，路由器就会匹配到 path 为 heroes 的 Route，并在宿主视图中的RouterOutlet之后显示 HeroListComponent 组件。
（6）路由器链接
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
a 标签上的 RouterLink 指令让路由器得以控制这个 a 元素。 这里的导航路径是固定的，因此可以把一个字符串赋给 routerLink（“一次性”绑定）。
如果需要更加动态的导航路径，那就把它绑定到一个返回链接参数数组的模板表达式。 路由器会把这个数组解析成完整的 URL。
返回列表
评论