AngularJS–$stateProvider-如何定义多个状态
我一直在编写本教程： 在我完成路由并创建“posts页面”之前，一切都很顺利。我忘了测试我在过程中编写的代码，当我测试它时，什么都没有显示出来：-（我一直在尝试，试图找出可能的错误，但我找不到任何东西，这会使HTML根本没有显示任何东西 我有这两个文件。请帮助我理解，为什么什么都没有显示 index.html：AngularJS–$stateProvider-如何定义多个状态,angularjs,Angularjs,我一直在编写本教程： 在我完成路由并创建“posts页面”之前，一切都很顺利。我忘了测试我在过程中编写的代码，当我测试它时，什么都没有显示出来：-（我一直在尝试，试图找出可能的错误，但我找不到任何东西，这会使HTML根本没有显示任何东西 我有这两个文件。请帮助我理解，为什么什么都没有显示 index.html： <html> <head> <title>Cortrium News</title> <link href="http:/
<html>
<head>
<title>Cortrium News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<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" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Cortrium News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
<a href="#/posts/{{$index}}">Comments</a>
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<script type="text/ng-template" id="/posts.html">
<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>
<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>
<form ng-submit="addComment()"
style="margin-top:30px;">
<h3>Add a new comment</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Comment"
ng-model="body"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
一个分号到多个分号在第节：
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
}) // ; remove semicolon as you want to chain many methods to $stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
var-app=angular.module（'flapperNews'，['ui.router']）；
app.config([
“$stateProvider”，
“$urlRouterProvider”，
函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（“家”{
url:“/home”，
templateUrl:“/home.html”，
控制器：“MainCtrl”
})
.州（“职位”{
url:“/posts/{id}”，
templateUrl:“/posts.html”，
控制器：“PostsCtrl”
});
$urlRouterProvider。否则（“主页”）；
}
]);
应用程序工厂（'posts'[
函数（）{
变量o={
员额：[]
};
返回o；
}
])
应用程序控制器（'MainCtrl'[
“$scope”，
"职位",，
职能（范围、员额）{
$scope.test='Hello world！'；
$scope.posts=posts.posts；
$scope.addPost=函数（）{
如果（$scope.title==''）{
返回
};
$scope.posts.push({
title:$scope.title，
link:$scope.link，
得票数：0，
评论：[{
作者：《乔》，
正文：“酷帖子！”，
赞成票：0
}, {
作者：《鲍勃》，
身体：“好主意，但一切都错了！”，
赞成票：0
}]
});
$scope.title=''；
$scope.link=''；
}
$scope.IncrementUpVoces=函数（post）{
post.upvoces+=1；
}
}
])
.控制器（'PostsCtrl'[
“$scope”，
“$stateParams”，
"职位",，
函数（$scope、$stateparms、posts）{
$scope.post=posts.posts[$stateParams.id]；
$scope.addComment=函数（）{
如果（$scope.body==''）{
返回
};
$scope.posts.comments.push({
body:$scope.body，
作者：'用户'，
得票数：0，
});
$scope.body=''；
}
}
])；
Cortrium新闻
{{post.upvows}
{{post.title}
添加新帖子
邮递
{{post.title}
{{comment.upvoates}}-by{{comment.author}
{{comment.body}
添加新注释
邮递
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
}) // ; remove semicolon as you want to chain many methods to $stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});