javascript - 嵌套 View 入门

Question

我完全不知道我设置嵌套 View 的方式有什么问题。我做错了什么？？？

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

url中需要省略前面的/:

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

调试

单击此 anchor 时，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'   
});

请务必将服务器设置为支持html5模式

$location documantation

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)