Question

我正在使用ui.router。首先，当我设置家庭状态时，一切正常。但在添加文章后，我的路由将无法正常工作。我有以下角度代码：

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>

修改不幸的是，仍有一部分无效。当我使用 Go 按钮时，我看到了URL的更改，但它会立即将我重定向到主页模板。在服务器上我得到404错误。你知道为什么会这样吗？

Answer 1

我认为在定义$ 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'
});

Answer 2

就像chubbsondubs所说，我不得不删除分号。但是，由于这只是一个问题的原因，这是我后来发现的另一个错误。在我的模板中

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

引号丢失了！这就是404的原因。它应该是这样的：

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

添加第二个状态后，AngularJS路由无法正常工作

2 个答案: