CouchDBおよびAngularでの追跡費用

このチュートリアルでは、CouchDB（NOSQLデータベース）とAngular（JavaScriptフレームワーク）を使用した費用追跡アプリケーションの構築を示しています。 ユニークな側面はCouchDBのHTTP APIであり、Angular Frontendとデータベース間の直接通信を可能にし、別のバックエンドサーバーの必要性を排除します。

各ステップがコミットで表される（ここでは詳細ではありませんが）、各ステップを段階的に段階的に構築することをカバーします。完全なコードはgithubで利用できます（元のリンクが提供されていないリンクは、利用可能な場合は追加する必要があります）。

重要な概念：

couchdbのHTTP API：

HTTPリクエストによる直接クライアント側インタラクションは、開発を簡素化します。
• Angularの依存関係インジェクション（DI）：アプリケーションの依存関係、モジュール性とテスト可能性の向上を管理しています。
• 双方向のデータバインディング：角度モデルとビューを効率的に同期し、CouchDBデータとのUIの一貫性を確保します。
クライアントサイドとサーバー側の検証：
• Angular Handles FrontEnd検証、CouchDBはデータの整合性のドキュメント検証を強制します。 スケーラビリティ：
チュートリアルでは、スケーラブルなソリューションを構築するためのディレクティブやデータバインディングなどの手法を紹介しています。
• なぜcouchdb？
• を選択するのか indexedDBやローカルストレージなどのクライアント側オプションが存在しますが、データベースサーバーは特に共同アプリケーションに利点を提供します。 複数のユーザーは、経費リストに同時にアクセスして更新できます。 CouchDBのネイティブHTTPサポートは、中間層を排除し、アプリケーションとデータベース間の通信を簡素化します。 複製の固有のサポートにより、分散データベースシステムが簡単に実装できます。
前提条件：

最新のcouchdb（バージョン1.6以降）と最近の安定したnode.jsリリース（バージョン0.10.x以降）をインストールします。

開発環境のセットアップ：

node.jsとツールのインストール：

インストーラー（node.js Webサイトで利用可能）またはNVMのようなパッケージマネージャーを使用します。 NPMを使用してグローバルにグローバルに

、

、、および

をインストールします。

1. 角度アプリケーションの作成と足場：プロジェクトディレクトリを作成し、ナビゲートし、角度ジェネレーターを使用してください。 yo generator-angular grunt-clicouchapp開発サーバーを実行します。npm install -g yo generator-angular grunt-cli couchappGruntを使用して開発サーバーを起動します。 これは、ブラウザで

   を開くはずです。

2. mkdir expenses && cd expenses && yo angular expenses

   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の構成（通常は

   ）でCORを有効にします。 チュートリアルでは、corsを有効にし、起源をlocal.iniに設定するためのコマンドを提供します（開発のみ;これを生産用に変更してください）。 curl*角度および依存性注入：

   チュートリアルでは、Angularの依存関係注入を使用してデータベース接続設定を管理しています。 データベースのURLを保持するために定数が作成されます。

   AngularのappSettingsサービスでデータを取得する：

   couchdbビュー（）は、経費データを取得するために作成されています。 Angular Controllerは、$httpサービスを使用して、このビューにリクエストを行い、取得したデータを使用してを更新します。 チュートリアルでは、を使用してビューにデータを表示します。

   _design/expenses/_view/byName $http$scope費用の提出フォームの作成と処理：ng-repeat

   HTMLフォームが追加されて、ユーザーが新しい費用を入力できるようにします。 ディレクティブは、フォーム入力を角度スコープにバインドします。

   ディレクティブは、コントローラー関数を呼び出して、

   を使用してデータをCouchDBに送信します。 楽観的な更新は、ユーザーに即時のフィードバックを提供するために使用されます。 検証の追加：

   ng-modelサーバー側の検証は、ng-submitを使用してCouchDB設計ドキュメントに実装されています。 Angularの$http.postおよび

   ディレクティブを使用して、クライアント側の検証が追加されます。 フォームの有効性は、

   を使用してチェックされ、フォームが無効である場合は送信ボタンを無効にします。

   validate_doc_update結論：requiredng-pattern

   チュートリアルは、カバーされている主要な概念を要約し、CouchDBでのホスティング、ドキュメントの更新、カスタムディレクティブ、複製、より高度なビュー機能などのさらなる探索トピックを提案することで終了します。 FAQセクションは、ホスティングに関する一般的な質問、javascript/node.js/couchdbを一緒に使用し、インストール/ホスティングの推奨事項に対処するために含まれています。

以上がCouchDBおよびAngularでの追跡費用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。