正在做this MEAN stack tutorial它基本上创建了一个基本的类似 reddit 的克隆,其主页显示所有帖子,对于每个单独的帖子,还有一个单独的页面显示帖子及其评论。
<小时/>一切都很顺利,直到我将解析属性添加到 $stateProvider 的“home”状态,这(据我所知)确保在呈现 View 之前从数据库加载所有帖子。添加解析后,打印主页的“home”内联 HTML 停止工作。如果我注释掉“解决”,它会再次起作用。
我很难调试这个,因为我仍在学习一切是如何工作的(尽管我对 OOP 有基本的掌握,但我完全是初学者)。 有人能明白发生了什么事吗?如果您希望我更好地格式化这篇文章,请告诉我。
Link to my Github with the code for this project
我编辑过的文件是:
app.js(我刚刚在这里添加了 Mongoose )
public/javascripts/angularApp.js( Angular 模块文件)
models/posts.js(帖子模型)
models/comments.js(评论模型)
routes/index.js(获取/发布请求等)
views/index.ejs(主视图文件)
这是 Angular 应用程序的 JavaScript 代码(我在这里注释掉了“解决”):
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"
}
然后您可以使用帖子作为 Controller 中的依赖项。或者,您可以在解析对象中进行 $http 调用来返回这样的 promise ,并将结果传递到 Angular Controller 中。
posts: function($http){
return $http({method: 'GET', url: '/postt'})
.then (function (data) {
return doSomeStuffFirst(data);
});
},
关于javascript - 在执行 MEAN 教程时,当 'resolve' 被引入 $stateProvider 状态时,内联 HTML 停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40300364/