Javascript AngularJS:UI路由器不'；t加载内联模板和控制器

这是我第一次使用内部AngularJS项目。我有一个问题，当我点击一个链接来查看一篇文章时，它没有显示出来

帖子模板没有显示，我仍然在主页上。我可以看到URL像

http://localhost:8000/#/posts/1

并尝试更改，但返回到

http://localhost:8000/#/home

普朗克：

我错过了什么

注1：我已经读过了，我想我没有遗漏任何东西

注2：我关注（thinkster）

注3：我正在使用SimpleHTTPServer

python-msimplehttpserver 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);
}]);

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

这是我的index.html：

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);
}]);

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

...
{{post.title}
您基本上缺少
/
文章开头的斜杠
状态URL，因为
/
缺失，它被重定向到
。否则
$urlRouterProvider的规则

代码

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

您的
/
帖子开始时基本上缺少了
/
斜杠
状态URL，因为
/
丢失，它被重定向到
。否则
$urlRouterProvider的规则

代码

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

代码中的问题在路由器配置中，用于
posts
状态。它应该像下面这样。URL应该是
/posts/:id
而不是
posts/:id

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

代码中的问题在路由器配置中，用于
posts
状态。它应该像下面这样。URL应该是
/posts/:id
而不是
posts/:id

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

您还需要添加
$locationProvider.html5Mode（true）在
app.config
块中，以及HTML文件头部的

否则，
#/posts/:id
路由将无法工作。
您还需要添加
$locationProvider.html5Mode（true）在
app.config
块中，以及HTML文件头部的

否则，
#/posts/:id
路由将无法工作。
请注意，当路由器设置为响应/posts/:id时，您正在链接到
#posts/:id
。请注意，当路由器设置为响应/posts/:id时，您正在链接到
#posts/:id
。