做这个小例子前，我们需要新建一个项目：
|
1 2 3 4 |
<span style="vertical-align: inherit"><span style="vertical-align: inherit">git clone https://github.com/angular/quickstart.git quickstart</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 光盘快速入门</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> npm 安装</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 海平面以上开始</span></span> |
下一步我们在模块库中，导入相应的http模块
|
1 2 3 4 5 6 7 8 |
<span style="vertical-align: inherit"><span style="vertical-align: inherit">...</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 从“@angular/http”导入 { HttpModule }；</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> ...</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> @NgModule ({</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 导入：[ BrowserModule,HttpModule ]，</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 声明：[ AppComponent ]，</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 引导程序：[应用组件]</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> })</span></span> |
看看下面我们如何实现的，
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<span style="vertical-align: inherit"><span style="vertical-align: inherit">...</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 从'@angular/http'导入{ Http, Response }；</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 导入'rxjs/Rx'；</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> ...</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> @零件（{</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 选择器：'我的应用'，</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 模板：`</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> <h1>你好{{name}}</h1></span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> <ul *ngIf="手机"></span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> <li *ngFor="let m of mobiles"></span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> <span>{{m.id}}</span> {{m.name}}</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> </li></span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> </ul></span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> `,</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> })</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 导出类 AppComponent{</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 手机：任何[]；</span></span> <span style="vertical-align: inherit"><span style="vertical-align: inherit"> 名称 = '角';</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 构造函数（公共http：http）{</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> this.http.get("http://localhost/angluarjson.php")</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 。承诺（）</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> .then(response => this.mobiles=response.json())</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> ;</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> }</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> }</span></span> |
Angular 的http.get返回一个 RxJS 的Observable对象。 Observable（可观察对象）是一个管理异步数据流的强力方式。我们先利用toPromise操作符把Observable直接转换成Promise对象，以便熟悉的操作。
下面是我们的服务器php文件：
|
1 2 3 4 5 6 7 8 |
<span style="vertical-align: inherit"><span style="vertical-align: inherit"><?php</span></span> <span style="vertical-align: inherit"><span style="vertical-align: inherit"> header('Content-Type: application/json');</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> header("访问控制允许来源：*");</span></span> <span style="vertical-align: inherit"><span style="vertical-align: inherit"> echo '[{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"} ,{"id":14,"name":"华为"}]';</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> 出口（）;</span></span><span style="vertical-align: inherit"><span style="vertical-align: inherit"> ?></span></span> |
One comment