嵌套视图入门

Question

我完全失去了我如何设置嵌套视图的错误。我做错了什么???

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('main', {
      url: '/',
      template: '<div><h1>Hello World</h1><div ui-view></div></div>',
      controller: 'MainCtrl'
    })
    .state('main.test', {
      template: '<div><h2>I\'m here!</h2></div>',
      url: '/here'
    });
});

我会前往/并向我显示“Hello World”，然后我转到/here并向我显示一个空白页面。我不确定我做错了什么......

Answer 1

您需要省略前面的/ in url：

.state('main.test', {
  template: '<div><h2>I\'m here!</h2></div>',
  url: 'here'
 });

调试

点击此锚时，ui-router导航到此位置：http://localhost:8000//here

 <a ui-sref="main.test">test</a>

在您的应用程序中，您可以轻松查看州的网址

app.run(function($state){
   var href = $state.href('main.test');
   console.log(href); # '//here'   
});

请务必将服务器设置为支持html5mode

$location documantation

  

服务器端

     

使用此模式需要在服务器端重写URL，基本上您必须重写所有链接到您的入口点   应用程序（例如index.html）