Angular4学习笔记(五):http

原创 2017年04月17日 14:31:04

代码已提交至Github

程序猿十大未解之谜

其实我准备原本按照教程上的写法,用angular-in-memory-web-api类伪装一个服务器。而在最开始的项目里,我也确实是这么做的。

但是后来我用webpack替换了原demo中的systemjs,一切都跑偏了。

同样的代码,在之前的项目里怎么跑都没问题;在现在的项目里,死活都是服务器地址不对。

这就是程序猿十大未接谜题之首:刚才还特么是好好的啊!

最后我实在找不到问题出在那里,只好用js再写了一个跑在node上的服务器demo。

有的时候技术突破,也是被逼无奈。不是他XX的,就是你XX的。(原谅我爆粗口)。

所以我们需要小小的转一个弯,来搞定有关node服务器上的一些东西。

nodejs服务器

git上的项目中,server目录下,就是一个小小的服务器demo,运行方式为进入文件夹后npm start。

服务器包含2个文件:
这里写图片描述

data.js是我随便写的一堆假数据(是的,服务器也是假数据,因为我还不会用mongodb)

http.js是服务器主文件。

运行起来是这个样子:
这里写图片描述
服务器监听本机4000端口,并提供2个接口:
1. http://127.0.0.1:4000/gundamlist

返回所有高达列表
1. http://127.0.0.1:4000/detail?id=xx
传入高达id,返回对应高达详情(查不到会返回空的类)

angularjs中的http

现在可以回到angular的部分,开始改造service了:

1 定义主路径

private api = 'http://localhost:4000';

2 定义2个接口

private gundamList = '/gundamlist';
private gundamDeail = '/detail';

3 使用angular中的http模块

http类在angular中的‘@angular/http’里,任何使用http之前都需要导入。以及因为http本身是一个基类要在所有组件中使用,所以需要添加到app.module.ts的imports数组里。

顺便,因为在2个component都用到了service,所以不需要特别在每一个component用provider声明,在app.module.ts声明一次就可以了(但是还需要导入和注入)。

做完之前的铺垫后,终于可以在service里用http去请求数据了。

导入http:

import { Http } from '@angular/http';

必须的toPromise

import 'rxjs/add/operator/toPromise';

在构造函数中注入:

constructor(private http: Http) {};

修改获得数据的方法:

// 获得全部数据
getGundams(): Promise<Gundam[]> {
    return this.http.get(this.api + this.gundamList)
.toPromise()
.then(response => response.json() as Gundam[])
.catch(this.handleError);
}
// 根据Id查询高达
getGundamById(id: number): Promise<Gundam> {
    return this.http.get(this.api + this.gundamDeail + '?id=' + id)
.toPromise().then( jsonStr => jsonStr.json() as Gundam)
.catch(this.handleError);
}
// 捕获异常并输出
private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}

1 http.get(url)(或者post put delete),访问服务器以后会返回一个observation对象,事实上是observation<服务器返回值>。通过toPromise转换成promise对象以后,就可以正常的使用then方法去处理返回值了。
2 通过promise的then方法,可以获得到服务器的返回值。2个返回值都是json字符串,而在angular还是先按字符串处理。调用字符串的.json()方法转化为json数组(接口1)或者json对象(接口2),继续调用关键字as将jison数组或者jison对象转化Gundam类,转化的方式是属性对应。

回到主页面,刷新
这里写图片描述
点击任意一个栏目
这里写图片描述

现在可以把假数据删除,然后测试基本流程了。

webpack打包

进入angular目录,运行打包命令:

npm run build 

这里写图片描述

打包完成

这里写图片描述

进入angular/dist文件夹内,会有如下几个文件:
这里写图片描述

复制到server目录下的assets文件夹下(没有请新建):
这里写图片描述

回到服务器目录下,启动服务器:

这里写图片描述

访问http://localhost:4000/index.html

这里写图片描述

点击任一列表项目:

这里写图片描述

可能样子还不怎么好看,可能逻辑处理也很简单。但是至少是一个从前端到后端跑通的流程了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【Angular4.X学习笔记二】开发环境配置(windows)

文章目录: 环境准备 WebStorm安装与激活Node.js(含npm)安装Angular CLI安装使用npm命令创建Angular项目并运行在WebStorm中创建Angular项目并运...
  • hu_oo
  • hu_oo
  • 2017年07月27日 08:49
  • 1288

Angular4学习笔记(六):解耦

解耦:让产品的需求换的更猛烈些吧!(大哥我开玩笑的你别真换啊...)

Angular4学习笔记(七):界面优化

美美容,做个拉皮,拍个黄瓜

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

AngularJs(四):$Http,$resource

一.使用$http $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。例如...

angularjs和angular4的区别。为什么使用angular4

angularjs缺点: 1。本身的脏值检查机制,当页面数据发生变化时,就会触发检查机制,当页面绑定的数据越来越多时,就会造成程式不断的去触发脏值检查机制,程序的相应就会越来越慢 2.路由,子路由...

AngularJS四大核心特性

一、MVC 指Model View Controller 二、模块化和依赖注入 模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。我们在单独的js文件中定义的模块,并将其命名为按照...

AngularJS学习笔记(4)- AngularJS 控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器AngularJS 应用程序被控制器...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular4学习笔记(五):http
举报原因:
原因补充:

(最多只允许输入30个字)