AngularJS：UI路由器不加載內聯模板和控制器

這是我第一次在AngularJS項目中使用UI Router。當我點擊鏈接查看帖子時，我遇到了問題，但沒有顯示。AngularJS：UI路由器不加載內聯模板和控制器

帖子模板未顯示，我仍在主頁上。我可以看到網址閃爍，如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>

來源

2016-01-10 Zulhilmi Zainudin

請注意，您正在鏈接到'＃posts /：id'，而路由器設置爲響應/ posts /：id。 –

在你的代碼的問題是在你的路由器配置爲posts狀態。它應該如下所示。網址應該是/posts/:id而不是posts/:id。

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

來源

2016-01-10 15:16:38 Arkantos

你基本上缺少/斜槓你posts狀態的開始網址，因爲/缺少它重定向到.otherwise規則$urlRouterProvider

代碼

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

來源

2016-01-10 15:16:30

您還需要在HTML文件的頭部添加在app.config塊$locationProvider.html5Mode(true);和<'base href="/"'>。

否則，#/posts/:id路由將不起作用。

來源

2016-01-10 15:26:13

AngularJS：UI路由器不加載內聯模板和控制器

回答

相關問題