Question

这是我第一次在AngularJS项目中使用UI Router。我有一个问题，当我点击链接查看帖子时，它不会显示。

帖子模板没有显示，我仍然在主页上。我可以看到网址像http://localhost:8000/#/posts/1一样闪烁并尝试更改，但是会返回http://localhost:8000/#/home。

Plunker：http://plnkr.co/edit/KV6lwzKUHrIZgVWVdrzt

我在这里缺少什么？

注1：我已阅读UI Router documentation，我认为我没有遗漏任何内容。

注意2：我跟随this tutorial（thinkster）。

注3：我使用SimpleHTTPServer python -m SimpleHTTPServer 8000命令来提供此项目。

这是我的 app.js ：

app.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');

}]);

...

app.controller("PostsCtrl", ["$scope", "$stateParams", "postsFactory", function($scope, $stateParams, postsFactory){

    // grab the right post from postsFactory posts array
    $scope.post = postsFactory.posts[$stateParams.id];
    console.log($scope.post);
}]);

这是我的 index.html ：

<ui-view></ui-view> 

...

<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>
</script>

Answer 1

代码中的问题出现在posts状态的路由器配置中。它应该如下。网址应为/posts/:id，而不是posts/:id。

 $stateProvider
        .state('posts', {
            url: '/posts/:id',
            templateUrl: '/posts.html',
            controller: 'PostsCtrl'
        });

Answer 2

您在/州网址的开头基本上缺少posts斜线，因为缺少/，它被重定向到.otherwise $urlRouterProvider规则}

<强>代码

.state('posts', {
    url: '/posts/:id',
    templateUrl: '/posts.html',
    controller: 'PostsCtrl'
});

Answer 3

您还需要在$locationProvider.html5Mode(true);块中添加app.config，并在HTML文件的head部分添加<'base href="/"'>。

否则，#/posts/:id路由将无效。

AngularJS：UI路由器不加载内联模板和控制器

3 个答案: