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工厂依赖关系

回答

相关问题