AngularJS工廠依賴關係

我正在使用AngularJS來提取存儲在mongodb中的信息。我試圖使用$http來使用工廠檢索該信息。我讀了很多關於如何做的信息，沒有人爲我工作。AngularJS工廠依賴關係

此外，我使用節點+快遞，路由工作正常。問題是工廠和依賴關係。

我唯一需要的是：存儲在MongoDB中

提取信息。
將該信息存儲在控制器中。
在我的應用程序的主頁面顯示該信息。

的index.html

<!doctype html> 
<html ng-app="angular-blog"> 
    <head> 
    <title> Angular blog </title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- AngularJS and JQuery include. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
    <!-- Custom CSS --> 
    <link rel="stylesheet" href="./css/article.css" ></link> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </head> 

    <body> 

    <menu-bar></menu-bar> 

    <div class="container" ng-controller="ArticleController as articleCtrl"> 
     <h2> Blog </h2> 
     <div class="col-sm-4" ng-repeat="elem in articleCtrl.list"> 
     <h4>{{ elem.title }}</h4> 
     <p> {{ elem.desc }} </p> 
     </div> 
    </div> 


    <!-- Custom controller. --> 
    <script src="./js/controllers/article.js"></script> 
    </body> 

</html>

article.js

(function(){ 
    var app = angular.module ('angular-blog', []); 

    app.directive ('menuBar', function(){ 
    return { 
     restrict  : 'E', 
     templateUrl  : '../templates/menu-bar.html' 
    }; 
    }); 

    app.service ('articleFactory', ['$q', '$http', function ($q, $http){ 
    this.getAllArticles = function(){ 
     var deferred  = $q.defer(), 
      httpPromise  = $http.get ('/entries'); 

     httpPromise.success (function (data){ 
     deferred.resolve (data); 
     }) 
     .error (function (err){ 
     console.log (err); 
     }); 

     return deferred.promise; 
    } 
    }]); 

    app.controller ('ArticleController', ['$http', 'articleFactory', function ($http, articleFactory){ 
    this.article = {}; // Simple article. 
    this.list = []; // Article list. 

    this.list = articleFactory.getAllArticles() 
    .then (function (data){ 
     return data; 
    }, function (err){ 
     console.error (err); 
    }); 

    this.addArticle = function(){ 
     $http.post ('/addEntry', this.article) 
     .success (function (data){ 
     console.log (data); 
     }) 
     .error (function (data){ 
     console.log ('Error: ' + data); 
     }); 

     this.article = {}; 
    }; 

    this.resetArticle = function(){ 
     this.article = {}; 
    }; 

    }]); 

})();

錯誤

我的主要頁面不顯示列表。

來源

2015-06-22 Ismael Moral

將'app.factory'更改爲'app.service'並嘗試。 – Chandermani

您正好無法使用此工具綁定工廠:-) – squiroid

我將工廠更改爲服務，並且出現其他錯誤。問題已更新！ –

DOCS

與您使用this工廠返回一個對象或原始類型不this

app.services('articleFactory', ['$q', '$http', function ($q, $http){ 
    this.getAllArticles = function(){ 
     var deferred  = $q.defer(), 
      httpPromise  = $http.get ('/entries'); 

     httpPromise.success (function (data){ 
     deferred.resolve (data); 
     }) 
     .error (function (err){ 
     console.log (err); 
     }); 

     return deferred.promise; 
    } 
    }]);

修訂ANSWER結合 你的控制器應該是這樣的更改factory到service ： -

app.controller ('ArticleController', ['$http', 'articleFactory', function ($http, articleFactory){ 
    this.article = {}; // Simple article. 
    this.list = []; // Article list. 

    articleFactory.getAllArticles() 
    .then (function (data){ 
     this.list = data; 
    }, function (err){ 
     console.error (err); 
    }); 

    this.addArticle = function(){ 
     $http.post ('/addEntry', this.article) 
     .success (function (data){ 
     console.log (data); 
     }) 
     .error (function (data){ 
     console.log ('Error: ' + data); 
     }); 

     this.article = {}; 
    }; 

    this.resetArticle = function(){ 
     this.article = {}; 
    };

來源

2015-06-22 18:14:42 squiroid

顯然this.list = articleFactory.getAllArticles;是不是一個有效的聲明getAllArticals是一個函數而不是變量:) 希望你明白了。 – squiroid

問題已更新，並且出現其他錯誤。 –

我會改變這一點，我仍然會遇到同樣的問題。 –

AngularJS工廠依賴關係

回答

相關問題