javascript - 在执行 MEAN 教程时,当 'resolve' 被引入 $stateProvider 状态时,内联 HTML 停止工作

标签 javascript angularjs node.js express mean-stack

正在做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/

相关文章:

javascript - HTML/js 如何从多个不同的图像宽度设置多个 div 宽度?

javascript - Vuejs/javascript 计算购物车中的商品

javascript - 从 .txt 文件读取并显示数据的 React 组件

javascript - nodejs异步嵌套调用

node.js - Node ,express.session 作为中间件不设置 cookie

Javascript 默认关键字

javascript - 如何在 Material 设计设计的页面中选择 Protractor 中的按钮/元素?

javascript - 当在 then 函数内部分配 $scope 值时,数据绑定(bind)不起作用

angularjs - Angularjs 中的多个模块

jquery - grunt concat/uglify 后 Firefox 无响应脚本