添加第二個狀態後，AngularJS路由不起作用

我正在使用ui.router。首先，當我剛剛設置家庭狀態時，一切正常。但是在添加條款後，我的路由不起作用。我有以下的角度代碼：添加第二個狀態後，AngularJS路由不起作用

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>

不幸的是我得到的一切是繼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>

的一部分編輯 不幸的仍然是不工作的一部分..當我使用去按鈕，我看到URL的更改，但它會立即將我重定向到家庭模板。在服務器上，我收到一個404錯誤。你知道爲什麼會發生這種情況嗎？

來源

2014-12-27 BoJack Horseman

我認爲你在定義$ 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' 
});

來源

2014-12-27 15:56:35 chubbsondubs

jeeeez那就是一切..：d應該有一個堆棧的網站，如代碼審查：尋找啞失敗，將已經產生了 – 2014-12-27 15:58:41

@IbrahimApachi控制檯中的javascript錯誤，並鏈接到文件和行號。嘗試檢查控制檯是否有錯誤。 – cgTag 2014-12-27 16:08:09

@MathewFoscarini這可能是一個愚蠢的問題，因爲我對整個平均堆棧有點新，但我使用節點JS作爲服務器，我沒有得到任何錯誤。我應該在哪裏看？我必須啓用故障排除嗎？ – 2014-12-27 16:13:34

像chubbsondubs說，我不得不刪除一個分號。但是因爲這只是造成一個問題的原因，所以我後來發現了另一個錯誤。在我的這一行模板中

<script type=text/ng-template" id="/articles.html">

引號丟失了！這是爲404的原因，它應該是這樣的：

<script type="text/ng-template" id="/articles.html">

來源

2015-01-01 17:28:23

添加第二個狀態後，AngularJS路由不起作用

回答

相關問題