亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Angular4之五 服務(wù)器通訊

Taste / 2049人閱讀

摘要：可以與任何支持與服務(wù)器進(jìn)行通訊。首先，我們使用用語言創(chuàng)建一個(gè)服務(wù)器。一創(chuàng)建服務(wù)器步驟創(chuàng)建一個(gè)空的項(xiàng)目，取名為，名字可以按照情況而取。中，處理異步代碼通常有種方式回調(diào)承諾可觀察對(duì)象使用命令行組件名實(shí)例組件名為。運(yùn)行時(shí)發(fā)生錯(cuò)誤，提示改為則正常。

Angular可以與任何支持http與websocket服務(wù)器進(jìn)行通訊。

首先，我們使用node.js用typescript語言創(chuàng)建一個(gè)web服務(wù)器。

一、創(chuàng)建web服務(wù)器 步驟1

創(chuàng)建一個(gè)空的項(xiàng)目，取名為service，名字可以按照情況而取。

使用命令行，npm init -y 作用：進(jìn)行初始化，增加一個(gè)默認(rèn)的package.json

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

但是node.js不認(rèn)typescript，需要把typescript編譯成javascript，

首先，新建一個(gè)配置文件，取名為tsconfig.json。
寫入以下內(nèi)容：

{
  "compilerOptions": {
    "target":"es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",//ts轉(zhuǎn)換成js的文件夾
    "lib": ["es6"]
  },
  "exclude": ["node.modules"]
}

其次，想要ctrl+s自動(dòng)將ts文件轉(zhuǎn)換成js文件，需要對(duì)webstorm進(jìn)行設(shè)置file->settings

步驟2

安裝express框架，命令行：npm install express --save

使用命令行使能夠用typescript語法用express框架，命令行：npm install @types/express --save，這個(gè)是express的定義文件

步驟3

啟動(dòng)服務(wù)器，命令行：node build/aution_server.js 顯示如下則啟動(dòng)成功


node服務(wù)器啟動(dòng)后如果發(fā)生改變，則不會(huì)發(fā)生改變，如果要改則需要重新啟動(dòng)服務(wù)器，這對(duì)開發(fā)十分不便。

安裝插件則可以做到更新，命令行：npm install -g nodemon

這個(gè)插件會(huì)監(jiān)控源代碼，如果發(fā)生改變會(huì)自動(dòng)加載到服務(wù)器。
用這個(gè)命令啟動(dòng)項(xiàng)目：nodemon build/aution_server.js

二、Angular項(xiàng)目中使用http進(jìn)行通訊

通常我們希望在 HTTP 請(qǐng)求的時(shí)候，頁面不會(huì)失去響應(yīng)，所以我們的 HTTP 請(qǐng)求是異步的。

JavaScript 中，處理異步代碼通常有3 種方式：

1.回調(diào)（callback）

2.承諾（promise）

3.可觀察對(duì)象（observable）

1、使用命令行：npm g component [組件名] 實(shí)例組件名為product。

下圖為product.component.ts文件的代碼。

在此過程中，(.map)遇到一個(gè)問題，報(bào)錯(cuò)。

錯(cuò)誤信息為：This import is blacklisted, import a submodule instead

解決方法：引入rxjs文件。

引入方法：參考了https://poychang.github.io/an...，import ‘rxjs/Rx’ 仍然是以上錯(cuò)誤信息。

改用‘rxjs/rx’ 則不會(huì)在代碼報(bào)錯(cuò)。運(yùn)行時(shí)發(fā)生錯(cuò)誤，

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

改為"rxjs/add/operator/map" 則正常?？牲c(diǎn)擊錯(cuò)誤信息查看原文檔。

2、配置angular命令行，發(fā)送請(qǐng)求到相對(duì)應(yīng)的服務(wù)器

項(xiàng)目根目錄新建一個(gè)配置文件，這里為proxy.conf.json。注意json中，不用輕易使用注解，有可能造成錯(cuò)誤。

需要把這個(gè)配置文件配置到項(xiàng)目中，package.json

修改客戶端請(qǐng)求路徑:


