脚本宝典收集整理的这篇文章主要介绍了

Angular4之五 服务器通讯

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

Angular可以与任何支持http与websocket服务器进行通讯。

首先,我们使用node.js用typescript语言创建一个web服务器。

一、创建web服务器

步骤1

创建一个空的项目,取名为service,名字可以按照情况而取。

使用命令行,npm init -y 作用:进行初始化,增加一个默认的package.json

使用命令行, npm i @types/node --save 作用:引入node.js

但是node.js不认typescript,需要把typescript编译成javascript,

首先,新建一个配置文件,取名为tsconfig.json。
写入以下内容:

{
  "compilerOptions": {
    "target":"es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",//ts转换成js的文件夹
    "lib": ["es6"]
  },
  "exclude": ["node.modules"]
}

其次,想要ctrl+s自动将ts文件转换成js文件,需要对webstorm进行设置file->settings
图片描述

步骤2

安装express框架,命令行:npm install express --save

使用命令行使能够用typescript语法用express框架,命令行:npm install @types/express --save,这个是express的定义文件

步骤3

启动服务器,命令行:node build/aution_server.js 显示如下则启动成功

Angular4之五 服务器通讯-脚本宝典
node服务器启动后如果发生改变,则不会发生改变,如果要改则需要重新启动服务器,这对开发十分不便。

安装插件则可以做到更新,命令行:npm install -g nodemon

这个插件会监控源代码,如果发生改变会自动加载到服务器。
用这个命令启动项目:nodemon build/aution_server.js

二、Angular项目中使用http进行通讯

通常我们希望在 HTTP 请求的时候,页面不会失去响应,所以我们的 HTTP 请求是异步的。

JavaScript 中,处理异步代码通常有3 种方式:

1.回调(callback)

2.承诺(promise)

3.可观察对象(observable)

1、使用命令行:npm g component [组件名] 实例组件名为product。

下图为product.component.ts文件的代码。
图片描述

在此过程中,(.map)遇到一个问题,报错。

错误信息为:This import is blacklisted, import a submodule instead

解决方法:引入rxjs文件。

引入方法:参考了https://poychang.github.io/an...,import ‘rxjs/Rx’ 仍然是以上错误信息。

改用‘rxjs/rx’ 则不会在代码报错。运行时发生错误,

提示:TypeError: this.http.get(…).map is not a function

改为'rxjs/add/operator/map' 则正常。可点击错误信息查看原文档。

2、配置angular命令行,发送请求到相对应的服务器

项目根目录新建一个配置文件,这里为proxy.conf.json。注意json中,不用轻易使用注解,有可能造成错误。
图片描述

需要把这个配置文件配置到项目中,package.json
图片描述

修改客户端请求路径:

Angular4之五 服务器通讯-脚本宝典
重新使用命令行:npm run start启动客户端angular项目,发现还是无法获取数据,因为客户端发送请求路径为api/products ,故修改web服务器路径为
图片描述

结果:

图片描述

到这里,使用nodejs创建web服务器,angular项目客户端使用http访问web服务器就完成了。

注意点:http是异步请求,当你需要用到请求返回值的时候,需要确定使用时值是否已经返回。这里很容易被忽视,导致读值错误,很有可能你使用值的时候,http请求还没有回来。
解决的方法应该很多,目前我的做法是把这赋值的语句和http请求在同一线程中执行,即在网络请求线程中执行。

总结

以上是脚本宝典为你收集整理的

Angular4之五 服务器通讯

全部内容,希望文章能够帮你解决

Angular4之五 服务器通讯

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过