Angular权威教程阅读总结（3）—— Http & Router

Http模块

首先要注意的是把HttpModule作为依赖项，加入NgModule的imports列表中，这样就可以把Http（和另外一些模块）导入组件之中。

pre标签：保存换行、空白符，可用于展示代码。

基本请求

this.http.request('http://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res: Response) => {  this. data = res.json(); })

http.request返回一个Response对象，用subscribe订阅变化，然后用json方法提取出响应体并解析成一个Object。

Subscribe同样可以处理失败和流完结的清空，只要分别在第二和第三个参数中传入一个函数就可以。

Subscribe接受三个参数：onSuccess，onError和onCompletion

常量注入

当需要解决一些环境配置问题的时候，我们可以让这些变量变得可被注入。为什么需要注入这些常量而不是像平常一样直接用？这是因为只要让这些变量可被注入，就能够：

1. 让代码在部署的时候根据所选的环境注入正确的变量。
2. 在测试期更容易替换要注入的值。

我们使用 { provide: … , useValue: … } 语法。

export var injectables: Array<any> = [
    {provide: MyService, useClass: MyService},
    {provide: MY_KEY, useValue: MY_KEY},
    {provide: MY_URL, useValue: MY_URL}
];

为了在应用中进行依赖注入，我们需要将其放入NgModule的providers里。

Observable.fromEvent(this.el.nativeElement, 'keyup')
    .map((e.any) => e.target.value)      //映射每一个keyup事件，然后找到它的目标并取出value
    .filter((text: string) => text.length > 1)    //filter表示该流在长度小于1的时候不会发送任何搜索字符串。
    .debounceTime(250)    //debounceTime表示我们会忽略触发间隔小于250ms的请求
    .do(() => this.loading.next(true))    //在流上使用do方法可以在流中对每个事件执行函数，但是这种方式不会改变流中的任何数据。
    .map((query: string) => this.youtube.search(query))    //在每一个触发的查询上使用.map以执行搜索    
    .switch()    //switch表示“除了最近的一次，忽略所有搜索事件”
    .subscribe(
        (results: SearchResult[]) => {
            this.loading.next(false);
            this.results.next(results);
        },
        (err: any) => {
            console.log(srr);
            this.loading.next(false);
        },
        () => {
            this.loading.next(false);
        }
    )

el是一个ElementRef类型的对象，此类型是Angular对原生元素的一个包装。

RxJS提供了一种使用Rx.Observable.fromEvent的方式来监听一个元素上的事件，这里将keyup事件成为一个可观察流。

可查看RxJS文档

ngOnInit

如果一个类声明implements OnInit，那么ngOnInit函数会在首次变化检查后调用。ngOnInit是进行初始化工作的理想地方（相对于constructor），因为组件的各个输入参数在constructor中仍然是不可用的。

构造函数是用来初始化变量值的，如果想要撰写优质、容易测试的代码，你就要最小化对象构建的副作用。应该把一些组件初始化代码放到一个钩子函数里，如OnInit。

参考链接

POST/PUT/DELETE/HEAD/PATCH

用法与get类似，可能带有请求体。JSON.stringify将Object转换成一个JSON字符串。

RequestOptions

所有http方法还带有一个可选的末位参数：RequestOptions。RequestOptions对象封装了：method, headers, body, mode, credentials, cache, url, search。

路由

SPA应用的发展

锚标记法

锚标记的传统作用是直接链接到所有网页的其他位置，并让浏览器滚动到定义该锚标记元素所在的位置。而SPA应用客户端框架使用的方法是：将锚标记作为路径来格式化，用它们代表应用程序的路由。例如，SPA应用的about路由可能是http://something/#/about，这就是所谓的基于锚点标记的路由（hash-based routing）。

HTML5客户端路由

HTML5的新特性：在不需要新请求的情况下，允许在代码中创建新的浏览器记录项并显示适当的URL。这是利用history.pushState方法来实现的，该方法允许JavaScript控制浏览器的导航历史。

路由配置

三步曲：

1. import { RouterModule, Routes } from ‘@angular/router’;
2. const routes: Routes = [ … ];
3. 在NgModule中的imports数组里使用RouterModule.forRoot(routes)来安装路由配置

routerLink指令

routerLink的值是一串包含了一组字符串数组（例如”[ ‘home’ ]”）的字符串。

[ routerLink ] 将指示Angular获取click事件的所有权，然后基于路由的定义，初始化路由器并导航到正确的位置。（原理？）

base href=”/”

该标签的作用是使用相对路径来告知浏览器去哪里查找图片和其他资源。Angular的路由器依赖这个标签来确定如何构建它的路由信息。

将 { provide：APP_BASE_HREF，useValue：‘/’ } 放到NgModule的providers中，等同于在应用的html页头里使用 base href=”/” 标签。

路由参数params

我们可以像下面这样在路径段前面添加一个冒号，设定路由接收一个参数：

/route/:param

查询参数

在一个像http://localhost/search?query=cute&order=asd这样的URL中，queryParams以对象的形式为我们提供路由参数。
注意queryParams与route.params有所不同。route.params在路由配置中匹配参数，而queryParams在查询字符串中匹配参数。

ActivatedRoute

Contains the information about a route associated with a component loaded in an outlet. An ActivatedRoute can also be used to traverse the router state tree. 意思是ActivatedRoute包含了在一个outlet中加载的组件相关联的路由的有关信息。 ActivatedRoute也可以用来遍历路由器状态树。

路由守护

守护类实现CanActivate接口，并且在路由配置中使用这个守护类。

{ path: ‘home’, component: HomeComponent, canActivate: [ HomeGurad ]}

嵌套路由

父级路由可以包含子级路由，只需在路由配置中声明即可。详见文档

在子级组件中，如果你试图链接或重定向到[ ’ myRoute ’ ] ，路由器将试图寻找一个兄弟路由。同样，在顶级上下文中，如果想要链接或重定向到一个子级路由，需要使用路由定义数组的多个元素。

<a [routerLink]="['./main']">Main</a>

这里的main 前面有./。它表明了导航到main路由是相对于当前路由上下文的。

this.router.navigate(['./', id], {relativeTo: this.route});

在navigate函数中使用相对路径./、为了使用相对路径，我们传入了一个relativeTo对象，它告诉路由器是相对于哪个路由。

Angular的路由器会优先使用具体路由，然后才使用参数化的路由。