Doing this MEAN stack教程，它基本上创建了一个基本的类似reddit的克隆，主页面显示所有帖子，对于每个单独的帖子，一个单独的页面显示帖子及其评论。
一切都工作得很好，直到我将resolve属性添加到$stateProvider的"home"状态，这(据我所知)确保在视图呈现之前从数据库加载所有帖子。在我添加了resolve后，用于"home"的内联HTML(用于打印主页)停止了工作。如果我注释'resolve'，它会再次工作。
我有一个艰难的调试时间，因为我仍然在学习每件事是如何工作的(虽然我对OOP有一个基本的掌握，但完全是初学者)。有人知道发生了什么吗?如果你想让我更好地格式化这篇文章，请告诉我。
链接到我的Github与这个项目的代码
我编辑过的文件有:
app.js(我刚刚在这里添加了mongoose)
public/javascripts/angularApp.js (angular模块文件)
模型/posts.js 文章(模型)
models/comments.js (model for comments)
routes/index.js (get/post request等)
视图/索引。ejs(主视图文件)
这是angular应用的javascript代码(我已经在这里注释掉了'resolve'):
var app = angular.module('flapperNews', ['ui.router']);
<!-- POSTS-service -->
app.factory('posts', ['$http', function($http){
// create object o with an array called posts
var o = {
posts: []
};
o.getAll = function() {
return $http.get('/posts').success(function(data) {
// copy the received data into object o's posts array
angular.copy(data, o.posts);
});
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
/* resolve: {
postPromise: ['posts', function(posts){
return posts.getAll();
}]
} */
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
})
$urlRouterProvider.otherwise('home');
}
]);
<!-- MAIN CONTROLLER -->
app.controller('MainCtrl', ['$scope', 'posts',
function($scope, posts) {
$scope.posts = posts.posts;
<!-- 2way binding eli servicen array päivittyy myös -->
$scope.addPost = function() {
if(!$scope.title || $scope.title == '') { return; }
$scope.posts.push({
title: $scope.title,
upvotes: 0,
link:
$scope.link,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title='';
$scope.link='';
};
$scope.incrementUpvotes = function (post) {
post.upvotes += 1;
};
}]
);
<!-- POSTS CONTROLLER -->
app.controller('PostsCtrl', ['$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
// fetch post with correct ID from posts service and save it into $scope.post
$scope.post = posts.posts[$stateParams.id];
}]);您可以传递以下信息:
resolve:{
posts: "posts"
}
然后你可以在你的控制器中使用posts作为一个依赖项。或者，你也可以在resolve对象中调用$http，像这样返回承诺，并将结果传递给angular控制器。
posts: function($http){
return $http({method: 'GET', url: '/postt'})
.then (function (data) {
return doSomeStuffFirst(data);
});
},
如果你想保持当前的结构在返回的posts工厂(而不是只有http。数据响应)，您可以像这样使用$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;
}]);
在本例中，您将获得完整的0对象作为promise的返回(使用.then函数)，因此您将能够重用这些数据。