重新使用命令行：npm run start啟動(dòng)客戶端angular項(xiàng)目，發(fā)現(xiàn)還是無法獲取數(shù)據(jù)，因?yàn)榭蛻舳税l(fā)送請(qǐng)求路徑為api/products ，故修改web服務(wù)器路徑為

結(jié)果：

到這里，使用nodejs創(chuàng)建web服務(wù)器，angular項(xiàng)目客戶端使用http訪問web服務(wù)器就完成了。

注意點(diǎn)：http是異步請(qǐng)求，當(dāng)你需要用到請(qǐng)求返回值的時(shí)候，需要確定使用時(shí)值是否已經(jīng)返回。這里很容易被忽視，導(dǎo)致讀值錯(cuò)誤，很有可能你使用值的時(shí)候，http請(qǐng)求還沒有回來。
解決的方法應(yīng)該很多，目前我的做法是把這賦值的語句和http請(qǐng)求在同一線程中執(zhí)行，即在網(wǎng)絡(luò)請(qǐng)求線程中執(zhí)行。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93517.html

相關(guān)文章

  • angular4學(xué)習(xí)記錄 -- 組件通訊、生命周期

    摘要：每完成被投影組件內(nèi)容發(fā)生變化時(shí)調(diào)用。每次做完組件視圖和子組件視圖的變更檢測(cè)之后調(diào)用。組件銷毀時(shí)調(diào)用，主要用于內(nèi)存回收。策略策略是當(dāng)組件的輸入屬性發(fā)生變更時(shí)才會(huì)檢查當(dāng)前組件及其子組件。 angular4 組件通訊、生命周期 主要通訊形式 父組件通過屬性綁定到子組件，子組件通過事件傳遞參數(shù)到父組件 父組件通過局部變量獲取子組件的引用 父組件使用@ViewChild獲取子組件的引用 兩個(gè)不...

    shadajin 評(píng)論0 收藏0

  • Angular4學(xué)習(xí)筆記——組件之間的交互

    摘要：具體思路子組件暴露一個(gè)屬性，當(dāng)事件發(fā)生時(shí)，子組件利用該屬性向上彈射事件。父組件綁定到這個(gè)事件屬性，并在事件發(fā)生時(shí)作出回應(yīng)。這個(gè)組件子樹之外的組件將無法訪問該服務(wù)或者與它們通訊。父子組件通過各自的構(gòu)造函數(shù)注入該服務(wù)。 通過輸入型綁定把數(shù)據(jù)從父組件傳到子組件 Angular對(duì)于父組件 => 子組件的數(shù)據(jù)通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數(shù)據(jù) i...

    Guakin_Huang 評(píng)論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建一個(gè)簡單的網(wǎng)站（一）——構(gòu)建前后端開發(fā)環(huán)境

    摘要：安裝好后，在命令提示符下輸入回車后就會(huì)自動(dòng)安裝好的最新版本，如果你的網(wǎng)絡(luò)環(huán)境和我的一樣，處處受限的話，我建議你先安裝后，利用安裝。好了，基本的前端和后端程序已經(jīng)構(gòu)建完成了，下面需要對(duì)前端和后端環(huán)境進(jìn)行一下配置。 學(xué)習(xí)了一段時(shí)間的angular4知識(shí)，結(jié)合以前自學(xué)的nodejs-express后端框架知識(shí)，做了一個(gè)利用angular4作為前端，node-express作為后端服務(wù)器的網(wǎng)站...

    Lyux 評(píng)論0 收藏0

  • Angular4 實(shí)戰(zhàn)開發(fā)

    摘要：實(shí)戰(zhàn)系列目前處于章節(jié)不定，內(nèi)容不定階段，這一系列文章不會(huì)長篇大論的講解概念，而是以用為主，結(jié)合通俗易懂的實(shí)例來讓大家理解常用的知識(shí)點(diǎn)。原文鏈接實(shí)戰(zhàn)開發(fā) 《Angular 實(shí)戰(zhàn)系列》目前處于章節(jié)不定，內(nèi)容不定階段，這一系列文章不會(huì)長篇大論的講解概念，而是以用為主，結(jié)合通俗易懂的實(shí)例來讓大家理解常用的知識(shí)點(diǎn)。 章節(jié) Angular CLI 創(chuàng)建組件(Component) 使用CSS美化組...

    Hegel_Gu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<