ui路由器多个命名视图无效

Question

我在使用ui路由器时无法加载视图这里是我的代码示例 - 我的路由器文件的代码 -

angular.module('loginApp').config(['$stateProvider', '$urlRouterProvider', 'USER_ROLES',
  function($stateProvider, $urlRouterProvider, USER_ROLES) {
    // For any unmatched url, redirect to /
    $urlRouterProvider.otherwise("/");
    // Now set up the states
    $stateProvider.state('home', {
      url: "/",
      views: {
        'nav': {
          templateUrl: 'templates/parts/nav.html'
        },
        'main': {
          templateUrl: 'templates/home.html'
        }
      },
      data: {}
    });
  }
]);

html视图代码 -

<div layout="column">
  <div ui-view="nav"></div>
  <div class="container">
    <div ng-if="currentUser"><b>Welcome</div>
    <div ui-view="main"></div>
  </div>
</div>