默认为 Angular UI-路由器嵌套视图

Question

当我导航到加载主模板的父状态配置文件时，我试图默认打开状态 'profile.general'。

当导航到 /profile url 时，如何激活 ui-view 的嵌套状态？

$urlRouterProvider.otherwise("/profile/general");

$stateProvider.state('profile', {
    url: '/profile',
    abtract: true,
    views: {
        "main": {
            controller: 'ProfileCtrl',
            templateUrl: 'src/app/profile/index.tpl.html'
        }
    }
}).state('profile.general', {
    //url: '/register/details',
    templateUrl: 'src/app/profile/profile-general.html'
    //controller: 'ProfileCtrl'
}).state('profile.security', {
    //url: '/register/details',
    templateUrl: 'src/app/profile/profile-security.html'
}).state('profile.social', {
    //url: '/register/details',
    templateUrl: 'src/app/profile/profile-social.html'
}).state('profile.privacy', {
    //url: '/register/details',
    templateUrl: 'src/app/profile/profile-privacy.html'
}).state('profile.payments', {
    //url: '/register/details',
    templateUrl: 'src/app/profile/profile-payments.html'
}).state('profile.restrictions', {
    //url: '/register/details',
    templateUrl: 'src/app/profile/profile-restrictions.html'
});
})

HTML

<div id="profile-views" ui-view></div>

Answer 1

有a working plunker

这些行应该有所帮助：

$urlRouterProvider.when("/profile", "/profile/general");
$urlRouterProvider.otherwise("/profile/general");

而我们应该给一般子状态url：

.state('profile.general', {
    //url: '/register/details',
    url: '/general',
    templateUrl: 'src/app/profile/profile-general.html'

因此，有了这些，我们就有了 .when 重定向...只要用户只针对抽象状态 - 就会重定向到选定的 url.

此外，因为我们为 child 引入了 url，我们可以使用 .otherwise 作为整体默认状态。

另一种方法是省略一个 child （正好是一个 child） 的 url：

How to: Set up a default/index child state

检查一下here

默认为 Angular UI-路由器嵌套视图

Defaulting to Angular UI-Router Nested View

angularjs

angularjs-routing

angular-ui-router