Angular Factory無法正常工作

Question

我正在嘗試使用此演示中修改的以下代碼為我的應用提供持久性服務

 /* global angular,window */
var ionicApp = angular.module('ionicApp', []);

ionicApp.factory('persistanceService', ['$q', function($q) {

    var setUp=false;
    var db;

    function init() {
        var deferred = $q.defer();

        if(setUp) {
            deferred.resolve(true);
            return deferred.promise;
        }

        var openRequest = window.indexedDB.open("indexeddb_angular",1);

        openRequest.onerror = function(e) {
            console.log("Error opening db");
            console.dir(e);
            deferred.reject(e.toString());
        };

        openRequest.onupgradeneeded = function(e) {

            var thisDb = e.target.result;
            var objectStore;

            //Create produto OS
            if(!thisDb.objectStoreNames.contains("produto")) {
                var produto = thisDb.createObjectStore('produto', {keyPath: 'id'});
                produto.createIndex('nome_idx', 'nome', {unique: false});
                produto.createIndex('quantidade_idx', 'quantidade', {unique: false});
                produto.createIndex('categoria_idx', 'categoria', {unique: false});
                produto.createIndex('quantidade_lista_idx', 'quantidade_lista', {unique: false});
                produto.createIndex('data_validade_idx', 'data_validade', {unique: false});
                produto.createIndex('lista_automatico_idx', 'lista_automatico', {unique: false});               
            }

        };

        openRequest.onsuccess = function(e) {
            db = e.target.result;

            db.onerror = function(event) {
                // Generic error handler for all errors targeted at this database's
                // requests!
                deferred.reject("Database error: " + event.target.errorCode);
            };

            setUp=true;
            deferred.resolve(true);

        };  

        return deferred.promise;
    }

    function isSupported() {
        return ("indexedDB" in window);     
    }

    function deleteProduto(key) {
        var deferred = $q.defer();
        var t = db.transaction(["produto"], "readwrite");
        var request = t.objectStore("produto").delete(key);
        t.oncomplete = function(event) {
            deferred.resolve();
        };
        return deferred.promise;
    }

    function getProduto(key) {
        var deferred = $q.defer();

        var transaction = db.transaction(["produto"]);  
        var objectStore = transaction.objectStore("produto");  
        var request = objectStore.get(key);  

        request.onsuccess = function(event) {  
            var produto = request.result;
            deferred.resolve(produto);
        }; 

        return deferred.promise;
    }

    function getProdutos() {
        var deferred = $q.defer();

        init().then(function() {

            var result = [];

            var handleResult = function(event) {  
                var cursor = event.target.result;
                if (cursor) {
                    result.push({key:cursor.key, title:cursor.value.title, updated:cursor.value.updated});
                    cursor.continue();
                }
            };  

            var transaction = db.transaction(["produto"], "readonly");  
            var objectStore = transaction.objectStore("produto");
            objectStore.openCursor().onsuccess = handleResult;

            transaction.oncomplete = function(event) {
                deferred.resolve(result);
            };

        });
        return deferred.promise;
    }

    function ready() {
        return setUp;
    }

    function saveProduto(produto) {
        //Should this call init() too? maybe
        var deferred = $q.defer();

        if(!produto.id) produto.id = "";


        var t = db.transaction(["produto"], "readwrite");

        if(produto.id === "") {
            t.objectStore("produto")
                            .add({"id": Guid.raw(),
                                    "nome": produto.nome,
                                    "quantidade": produto.quantidade,
                                    "categoria": produto.categoria,
                                    "data_validade": produto.data_validade,
                                    "quantidade_lista": produto.quantidade_lista,
                                    "lista_automatico": produto.lista_automatico});
        } else {
            t.objectStore("produto")
                            .put({"id": Guid.raw(),
                                    "nome": produto.nome,
                                    "quantidade": produto.quantidade,
                                    "categoria": produto.categoria,
                                    "data_validade": produto.data_validade,
                                    "quantidade_lista": produto.quantidade_lista,
                                    "lista_automatico": produto.lista_automatico});
        }

        t.oncomplete = function(event) {
            deferred.resolve();
        };

        return deferred.promise;
    }

    function supportsIDB() {
        return "indexedDB" in window;   
    }

    return {
        isSupported:isSupported,
        deleteproduto:deleteproduto,
        getproduto:getproduto,
        getprodutos:getprodutos,
        ready:ready,
        saveproduto:saveproduto,
        supportsIDB:supportsIDB
    };

}]);

這是我試圖在控制器中使用它的地方。

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.produto', {
      url: "/produto",
      views: {
        'home-tab': {
          templateUrl: "produto.html",
          controller: 'ProdutoController'
        }
      }
    })    
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "contact.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope) {
  console.log('HomeTabCtrl');
})
.controller('ProdutoController', function($scope, persistanceService){


console.log('HomeTabCtrl');


});

所以我收到此錯誤消息：錯誤：[$ injector：unpr]未知提供程序：persistanceServiceProvider <-persistanceService

我不知道為什么要添加sufix。

感謝您的關注。

Answer 1

上面有兩個代碼塊，第一個包含：

var ionicApp = angular.module('ionicApp', []);

第二個是：

angular.module('ionicApp', ['ionic'])

這兩個語句都創建了一個模塊，無論哪個第一個執行，都應保持不變，而第二個不具有數組參數。

angular.module(NAME, array) //creates a module
angular.module(NAME) //gets a references to a module

Answer 2

您已經對ionicApp進行了兩次定義，將第二個定義更改為：

 ionicApp.config(function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "tabs.html"
        })
        .state('tabs.home', {
          url: "/home",
          views: {
            'home-tab': {
              templateUrl: "home.html",
              controller: 'HomeTabCtrl'
            }
          }
        })
       .....