添加第二个状态后AngularJS路由不工作
我正在使用ui.router。首先,当我刚刚设置了主状态时,一切都正常。但在添加文章后,我的路由将不起作用。我有以下代码:添加第二个状态后AngularJS路由不工作,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我正在使用ui.router。首先,当我刚刚设置了主状态时,一切都正常。但在添加文章后,我的路由将不起作用。我有以下代码: var app = angular.module('ibrahimsBlog', ['ui.router']) app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('
var app = angular.module('ibrahimsBlog', ['ui.router'])
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
});
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
$urlRouterProvider.otherwise('home');
}])
app.factory('articlesFactory', [function(){
var art = { articles: [] };
return art;
}])
app.controller('ArticlesController', [
'$scope',
'$stateParams',
'articlesFactory',
function($scope, $stateParams, articlesFactory){
$scope.article = articlesFactory.articles[$stateParams.id];
}]);
app.controller('PrimaryController', [
// Two Way Data Binding ist nur möglich mit scope Variablen.
'$scope',
'articlesFactory',
function($scope, articlesFactory) {
$scope.articles = articlesFactory.articles;
$scope.articles = [
{ title : 'foo', content : "foo", likes : 5, date : '12/15/2014' },
{ title : 'bar', content : "bar", likes : 2, date : '12/14/2014' },
{ title : 'baz', content : "baz", likes : 4, date : '12/23/2014' }
];
$scope.addArticle = function() {
if(!$scope.title || $scope.title === '') { return; }
$scope.articles.push(
{
title: $scope.title,
content: $scope.content,
likes: 0,
date: '12/15/2014',
comments: [
{ author: 'foo', comment: 'bar', upvotes: 0 }
]
}
);
$scope.title = '';
$scope.content = '';
}
$scope.likeArticle = function(article) {
article.likes += 1;
}
}]);
这是我的html文件:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ibrahims Blog</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style> .glyphicon-heart { cursor:pointer } </style>
</head>
<body ng-app="ibrahimsBlog">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<form ng-submit="addArticle()" style="margin-top:30px;">
<h3>Create a new article!</h3>
<div class=form-group">
<input type="text"
placeholder="title"
ng-model="title">
</input>
</div>
<div class="form-group">
<input type="text"
placeholder="content"
ng-model="content">
</input>
</div>
<button type="submit" class="btn btn-primary">Hinzufügen</button>
</form>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Ibrahims Blog</h1>
</div>
<span>
<a href="#/articles/{{ index }}">Go</a>
</span>
</script>
<script type=text/ng-template" id="/articles.html">
<div class="page-header">
<h3> {{ article.title }} </h3>
</div>
<div ng-repeat="article in articles">
<span class="glyphicon glyphicon-heart"
ng-click="likeArticle(article)"></span>
{{ article.title }} - "{{ article.content }}" - Likes: {{ article.likes }}, Date: {{ article.date }}
</div>
</script>
</div>
</div>
</body>
</html>
易卜拉欣博客
.glyphicon心脏{光标:指针}
创建一篇新文章!
{{article.title}}
{{article.title}}-“{article.content}”-Likes:{{article.Likes}},Date:{{article.Date}
不幸的是,我收到的所有东西都是html的一部分
<form ng-submit="addArticle()" style="margin-top:30px;">
<h3>Create a new article!</h3>
<div class=form-group">
<input type="text"
placeholder="title"
ng-model="title">
</input>
</div>
<div class="form-group">
<input type="text"
placeholder="content"
ng-model="content">
</input>
</div>
<button type="submit" class="btn btn-primary">Hinzufügen</button>
</form>
创建一篇新文章!
我认为在定义$stateProvider时,分号放错了位置。您没有正确链接.state调用,因为第一个分号终止了语句:
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
}); // <-------------------------Remove this semi-colon!
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
$stateProvider
.州(“家”{
url:“/home”,
templateUrl:“/home.html”,
控制器:“主控制器”
}); // 我认为在定义$stateProvider时,分号放错了位置。您没有正确链接.state调用,因为第一个分号终止了语句:
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
}); // <-------------------------Remove this semi-colon!
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
$stateProvider
.州(“家”{
url:“/home”,
templateUrl:“/home.html”,
控制器:“主控制器”
}); // 正如chubbsondubs所说,我必须删除分号。但是,因为这只是一个问题的原因,所以这里是我后来发现的另一个故障。在我的模板中的这一行
<script type=text/ng-template" id="/articles.html">
正如chubbsondubs所说,我必须删除分号。但是,因为这只是一个问题的原因,所以这里是我后来发现的另一个故障。在我的模板中的这一行
<script type=text/ng-template" id="/articles.html">
jeeez这就是一切应该有一个堆栈站点,比如CodeReview:搜索dumbfails@IbrahimApachi这会在控制台中产生一个javascript错误,并带有指向文件和行号的链接。当某些东西不起作用时,尝试检查控制台是否有错误。@MathewFoscarini这可能是一个愚蠢的问题,因为我对整个mean堆栈有点陌生,但我使用node JS作为服务器,在那里我没有收到任何错误。我应该看哪里?我必须启用故障排除吗?这将在Chrome或Firefox浏览器的开发控制台中。这是一个客户端错误,所以它会显示在浏览器中。@chubbsondubs嘿,chubbs,当我点击Go按钮时,我会被引导到正确的URL,但会立即重定向到我的主页。服务器给了我一个404。你知道为什么会这样吗?天啊,那就是一切应该有一个堆栈站点,比如CodeReview:搜索dumbfails@IbrahimApachi这会在控制台中产生一个javascript错误,并带有指向文件和行号的链接。当某些东西不起作用时,尝试检查控制台是否有错误。@MathewFoscarini这可能是一个愚蠢的问题,因为我对整个mean堆栈有点陌生,但我使用node JS作为服务器,在那里我没有收到任何错误。我应该看哪里?我必须启用故障排除吗?这将在Chrome或Firefox浏览器的开发控制台中。这是一个客户端错误,所以它会显示在浏览器中。@chubbsondubs嘿,chubbs,当我点击Go按钮时,我会被引导到正确的URL,但会立即重定向到我的主页。服务器给了我一个404。你知道为什么会这样吗?