Angular2中的HTTP请求
在Angular的官网没有专门介绍Http请求的学习指南,只是在API中有一些例子可以参考。
我根据官方提供的例子学习了一下。记录一下 学习的内容。
先写一个加载本地json文件的例子。
在app目录下面创建一个json文件,用于http请求。
[{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"}]
然后我们需要写一个json对应的对象类型的组件mobile.ts,便于解析。
import {Injectable} from 'angular2/core';
export class Mobile {
constructor(public id: number, public name: string) { }
}
在主组件AppComponent 中写Http的请求。
import {Component} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Mobile} from './mobile'
@Component({
selector: 'my-app',
template: `
<h1>Angular 2 App</h1>
<ul *ngIf="mobiles">
<li *ngFor="#m of mobiles"><span>{{m.id}}</span> {{m.name}}</li>
</ul>
`
})
export class AppComponent implements OnInit {
public mobiles: Mobile[];
constructor(public http: Http) {
console.log(" AppComponent constructor :", "run step constructor ");
http.get('app/mobile.json').subscribe(res=> this.mobiles =res.json());
}
ngOnInit() {
console.log(" AppComponent ngOnInit :", "run step ngOnInit ");
}
}
上面关键是通过 http组件调用get方法 来加载本地的json文件。
对于上面的代码http.get('app/mobile.json').map(res => res.json()).subscribe(v=> this.mobiles = v);
我也是根据官方给的example做的,还不是很清楚map方法和subscribe方法到底做了什么。从名字上是先进行返回结果map解析,然后再转为Mobile对象数组。
在index.html中我们需要添加http.js文件,从最近的学习看 我发现所有的组件最后都转为js文件,所以Angular中运行的是js文件,包括我们写的Mobile组件等等。
index.html的内容如下:
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
提示 引入http.js的路径:node_modules/angular2/bundles/http.js
在刚开始的时候,在angular2目录我首先发现了这里有一个http.js 结果引入的是:node_modules/angular2/http.js 然后始终不能正常运行,搞了好半天才知道引入错误了。
HTTP访问后端URL
Angular应用程序启动起来默认是http://localhost:3000
如果要访问后端的资源,比如后端的资源是http://localhost:8080/mobile.json 。
修改一下上面的Http请求
http.get('http://localhost:8080/mobile.json').map(res => res.json()).subscribe(v=> this.mobiles = v);
当运行的时候 会提示这是一个跨越资源。Angular里面的请求大部分都是Ajax请求,所以在访问不能域名下的资源是跨越请求,那么有两种解决方法:
- 服务器端设置可以进行跨域资源的访问。
2.通过Nginx配置一个 统一Angular APP和服务器端的域名,反代到前端和后端。
|