关于Angular2 + node接口调试的解决方案

 更新时间:2017年05月28日 12:05:21   作者:sunny_lvy  
这篇文章主要给大家介绍了关于Angular2 + node接口调试的解决方案,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

事情的起因

由于最近在使用Angular + node开发,采取的办法一直都是约定好接口,然后node实现,再编写前端。但是这样有一个很麻烦的问题:编写前端的时候无法调用接口,不能很好地测试,只能一口气写完再编译后放到后端来测试。

经常会因为解决一些小的问题而反复的编译、调试,浪费很多不必要的时间。

解决方案

偶然发现webpack-dev-server可以实现代理请求(把指定的url规则转发到其他地址),所以就试了一下。由于项目使用了Angular-cli构建,并没有webpack配置文件,悲伤。于是又去google上搜索了一圈Angular-cli,找到了Angular-cli实现代理的解决方案。

在项目目录下创建文件proxy.conf.json:

{
 "/api": {

  "target": "http://localhost:3000",

  "secure": false
 }
}

 1、/api为代理规则,因为我接口都是以api开头的,大家可以根据自己的实际情况设置

 2、target为目标服务地址,比如一个get请求的地址为http://localhost:4200/api/cards/all会被代理为

       http://localhost:3000/api/cards/all

       secure为是否开启ssl验证,在这里设置为false

接下来只需要启动node服务,再使用ng serve --proxy-config proxy.conf.json来启动自己的Angular项目就可以完美实现代理了,简直不要太好用,以前的方法简直是蠢爆了!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家脚本之家的支持。

相关文章

  • Angular2使用Angular CLI快速搭建工程(一)

    Angular2使用Angular CLI快速搭建工程(一)

    这篇文章主要介绍了Angular2使用Angular CLI快速搭建工程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 深入理解Angular中的依赖注入

    深入理解Angular中的依赖注入

    本篇文章主要介绍了深入理解Angular中的依赖注入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 使用Angular.js实现简单的购物车功能

    使用Angular.js实现简单的购物车功能

    在各大购物网站大家都可以简单购物车效果演示,下面通过本文给大家分享一段代码关于使用Angular.js实现简单的购物车功能,需要的朋友可以参考下
    2016-11-11
  • AngularJS读取JSON及XML文件的方法示例

    AngularJS读取JSON及XML文件的方法示例

    这篇文章主要介绍了AngularJS读取JSON及XML文件的方法,涉及AngularJS针对xml及json格式文件数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • angularjs 缓存的使用详解

    angularjs 缓存的使用详解

    这篇文章主要介绍了angularjs 缓存的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS入门教程之Scope(作用域)

    AngularJS入门教程之Scope(作用域)

    本文主要介绍AngularJS Scope(作用域),这里对Score知识做了详细介绍,并提供实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • 详细谈谈AngularJS的子级作用域问题

    详细谈谈AngularJS的子级作用域问题

    大家在使用angularjs的时候,很容易忽略AngularJS自带指令的作用域问题,有一些指令会产生独立的自己作用域,造成子级无法与父级作用域双向绑定的问题。下面我们来看看这些问题,有需要的可以参考借鉴。
    2016-09-09
  • AngularJS 工作原理详解

    AngularJS 工作原理详解

    本文主要介绍AngularJS 工作原理,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下
    2016-08-08
  • 使用AngularJS对表单提交内容进行验证的操作方法

    使用AngularJS对表单提交内容进行验证的操作方法

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。下面通过本文给大家分享使用AngularJS对表单提交内容进行验证的操作方法,需要的的朋友参考下吧
    2017-07-07
  • angularjs客户端实现压缩图片文件并上传实例

    angularjs客户端实现压缩图片文件并上传实例

    这篇文章主要介绍了angularjs客户端实现压缩图片文件并上传实例,本文直接给出代码实例,需要的朋友可以参考下
    2015-07-07

最新评论