CODEWITHSUNDEEP
angular-ui-router
uksz
uksz

Reputation: 18699

Angular UI Router: Dedicated UI-View

I am wondering if it is possible to have two ui-views one one site: both are child of the parent state. I want first ui-view to be dedicated to the first child, and second to the second one. Any ideas?

Upvotes: 1

Views: 25

Answers (1)

Andy
Andy

Reputation: 8908

I'm not sure I entirely understand the question, but ui-views can be nested in any way to form a tree structure. This is done using the dot notation for states.

state1.state2
state1.state3

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

If you want to keep two views within the same state, you can use the ui-view name attribute to handle that. The linked page explains how toward the bottom.

From the linked page:

Really though, you'll use views to set up multiple views:

<div ui-view></div>
<div ui-view="chart"></div> 
<div ui-view="data"></div>

And the JS:

$stateProvider.state("home", {
  views: {
    "": {
      template: "<h1>HELLO!</h1>"
    },
    "chart": {
      template: "<chart_thing/>"
    },
    "data": {
      template: "<data_thing/>"
    }
  }    
})

It's also worth mentioning that each view object here can have its own controller.

Information from comment stream:

The answer is no, there's no way to have two ui-views for separate sub-states. You would have to create one ui-view with two separate states under it, which would still only allow one to be shown at a time. I really think you're looking for two views in the same state, but without an example all I can do is guess.

Upvotes: 1

Related Questions