資訊專欄INFORMATION COLUMN
摘要：可以與任何支持與服務器進行通訊。首先，我們使用用語言創建一個服務器。一創建服務器步驟創建一個空的項目，取名為，名字可以按照情況而取。中，處理異步代碼通常有種方式回調承諾可觀察對象使用命令行組件名實例組件名為。運行時發生錯誤，提示改為則正常。
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
安裝express框架，命令行：npm install express --save
使用命令行使能夠用typescript語法用express框架，命令行：npm install @types/express --save，這個是express的定義文件
步驟3啟動服務器，命令行：node build/aution_server.js 顯示如下則啟動成功
node服務器啟動后如果發生改變，則不會發生改變，如果要改則需要重新啟動服務器，這對開發十分不便。
安裝插件則可以做到更新，命令行：npm install -g nodemon
這個插件會監控源代碼，如果發生改變會自動加載到服務器。
用這個命令啟動項目：nodemon build/aution_server.js
通常我們希望在 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
修改客戶端請求路徑:
重新使用命令行：npm run start啟動客戶端angular項目，發現還是無法獲取數據，因為客戶端發送請求路徑為api/products ，故修改web服務器路徑為
到這里，使用nodejs創建web服務器，angular項目客戶端使用http訪問web服務器就完成了。
注意點：http是異步請求，當你需要用到請求返回值的時候，需要確定使用時值是否已經返回。這里很容易被忽視，導致讀值錯誤，很有可能你使用值的時候，http請求還沒有回來。
解決的方法應該很多，目前我的做法是把這賦值的語句和http請求在同一線程中執行，即在網絡請求線程中執行。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93517.html
摘要：每完成被投影組件內容發生變化時調用。每次做完組件視圖和子組件視圖的變更檢測之后調用。組件銷毀時調用，主要用于內存回收。策略策略是當組件的輸入屬性發生變更時才會檢查當前組件及其子組件。 angular4 組件通訊、生命周期 主要通訊形式 父組件通過屬性綁定到子組件，子組件通過事件傳遞參數到父組件 父組件通過局部變量獲取子組件的引用 父組件使用@ViewChild獲取子組件的引用 兩個不...
摘要：具體思路子組件暴露一個屬性，當事件發生時，子組件利用該屬性向上彈射事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。父子組件通過各自的構造函數注入該服務。 通過輸入型綁定把數據從父組件傳到子組件 Angular對于父組件 => 子組件的數據通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數據 i...
摘要：安裝好后，在命令提示符下輸入回車后就會自動安裝好的最新版本，如果你的網絡環境和我的一樣，處處受限的話，我建議你先安裝后，利用安裝。好了，基本的前端和后端程序已經構建完成了，下面需要對前端和后端環境進行一下配置。 學習了一段時間的angular4知識，結合以前自學的nodejs-express后端框架知識，做了一個利用angular4作為前端，node-express作為后端服務器的網站...
摘要：實戰系列目前處于章節不定，內容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結合通俗易懂的實例來讓大家理解常用的知識點。原文鏈接實戰開發 《Angular 實戰系列》目前處于章節不定，內容不定階段，這一系列文章不會長篇大論的講解概念，而是以用為主，結合通俗易懂的實例來讓大家理解常用的知識點。 章節 Angular CLI 創建組件(Component) 使用CSS美化組...
閱讀 1443·2021-11-22 13:54
閱讀 4323·2021-09-22 15:56
閱讀 1815·2021-09-03 10:30
閱讀 1318·2021-09-03 10:30
閱讀 2086·2019-08-30 15:55
閱讀 1851·2019-08-30 14:13
閱讀 2059·2019-08-29 15:19
閱讀 2341·2019-08-28 18:13
