Javascript 当'；解决'；将引入$stateProvider状态

这样做基本上创建了一个基本的类似reddit的克隆，主页上显示所有帖子，对于每个单独的帖子，一个单独的页面显示帖子及其评论

---

在我将resolve属性添加到$stateProvider的“home”状态之前，一切都很顺利，据我所知，该状态确保在呈现视图之前从数据库加载所有帖子。在我添加resolve之后，“home”的内联HTML（打印出主页）停止工作。如果我将“resolve”注释掉，它会再次起作用

我很难调试它，因为我仍在学习所有东西是如何工作的（虽然我对OOP有基本的掌握，但还是个初学者）。 有人知道发生了什么事吗？如果你想让我更好地格式化这篇文章，请让我知道

我所编辑的文件是：

app.js（我刚刚在这里添加了猫鼬）

public/javascripts/angularApp.js（角度模块文件）

模型/帖子.js（帖子模型）

模型/comments.js（评论模型）

路由/index.js（获取/发布请求等）

视图/index.ejs（主视图文件）

以下是angular应用程序javascript代码（我在此处注释掉了“resolve”）：

var-app=angular.module（'flapperNews'，['ui.router']）；
app.factory（'posts'，['$http'，函数（$http）{
//使用名为posts的数组创建对象o
变量o={
员额：[]
};
o、 getAll=function（）{
返回$http.get（'/posts'）.success（函数（数据）{
//将接收到的数据复制到对象o的posts数组中
复印件（数据、o.POST）；
});	
};
返回o；
}]);
app.config([
“$stateProvider”，
“$urlRouterProvider”，
函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（“家”{
url:“/home”，
templateUrl:“/home.html”，
控制器：“MainCtrl”
/*决心：{
postPromise:['posts'，函数（posts）{
return posts.getAll（）；
}]
} */
})
.州（“职位”{
url:“/posts/{id}”，
templateUrl:“/posts.html”，
控制器：“PostsCtrl”
})
$urlRouterProvider。否则（“主页”）；
}
]);
app.controller（'MainCtrl'，['$scope'，'posts'，
职能（范围、员额）{
$scope.posts=posts.posts；
$scope.addPost=函数（）{
如果（！$scope.title | |$scope.title==''）{return；}
$scope.posts.push({
title:$scope.title，
得票数：0，
链接：
$scope.link，
评论：[
{作者：'Joe'，正文：'Cool post！'，投票：0}，
{作者：“鲍勃”，正文：“好主意，但一切都错了！”，投票结果：0}
]
});
$scope.title=''；
$scope.link=''；
};
$scope.IncrementUpVoces=函数（post）{
post.upvoces+=1；
};
}]
);
app.controller（'PostsCtrl'、['$scope'、'$stateParams'、'posts'，
函数（$scope、$stateparms、posts）{
//从posts服务获取具有正确ID的post，并将其保存到$scope.post中
$scope.post=posts.posts[$stateParams.id]；
}]);您可以传递以下信息：

resolve:{
   posts: "posts"
}

然后，您可以在控制器中将POST用作依赖项。或者，您可以在resolve对象中进行$http调用，以像这样返回承诺，并将结果传递给angular控制器

posts:  function($http){
            return $http({method: 'GET', url: '/postt'})
               .then (function (data) {
                   return doSomeStuffFirst(data);
               });
         }, 

您可以通过以下步骤：

resolve:{
   posts: "posts"
}

然后，您可以在控制器中将POST用作依赖项。或者，您可以在resolve对象中进行$http调用，以像这样返回承诺，并将结果传递给angular控制器

posts:  function($http){
            return $http({method: 'GET', url: '/postt'})
               .then (function (data) {
                   return doSomeStuffFirst(data);
               });
         }, 

如果您希望在返回posts工厂时保持当前结构（而不是仅获取http.data响应），可以使用$q，如下所示：

app.factory('posts', ['$http', '$q', function($http, $q){
  var deferred = $q.defer();

  // create object o with an array called posts
  var o = {
    posts: [] 
  };

  o.getAll = function() {

   $http.get('/posts').then(function(data) {
      // copy the received data into object o's posts array
      angular.copy(data, o.posts);
      deferred.resolve(o);
    }); 
  };

  return deferred.promise;
}]);

在这种情况下，您将获得完整的o对象作为承诺的回报（使用.then函数），因此您将能够重用此数据。
如果您希望在posts工厂的回报中保持当前结构（而不是仅获得http.data响应），您可以像这样使用$q：

app.factory('posts', ['$http', '$q', function($http, $q){
  var deferred = $q.defer();

  // create object o with an array called posts
  var o = {
    posts: [] 
  };

  o.getAll = function() {

   $http.get('/posts').then(function(data) {
      // copy the received data into object o's posts array
      angular.copy(data, o.posts);
      deferred.resolve(o);
    }); 
  };

  return deferred.promise;
}]);

在这种情况下，您将获得完整的o对象作为承诺的回报（使用.then函数），因此您可以重用此数据。
有关更多详细信息，请阅读此：有关更多详细信息，请阅读此：