angular-ui-router
  • Introduction
  • Configuring State
  • Activating State
  • Named Views
  • Nested State
  • onEnter onExit
  • Passing Data
  • Resolve Property
  • State Params
  • State Service
  • State Events
  • Abstract State
Powered by GitBook
On this page

Was this helpful?

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>"
        }
    }
});
PreviousActivating StateNextNested State

Last updated 5 years ago

Was this helpful?