AngularJS链接不起作用

时间：2017-04-14 03:03:48

标签： angularjs

所以，我决定查看AngularJS，并正在thinkster.io上完成Angular Rails教程。我已经到了创建第二页的部分，并在主页上创建了一个链接以进入该页面。但是，链接似乎不起作用。这是我在thinkster项目上取得进展的html和js文件：

的index.html 

<html>
<head>
    <title>Flapper News</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <style> .glyphicon-thumbs-up {
        cursor: pointer
    } </style>
</head>
<body ng-app="flapperNews">
<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>Flapper 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>
                <a href="#/posts/{{$index}}">Comments</a>
            </span>
        </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"/>
        </div>
        <div class="form-group">
            <input type="text"
                   class="form-control"
                   placeholder="Link"
                   ng-model="link"/>
        </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>
</script>
</body>
</html>

app.js 

angular.module('flapperNews', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '/home.html',
                controller: 'MainCtrl'
            })
            .state('posts', {
                url: '/posts/{id}',
                templateUrl: '/posts.html',
                controller: 'PostsCtrl'
            });

        $urlRouterProvider.otherwise('home');
    }
])
.factory('posts', [function() {
    var o = {
        posts: []
    };
    return o;
}])
.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 everything is wrong!', upvotes: 0}
                ]
            });
            $scope.title = '';
            $scope.link = '';
        };
        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };
    }
])
.controller('PostsCtrl', [
    '$scope',
    '$stateParams',
    'posts',
    function($scope, $stateParams, posts) {
        $scope.post = posts.posts[$stateParams.id];
    }
]);

花了几个小时查看我的代码，在线查看示例，并查看本教程的前几个步骤后，我决定尝试创建尽可能简单的应用程序，以尝试获取链接工作，同时徒劳无功。这是我为更简单的应用程序编写的代码：

index2.html 

<html>
<head>
    <title>Flapper News</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
    <script src="app2.js"></script>
</head>
<body ng-app="flapperNews">
<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>Flapper News</h1>
    </div>
    {{test}}
    <a href="#/posts">Posts</a>
</script>

<script type="text/ng-template" id="/posts.html">
    <div class="page-header">
        <h1>Posts</h1>
    </div>
    {{test}}
    <a href="#/home">Home</a>
</script>
</body>
</html>

app2.js 

angular.module('flapperNews', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '/home.html',
                controller: 'MainCtrl'
            })
            .state('posts', {
                url: '/posts/{id}',
                templateUrl: '/posts.html',
                controller: 'PostsCtrl'
            });

        $urlRouterProvider.otherwise('home');
    }
])
.controller('MainCtrl', [
    '$scope',
    function ($scope) {
        $scope.test = 'Home';
    }
])
.controller('PostsCtrl', [
    '$scope',
    function($scope) {
        $scope.test = 'Posts';
    }
]);

不知怎的，我觉得我错过了一些由角度控制器处理的链接，但我不能为我的生活找出什么。任何解释/帮助将不胜感激。

2 个答案:

答案 0 :(得分：0)

问题似乎在您定义的路线中。 如果你想导航帖子状态，那么你也应该传递一些id作为url参数，因为你已经以这种方式定义了路由。

因此，请将您的app2.js文件更改为以下代码：

angular.module('flapperNews', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '/home.html',
                controller: 'MainCtrl'
            })
            .state('posts', {
                url: '/posts', // id is removed from the request parameter.
                templateUrl: '/posts.html',
                controller: 'PostsCtrl'
            });

        $urlRouterProvider.otherwise('home');
    }
])
.controller('MainCtrl', [
    '$scope',
    function ($scope) {
        $scope.test = 'Home1';
    }
])
.controller('PostsCtrl', [
    '$scope',
    function($scope) {
        $scope.test = 'Posts';
    }
]);
  

或者，如果您希望id在您的请求参数中，那么您可以这样做   以这种方式

 <a href="#/posts/1">Posts</a>

我认为这篇文章将解决您的问题。谢谢

答案 1 :(得分：0)

问题是你没有使用正确的hashbang前缀，请阅读this。 最近发生了这种变化，我发现你正在使用AngularJS ver。 1.6.4，我不记得确切的版本信息，但这在1.6.x左右发生了变化。因此，现在所有网址都应以'#!'为前缀。

建议：在您的链接中使用ui-sref而不是href。使用ui-href，您只需提供您要去的州的名称，ui-router将处理其余的事情。此外，您可以提供参数。有关ui-sref here。

的更多信息，请参阅

无论如何看到以下更改的代码：
此外，正如@floor所提到的，posts的网址不正确，因为您提到的状态定义为posts/{:id}，因此您必须使用#!/posts/1或在州定义中提供默认值文件。

示例＃1：＆＃39; href＆＃39;版本

＆＃13;
＆＃13; 
angular.module('flapperNews', ['ui.router'])
  .config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: '/home.html',
          controller: 'MainCtrl'
        })
        .state('posts', {
          url: '/posts/{id}',
          templateUrl: '/posts.html',
          controller: 'PostsCtrl'
        });

      $urlRouterProvider.otherwise('/home');
    }
  ])
  .controller('MainCtrl', [
    '$scope',
    function($scope) {
      $scope.test = 'Home';
    }
  ])
  .controller('PostsCtrl', [
    '$scope',
    function($scope) {
      $scope.test = 'Posts';
    }
  ]);
＆＃13; 
<html>

<head>
  <title>Flapper News</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
</head>

<body ng-app="flapperNews">
  <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>Flapper News</h1>
    </div>
    {{test}}
    <a href="#!/posts/1">Posts</a>
    <!-- Now the default prefix is '!' -->
  </script>

  <script type="text/ng-template" id="/posts.html">
    <div class="page-header">
      <h1>Posts</h1>
    </div>
    {{test}}
    <a href="#!/home">Home</a>
    <!-- Now the default prefix is '!' -->
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

示例＃2：＆＃39; ui-sref＆＃39;版本

＆＃13;
＆＃13; 
angular.module('flapperNews', ['ui.router'])
  .config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: '/home.html',
          controller: 'MainCtrl'
        })
        .state('posts', {
          url: '/posts/{id}',
          templateUrl: '/posts.html',
          controller: 'PostsCtrl'
        });

      $urlRouterProvider.otherwise('/home');
    }
  ])
  .controller('MainCtrl', [
    '$scope',
    function($scope) {
      $scope.test = 'Home';
    }
  ])
  .controller('PostsCtrl', [
    '$scope',
    function($scope) {
      $scope.test = 'Posts';
    }
  ]);
＆＃13; 
<html>

<head>
  <title>Flapper News</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
</head>

<body ng-app="flapperNews">
  <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>Flapper News</h1>
    </div>
    {{test}}
    <a ui-sref="posts">Posts</a>
    <!-- Using ui-sref  -->
  </script>

  <script type="text/ng-template" id="/posts.html">
    <div class="page-header">
      <h1>Posts</h1>
    </div>
    {{test}}
    <a ui-sref="home">Home</a>
    <!-- Using ui-sref -->
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题