Блог

Пытался найти примеры pouchdb / cloudant для последней стабильной версии angular2. Хотя есть много публикаций об ionic2, для ванильного angular2 нет ни одной.

Как настроить финальную версию angular 2 с помощью pouchdb, cloudant / couchdb?

Я начал с прочтения поста Джоша Морони, который действительно помог! (спасибо, Джош, отличный пост!). Моя настройка была для cloudant, хотя она должна быть такой же для couchdb.

Позвольте мне подвести итог тому, что я сделал для своей ванильной настройки angular 2, не стесняйтесь также обратиться к сообщению Джоша для подробного описания пунктов ниже. Я предполагаю, что у вас уже есть учетная запись cloudant и созданная база данных (если нет, возможно, вы захотите начать с этого).

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 убедитесь, что вы включили CORS для вашего API базы данных.

После установки всего вышеперечисленного нам нужно будет изменить несколько файлов (см. Ниже):

1. angular-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 через postman (например), убедитесь, что вы ввели свой логин / пароль cloudant / couchdb в разделе «Авторизация». В противном случае вы столкнетесь с ошибками чтения разрешений.

Демонстрационное приложение: https://github.com/rrubio/Angular2PouchDdCloudant