Question

我正在使用AngularJS来提取存储在mongodb中的信息。我正在尝试使用工厂使用$http检索该信息。我读了很多关于如何做的信息，没有人适合我。

我也在使用node + express，路由工作正常。问题是工厂和依赖项。

我唯一需要的是：

提取存储在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 = {};
    };

  }]);

})();

错误

我的主页面未显示该列表。

Answer 1

<强> DOCS

将factory更改为service，因为您正在使用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;
    }
  }]);

更新的答案 你的控制器应该是这样的： -

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 = {};
    };

AngularJS工厂依赖项

1 个答案: