Javascript AngularJS UI路由器-无法获取嵌套状态以显示模板_Javascript_Angularjs_Angular Ui Router_State

Javascript AngularJS UI路由器-无法获取嵌套状态以显示模板

javascript angularjs

Javascript AngularJS UI路由器-无法获取嵌套状态以显示模板,javascript,angularjs,angular-ui-router,state,Javascript,Angularjs,Angular Ui Router,State,我不知道我做错了什么，但这是我想要的首先，这是我的身体： <body> <div ng-app="testApp" ng-controller="MainController" class="container-fluid"> <div ui-view class="row"></div> </div> </body> 为此，我尝试创建一个路由层次结构。这将是我的主页模板（home

我不知道我做错了什么，但这是我想要的

首先，这是我的身体：

 <body>
    <div ng-app="testApp" ng-controller="MainController" class="container-fluid">
        <div ui-view class="row"></div>
    </div>

  </body>

为此，我尝试创建一个路由层次结构。这将是我的主页模板（home.html），一个抽象的模板，将出现在上面的

ui视图中：
<div ng-controller="HomeController">
    <header>
        <div class="row">
            <div class="col-xs-6">Test Web Application</div>
            <div class="col-xs-6">
                <p class="pull-right">Bonjour 
                  <strong>{{currentAccount.name}}</strong> ! 
                  <a href="#">Déconnexion</a></p>
            </div>
        </div>
    </header>

    <article class="row">
        <div ui-view></div>
    </article>

</div>

我的问题是，当我加载应用程序时，所有内容都是空白的，我似乎不理解这个问题
似乎我不能在plnkr中使用templateUrl，所以我直接将代码转移到模板中：
重点是父url和子url的组合。这很容易奏效
$urlRouterProvider.otherwise('//recentStudies');

检查一下
为什么?？因为子状态的url是从其祖先构建的。因此，“home”状态有urlurl:“/”，
而孩子“home.recentStudies”有url:“/recentStudies”，

所有这些加在一起意味着-完整的url是这些的联系人==='//recentStudies'

但这不是最好的办法。我们可以对孩子使用重置：

.state('home.recentStudies', {
        url: '^/recentStudies',

...
$urlRouterProvider.otherwise('/recentStudies');

然后，即使是原始的默认内容也会起作用。检查一下

检查文档：

如果希望绝对url匹配，则需要在url字符串前面加上特殊符号“^”

angular.module('testApp').config(['$stateProvider', '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/recentStudies');
    $stateProvider
        .state('home', {
            url: '/',
            abstract: true,
            templateUrl: 'partials/home.html'
        })
        .state('home.recentStudies', {
            url: '/recentStudies',
            templateUrl: 'partials/home.recentStudies.html'
        })
        .state('home.studies', {
            url: '/studies',
            templateUrl: 'partials/studies.html'
        })
    ;

}]);

$urlRouterProvider.otherwise('//recentStudies');

.state('home.recentStudies', {
        url: '^/recentStudies',

...
$urlRouterProvider.otherwise('/recentStudies');

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });