角度ui路由器从url打开的嵌套状态

Question

我尝试使用ui-router来管理单个页面应用程序上的嵌套视图。

比方说，我想创建一个公用区域和多个视图的仪表板应用程序。

主要和嵌套状态像这样处理：

$stateProvider.state('home', { 
     url: '/', 
     template: 'MY HOME PAGE' 
    }) 
    .state('login', { 
     url: '/login', 
     templateUrl: '/pages/login.html' 
    }) 
    .state('registration', { 
     url: '/registration', 
     templateUrl: '/pages/registration.html' 
    }) 
    .state('dashboard', { 
     url: '/dashboard', 
     templateUrl: '/pages/dashboard/dashboard.html' 
    }) 
    .state('dashboard.me', { 
     url: '/me', 
     templateUrl: '/pages/dashboard/me.html' 
    }) 
    .state('dashboard.messages', { 
     url: '/messages', 
     templateUrl: '/pages/dashboard/messages.html' 
    }) 
    .state('dashboard.friends', { 
     url: '/friends', 
     templateUrl: '/pages/dashboard/friends.html' 
    }); 

仪表板HTML页面如下：

<div class="container" ng-controller="dashboardCtrl" ng-init="init()"> 

<h2>DASHBOARD</h2> 
<ul> 
    <li><a ui-sref="dashboard.me">Me</a></li> 
    <li><a ui-sref="dashboard.messages">My Messages</a></li> 
    <li><a ui-sref="dashboard.friends">My Friends</a></li> 
</ul> 

<div ui-view></div> 

上述HTML还包括一个内部ui-view。

如果我使用锚点导航我的应用程序，一切正常。 顺便说一句，如果我尝试直接去为myhost /仪表板/我或为myhost /仪表板/朋友（与嵌套视图两级每一条路径）的应用程序无法正常工作。我得到一个角度（意想不到的令牌<），但我认为它不相关...

它似乎不能解决第一层的嵌套视图。 下图显示了当导航使用锚完成获得的HTML：

和网页时，从浏览器的地址链接直接调用获得的HTML：

任何想法？谢谢。

Answer 1

问题是角度不加载，因此错误。代码看起来对我来说是正确的，除非你错过了结束标签

<div class="container" ng-controller="dashboardCtrl" ng-init="init()"> 

？

Answer 2

JavaScript的状态设置：

$stateProvider.state('home', { 
     url: '/', 
     template: 'MY HOME PAGE' 
    }) 
    .state('login', { 
     url: '/login', 
     templateUrl: '/pages/login.html' 
    }) 
    .state('registration', { 
     url: '/registration', 
     templateUrl: '/pages/registration.html' 
    }) 
    .state('dashboard', { 
     url: '/dashboard', 
     abstract: true, 
     parent: 'home', 
     templateUrl: '/pages/dashboard/dashboard.html' 
    }) 
    .state('dashboard.me', { 
     url: '/me', 
     views: { 
      '@dashboard_view': { 
       templateUrl: '/pages/dashboard/me.html' 
      } 
     } 
    }) 
    .state('dashboard.messages', { 
     url: '/messages', 
     views: { 
      '@dashboard_view': { 
       templateUrl: '/pages/dashboard/messages.html' 
      } 
     } 
    }) 
    .state('dashboard.friends', { 
     url: '/friends', 
     views: { 
      '@dashboard_view': { 
       templateUrl: '/pages/dashboard/friends.html' 
      } 
     } 
    }); 

仪表盘HTML

<div class="container" ng-controller="dashboardCtrl" ng-init="init()"> 


<h2>DASHBOARD</h2> 
<ul> 
    <li><a ui-sref="dashboard.me">Me</a></li> 
    <li><a ui-sref="dashboard.messages">My Messages</a></li> 
    <li><a ui-sref="dashboard.friends">My Friends</a></li> 
</ul> 

<div ui-view="dashboard_view"></div> 

你可以得到更多的细节：

Multiple Named Views

Nested States and Nested Views