跟踪CouchDB和Angular的費用

>本教程演示了使用CouchDB（NOSQL數據庫）和Angular（JavaScript框架）構建費用跟踪應用程序。 獨特的方面是CouchDB的HTTP API，可以在Angular Frontend和數據庫之間進行直接通信，從而消除了對單獨的後端服務器的需求。

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

密鑰概念：

>

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

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

設置開發環境：

>

>

> install node.js and Tools：

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

，，和

使用npm：
1. >

   yo創建和腳克式Angular應用程序：創建一個項目目錄，導航到它，然後使用Angular Generator：generator-angulargrunt-cli couchapp npm install -g yo generator-angular grunt-cli couchapp

運行開發服務器：
2. 使用Grunt啟動開發服務器：。 這應該在您的瀏覽器中打開

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

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

   初始couchdb設置：

   1. 啟動couchdb：couchdb &

   2. 創建數據庫：curl -X PUT http://127.0.0.1:5984/expenses>

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

   啟用CORS：

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

   命令以啟用CORS並將其設置為

   >（僅用於開發；為生產更改此內容）。 local.ini curl*>角度和依賴注入：

   > >教程演示了使用Angular的依賴項注入來管理數據庫連接設置。 創建一個常數以保存數據庫URL。

   > 用Angular's

   服務：appSettings

   >

   $http> >創建一個CouchDB視圖（

   ）來檢索費用數據。 Angular Controller使用服務來向此視圖提出請求，並使用檢索到的數據更新

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

   創建和處理費用提交表格：>

   添加了HTML表單，以允許用戶輸入新的費用。 指令將表單輸入結合到角範圍。 該指令調用控制器函數，使用

   將數據發送到couchdb。 樂觀的更新用於向用戶提供立即反饋。 >

   添加驗證：

   ng-model>服務器端驗證使用ng-submit>在CouchDB設計文檔中實現。 使用Angular's$http.post和

   指令添加客戶端驗證。 如果表格無效，則使用

   檢查表格的有效性。

   validate_doc_update結論： required

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

以上是跟踪CouchDB和Angular的費用的詳細內容。更多資訊請關注PHP中文網其他相關文章！