>本教程演示了使用CouchDB（NOSQL數(shù)據(jù)庫(kù)）和Angular（JavaScript框架）構(gòu)建費(fèi)用跟蹤應(yīng)用程序。 獨(dú)特的方面是CouchDB的HTTP API，可以在Angular Frontend和數(shù)據(jù)庫(kù)之間進(jìn)行直接通信，從而消除了對(duì)單獨(dú)的後端服務(wù)器的需求。

>我們將逐步構(gòu)建一個(gè)小型應(yīng)用程序，每個(gè)步驟都以提交為代表（包括測(cè)試，儘管在此處尚未詳細(xì)介紹）。完整的代碼可在github上找到（原始代碼未提供，需要添加如果可用，則需要添加）。

密鑰概念：

>

> couchdb的http api：通過(guò)http請(qǐng)求直接客戶端交互簡(jiǎn)化開(kāi)發(fā)。
• > Angular's依賴注入（DI）：
管理應(yīng)用程序依賴性，改善模塊化和可檢驗(yàn)性。
• 雙向數(shù)據(jù)綁定：有效地同步了角模型和視圖，確保UI與CouchDB數(shù)據(jù)一致。
>
• >客戶端和服務(wù)器端驗(yàn)證：可伸縮性：教程展示了指令和數(shù)據(jù)綁定的技術(shù)，以構(gòu)建可擴(kuò)展解決方案。 >
• 為什麼選擇couchdb？
• > >客戶端選項(xiàng)（例如IndexEdDB和Local Storage存在），數(shù)據(jù)庫(kù)服務(wù)器提供了優(yōu)點(diǎn)，尤其是對(duì)於協(xié)作應(yīng)用程序。 多個(gè)用戶可以同時(shí)訪問(wèn)和更新費(fèi)用列表。 CouchDB的本機(jī)HTTP支持消除了中間層，簡(jiǎn)化了應(yīng)用程序和數(shù)據(jù)庫(kù)之間的通信。 它對(duì)複制的固有支持使分佈式數(shù)據(jù)庫(kù)系統(tǒng)易於實(shí)現(xiàn)。
>先決條件：

>安裝最新的couchdb（1.6版或更高版本）和最新的穩(wěn)定node.js版本（版本0.10.x或更高版本）。

設(shè)置開(kāi)發(fā)環(huán)境：

>

>

> install node.js and Tools：

使用安裝程序（在Node.js網(wǎng)站上可用）或NVM等軟件包管理器。安裝

，，和

使用npm：
1. >

   yo創(chuàng)建和腳克式Angular應(yīng)用程序：創(chuàng)建一個(gè)項(xiàng)目目錄，導(dǎo)航到它，然後使用Angular Generator：generator-angulargrunt-cli couchapp npm install -g yo generator-angular grunt-cli couchapp

運(yùn)行開(kāi)發(fā)服務(wù)器：
2. 使用Grunt啟動(dòng)開(kāi)發(fā)服務(wù)器：。 這應(yīng)該在您的瀏覽器中打開(kāi)

   。 > mkdir expenses && cd expenses && yo angular expenses

3. 4. >>安裝couchdb：按照操作系統(tǒng)的CouchDB安裝說(shuō)明。 （例如，在macos上使用）。 brew

   初始couchdb設(shè)置：

   1. 啟動(dòng)couchdb：couchdb &

   2. 創(chuàng)建數(shù)據(jù)庫(kù)：curl -X PUT http://127.0.0.1:5984/expenses>

   3. >插入初始文檔：>使用添加示例費(fèi)用條目（原始教程中提供了示例命令）。 curl

   啟用CORS：

   允許從Angular應(yīng)用程序到CouchDB的交叉原始請(qǐng)求，在CouchDB的配置中啟用CORS（通常）。 該教程提供

   命令以啟用CORS並將其設(shè)置為

   >（僅用於開(kāi)發(fā)；為生產(chǎn)更改此內(nèi)容）。 local.ini curl*>角度和依賴注入：

   > >教程演示了使用Angular的依賴項(xiàng)注入來(lái)管理數(shù)據(jù)庫(kù)連接設(shè)置。 創(chuàng)建一個(gè)常數(shù)以保存數(shù)據(jù)庫(kù)URL。

   > 用Angular's

   服務(wù)：appSettings

   >

   $http> >創(chuàng)建一個(gè)CouchDB視圖（

   ）來(lái)檢索費(fèi)用數(shù)據(jù)。 Angular Controller使用服務(wù)來(lái)向此視圖提出請(qǐng)求，並使用檢索到的數(shù)據(jù)更新

   。 教程演示了使用_design/expenses/_view/byName在視圖中顯示數(shù)據(jù)。 $http$scope ng-repeat

   創(chuàng)建和處理費(fèi)用提交表格：>

   添加了HTML表單，以允許用戶輸入新的費(fèi)用。 指令將表單輸入結(jié)合到角範(fàn)圍。 該指令調(diào)用控制器函數(shù)，使用

   將數(shù)據(jù)發(fā)送到couchdb。 樂(lè)觀的更新用於向用戶提供立即反饋。 >

   添加驗(yàn)證：

   ng-model>服務(wù)器端驗(yàn)證使用ng-submit>在CouchDB設(shè)計(jì)文檔中實(shí)現(xiàn)。 使用Angular's$http.post和

   指令添加客戶端驗(yàn)證。 如果表格無(wú)效，則使用

   檢查表格的有效性。

   validate_doc_update結(jié)論： required

   教程結(jié)束時(shí)，總結(jié)了所涵蓋的關(guān)鍵概念並建議進(jìn)一步的探索主題，例如在CouchDB上託管，文檔更新，自定義指令，複製和更高級(jí)的視圖功能。 還包括一個(gè)常見(jiàn)問(wèn)題部分，以解決有關(guān)託管，使用JavaScript/node.js/couchdb的常見(jiàn)問(wèn)題，以及安裝/託管建議。

以上是跟蹤C(jī)ouchDB和Angular的費(fèi)用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！