Issue encountered with PouchDB: The error message reads as follows - TypeError: angular.factory is not a

Question

Issue encountered with PouchDB: The error message reads as follows - TypeError: angular.factory is not a

Currently, I am delving into the realm of utilizing PouchDB within an AngularJS environment. My reference point is these guiding instructions located at https://github.com/wspringer/angular-pouchdb

The stumbling block I face pertains to grasping the syntax necessary for crafting factories or services. My progress halts upon reaching the segment on "Interacting with the database"

app.js

'use strict';

angular
  .module('myappApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'pouchdb'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
angular.factory('someservice', function(pouchdb) {
  // Leverage pouchdb capabilities here.
  var db = pouchdb.create('testdb');
  pouchdb.destroy('testdb');
  db.put({_id: 'foo', name: 'bar'});
});

Upon integrating the "db.put", The error message that surfaces in the browser’s console states:

 [15:17:45.343] TypeError: angular.factory is not a function @ http://127.0.0.1:9000/scripts/app.js:21

javascript angularjs angularjs-service pouchdb

Answer 1

Answer №1

When it comes to the angular object, there is no factory method available, resulting in it being returned as undefined.

To resolve this issue, try placing it within the object that is returned by the module method.

angular
  .module('myappApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'pouchdb'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  // Take note of the subtle difference here, utilizing the object returned by module() and config()
  .factory('someservice', function(pouchdb) {
    // Perform actions with pouchdb.
    var db = pouchdb.create('testdb');
    pouchdb.destroy('testdb');
    db.put({_id: 'foo', name: 'bar'});
  });

Answer 2

When it comes to the angular object, there is no factory method available, resulting in it being returned as undefined.

To resolve this issue, try placing it within the object that is returned by the module method.

angular
  .module('myappApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'pouchdb'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  // Take note of the subtle difference here, utilizing the object returned by module() and config()
  .factory('someservice', function(pouchdb) {
    // Perform actions with pouchdb.
    var db = pouchdb.create('testdb');
    pouchdb.destroy('testdb');
    db.put({_id: 'foo', name: 'bar'});
  });

Answer 3

Answer №2

Furthermore, I successfully modified this code snippet to verify the functionality of the DB http://plnkr.co/edit/M2K7no75zonXKcXKF9Sc?p=preview

app.js 'use strict';

angular
  .module('myappApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'pouchdb'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .factory('MyModel', function(pouchdb) {
    return new pouchdb.create('mydb');
  })
  .run(function (){
    var db = new PouchDB('mydb');

    db.info().then(function(info) {
      if (info.doc_count < 2) {
        db.post({display: 'Hello'});
        db.post({display: 'World'});
      }
    });
  });

main.js

'use strict';

angular.module('myappApp')
  .controller('MainCtrl', function ($scope, MyModel) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    MyModel.info().then(function(info) {
      $scope.numOfDocs = info.doc_count;
    });

    $scope.options = {
      db: MyModel,
      name: 'Visitor'
    };

    $scope.db = MyModel;
  });

main.html

  <p>Greetings {{options.name}}! There are {{numOfDocs}} documents in your Pouch</p>

  <p>Root scope:</p>
  <ul>
    <li pouch-repeat="item in db" ng-bind="item.display"></li>
  </ul>

  <p>Child scope:</p>
  <ul>
    <li pouch-repeat="item in options.db" ng-bind="item.display"></li>
  </ul>

Answer 4

Furthermore, I successfully modified this code snippet to verify the functionality of the DB http://plnkr.co/edit/M2K7no75zonXKcXKF9Sc?p=preview

app.js 'use strict';

angular
  .module('myappApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'pouchdb'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .factory('MyModel', function(pouchdb) {
    return new pouchdb.create('mydb');
  })
  .run(function (){
    var db = new PouchDB('mydb');

    db.info().then(function(info) {
      if (info.doc_count < 2) {
        db.post({display: 'Hello'});
        db.post({display: 'World'});
      }
    });
  });

main.js

'use strict';

angular.module('myappApp')
  .controller('MainCtrl', function ($scope, MyModel) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    MyModel.info().then(function(info) {
      $scope.numOfDocs = info.doc_count;
    });

    $scope.options = {
      db: MyModel,
      name: 'Visitor'
    };

    $scope.db = MyModel;
  });

main.html

  <p>Greetings {{options.name}}! There are {{numOfDocs}} documents in your Pouch</p>

  <p>Root scope:</p>
  <ul>
    <li pouch-repeat="item in db" ng-bind="item.display"></li>
  </ul>

  <p>Child scope:</p>
  <ul>
    <li pouch-repeat="item in options.db" ng-bind="item.display"></li>
  </ul>

Issue encountered with PouchDB: The error message reads as follows - TypeError: angular.factory is not a

Answer №1

Answer №2

Similar questions

Using the map function in React, you can tie the state to a conditional statement

Problem: Vue 3 build does not generate service worker

Updating parent array values within child components in React

The 'load()' event method in jQuery does not function properly within the 'ready()' event method on mobile browsers

What could be causing my GET route to return an empty array?

When anchor is set programmatically, the focus outline is not displayed

eslint is designed to not handle multiple package.json files

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

Utilizing React JS to assign various state values from a dropdown menu selection

Leveraging AngularJS, optimizing SEO, and hosting S3 static pages

Hiding the icon if there are no child elements present

Unveiling the secrets to retrieving JSON array objects in HTML with the help of Angular!

Is it true that Safari restricts AJAX Requests following a form submission?

I prefer to disable the toggle feature if the target remains unchanged

Guide on accessing Azure Configuration Application settings in a Node application with JavaScript

"Looking for a way to eliminate the background of an image on NextJS? Learn

Socket.io-powered notification system

Is the this.props.onChange method called within the render function?

The Route.go function is ineffective when used in form submission

Is there a way to trigger a JavaScript function once AJAX finishes loading content?