关于 AngularJS 中的 javascript:ui-route 显示空白页面

ui-route in AngularJS showing empty page

我正在尝试按照本教程学习 AngularJS：https://thinkster.io/mean-stack-tutorial。

我在它说”创建新评论”之前就开始了。我遇到的问题是，当我单击”评论”时，会出现一个只有一条水平线的空白页面。

我的理解是帖子的标题应该在两条虚假评论的顶部。这是我的代码：

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html>
<html>
<head>
Flapper News

<!– 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 src=“http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js”>
<script src=“app.js”>

<!– Inline home template –>
<script type=“text/ng-template” id=“/home.html”>

Flapper News

<!– Show all the posts –>

<span class=“glyphicon glyphicon-thumbs-up” ng–click=“incrementUpvotes(post)”></span>
{{post.upvotes}}

<span style=“font-size:20px;”>
{{post.title}}
<span ng–hide=“post.link”>{{post.title}}</span>
</span>

<br />
<span style=“font-size: 12px;”>
Comments l
Share
</span>

<!– Form to make new posts –>
<form ng–submit=“addPost()” style=“margin-top:30px;”>
Add New Post

<!– Inline Posts section –>
<script type=“text/ng-template” id=“/posts.html”>

<!– Display title as header –>

{{post.title}}
<span ng–hide=“post.link”>{{post.title}}</span>

<!– Display the comment –>

<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>

</body>
</html>

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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.

ui-route in AngularJS showing empty page

猜你喜欢