Named Views

<ui-view></ui-view>
$stateProvider.state('home', {
    template: "<h1>Home page<h1>"
});

// OR ( not useful if have single view)

$stateProvider.state('home', {
    views: {
        "": {
            template: "<h1>Home page<h1>"
        }
    }
});

Multiple Named Views

<div ui-view></div>
<div ui-view="tab"></div>
<div ui-view="accordian"></div>
$stateProvider.state('home', {
    views: {
        "": {
            template: "<h1>Home page<h1>"
        },
        "tab": {
            template: "<h1>Tab<h1>"
        },
        "accordian": {
            template: "<h1>Accordian<h1>"
        }
    }
});

Last updated

Was this helpful?