角2 pouchdbとcloudant（couchdb） - howへ

Question

angular2最新の安定したリリースのためのpouchdb/cloudantの例を探してみました。 ionic2についてはたくさんの投稿がありますが、vanilla angular2はありません。

pouchdb、cloudant/couchdbで角度2の最終リリースを設定するにはどうすればよいですか？

Answer 1

私は実際に助けたJosh Moronyで投稿を読んで始めました！ （ジョシュ・グッド・ポストありがとう！）私の設定は雲のためのものでしたが、couchdbの場合と同じでなければなりません。

バニラ・アングル2のセットアップのために私が行ったことを要約すると、以下の点の詳細な説明についてはジョシュのポストも参照してください。私はあなたがすでに雲のアカウントとデータベースを作成していると仮定しています（そうでなければ、そこから始めたいかもしれません）。

1. npm install pouchdb --save
2. npm install -g typings
3. typings install --global --save dt~pouchdb dt~pouchdb-adapter-websql dt~pouchdb-browser dt~pouchdb-core dt~pouchdb-http dt~pouchdb-mapreduce dt~pouchdb-node dt~pouchdb-replication

注：cloudantの下で、あなたのデータベースAPIのCORSを有効にしてください。

上記のすべてをインストールした後、我々はいくつかのファイルを変更する必要があります（下記参照）：

1. 角度-cli.json - あなたの「パッケージ」を変更配列は、以下を反映します：

   "packages": [ 
   { 
       "PouchDB": { 
       "main": "pouchdb.js", 
       "defaultExtension": "js" 
       } 
   }] 
   

2. 例えば新しい "サービス" を作成します "のDataService"（私はangular-cliを使用）、あなたはペーストをコピーすることができます。ここで重要なのは "require(pouchdb)"であり、インポートによって他のコンポーネントにアクセスできるようにすることです。

   import { Injectable } from '@angular/core'; 
   var PouchDB = require('pouchdb'); 
   
   @Injectable() 
   export class DataService { 
   
       db: any; 
       username: any; 
       password: any; 
       remote: any; 
       data: any; 
   
       constructor() { 
       this.db = new PouchDB('YOUR_DATABASE'); 
       this.username = 'DATABASE_KEY'; 
       this.password = 'YOUR_PASSWORD'; 
   
       this.remote = 'https://YOU_ACCOUNT_NAME.cloudant.com/YOUR_DATABASE'; 
   
       let options = { 
        live: true, 
        retry: true, 
        continuous: true, 
        auth: { 
        username: this.username, 
        password: this.password 
        } 
       }; 
   
       this.db.sync(this.remote, options); 
   
       } 
   
       // other CRUD functions below... 
   } 
   

3. app.module.ts - あなたの新しい "DataService" をインポートし、 "providers" に追加します。

4. これで再生を開始できます。たとえば、ホームページのコンポーネントの下で、 "DataService"をインポートし、CRUD関数の呼び出しを開始します。 getDocuments、AddDocumentなど。

注：郵便配達（例えば）を介して、あなたのAPIをテストするつもりなら、あなたは「認可」の下で、あなたのcloudant/CouchDBのログイン/パスワードを入力してください。そうしないと、エラーを読み取る権限が発生します。

デモアプリ：https://github.com/rrubio/Angular2PouchDdCloudant