AngularJS中的ui路由显示空页面
ui-route in AngularJS showing empty page
我正在按照本教程学习AngularJS:https://thinkster.io/mean-stack-tutorial.
就在它说"创建新评论"之前,我开始讨论这个部分。我遇到的问题是,当我点击"评论"时,会出现一个只有水平线的空白页面。
根据我的理解,这篇文章的标题应该放在两条虚假评论的顶部。这是我的代码:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Flapper News</title>
<!-- BOOTSTRAP -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- ANGULARJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" style="padding: 50px">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!-- Inline home template -->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<!-- Show all the posts -->
<div ng-repeat="post in posts | orderBy: '-upvotes'" style="margin-bottom: 10px;">
<div class="row">
<div class="col-md-2" style="width: 80px;">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
</div>
<div class="col-md-9">
<span style="font-size:20px;">
<a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
<span ng-hide="post.link">{{post.title}}</span>
</span>
<br />
<span style="font-size: 12px;">
<a href="#/posts/{{$index}}">Comments</a> l
<a href="#/posts/{{$index}}">Share</a>
</span>
</div>
</div>
</div>
<!-- Form to make new posts -->
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add New Post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link" />
</div>
<button type="submit" class="btn btn-primary" ng-click="submit">Post</button>
</form>
</script>
<!-- Inline Posts section -->
<script type="text/ng-template" id="/posts.html">
<!-- Display title as header -->
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
<span ng-hide="post.link">{{post.title}}</span>
</h3>
</div>
<!-- Display the comment -->
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">{{comment.body}}</span>
</div>
</script>
</body>
</html>
app.js
var app = angular.module('flapperNews', ['ui.router']);
app.factory('posts', [function() {
var o = {
posts: []
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.addPost = function() {
if(!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool Post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but no!', upvotes: 0}
]});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts) {
$scope.posts = posts.posts['$stateParams.id'];
}]);
我不知道我做错了什么,因为它什么都没显示。任何帮助都将不胜感激,谢谢!
控制台错误:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
由于多个问题,您的代码将无法工作:1.您没有将addPosts()
中的任何id
属性添加到posts
,而是在访问posts.posts['$stateParams.id']
时期望它。
- 在注释模板中,您正在使用
post
,而您已经在控制器中声明了$scope.posts
我已经创建了一个jsbin来添加id
属性并修复其他问题,现在它可以工作了。
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- 从javascript文件中获取JSON,并使用NodeJS在路由文件中显示
- 仍然显示出错的路由
- AngularJS中的ui路由显示空页面
- 如何在路由页面上显示集合字段(带把手)
- Angular2路由-未显示子模板
- 侧边菜单运行,但路由文件不显示任何内容
- ng路由不起作用.我不知道错误是什么,因为控制台中没有显示任何内容
- 如何循环显示来自跟踪路由输出的谷歌地图v3中的标记
- ng路由白色页面后刷新页面显示
- AngularJS路由页面未显示
- 如何添加事件处理程序来路由Ember.js中显示的事件
- AngularJS路由未显示正确的视图
- 输入url时,AngularJS HTML子路由不显示
- Angularjs-ng路由在IE9上不起作用-视图不显示
- Node.js:更改路由设置;没有显示效果
- 如何在Meteor Iron路由器中的一条路由中不显示默认模板
- SplitApp SAPUI5中配置显示页面的路由
- AngularJS:路由到/page/:id并显示id'
- 如果使用React -router设置,React会显示路由