1、在app目录下面创建一个json文件,用于http请求。
[{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"}]
2、然后我们需要写一个json对应的对象类型的组件mobile.ts,便于解析。
import {Injectable} from 'angular2/core';
export class Mobile {
constructor(public id: number, public name: string) { }
}
3、在主组件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);
不是很清楚map方法和subscribe方法到底做了什么。从名字上是先进行返回结果map解析,然后再转为Mobile对象数组。
4、在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
然后始终不能正常运行,搞了好半天才知道引入错误了。
5、
HTTP访问后端URL
如果要访问后端的资源,比如后端的资源是http://localhost:8080/mobile.json
。
修改一下上面的Http请求
http.get('http://localhost:8080/mobile.json').map(res => res.json()).subscribe(v=> this.mobiles = v);
解决跨域
- 服务器端设置可以进行跨域资源的访问。
2.通过Nginx配置一个 统一Angular APP和服务器端的域名,反代到前端和后端。