CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
sameedhayat
sameedhayat

Reputation: 61

Nested View within Multiple views using ui router angularjs

I have multiple views on one page and within one view I have nested view.How should I configure this in app.js.Given below is my code which is not working.
This is my index.html file

<body ng-app="configuratorApp" >
    <div ui-view="view1"></div>
    <div  ui-view="view2"></div>
</body>

This is my view1.html file

<div ui-view> </div>
<button  type="button" ui-sref="view1.child1"></button>
<button  type="button" ui-sref="view1.child2"></button>

This is my view1-child1.html file

<h1>Child1<h1>

This is my view1-child2.html file

<h1>Child2<h1>

This is my view2.html file

<h1>Hello World</h1>

This is my app.js file

.state('home',{
    url: '/',
    views: {
        '': {
            templateUrl: 'index.html'
        },
        'view1@home': {
            templateUrl: 'view1.html' 
        },'view2@home': {
            templateUrl: 'view2.html' 
        }
      }
})
.state('view1.child1', {
        url: '/child1',
        templateUrl: 'view1-child1.html'
    })
.state('view1.child2', {
        url: '/child2',
        templateUrl: 'view1-child2.html'
    })

Upvotes: 0

Views: 34

Answers (1)

CozyAzure
CozyAzure

Reputation: 8478

You confused the views with the states.

There is no view1.child1 state, reason being you do not have a view1 as a parent state (unless the code you posted above is incomplete). The name should be home.child instead.

.state('home.child1', { //this should be home.child1 instead of view1.child1
  url: '/child1',
  templateUrl: 'view1-child1.html'
})
.state('home.child2', {
  url: '/child2',
  templateUrl: 'view1-child2.html'
})

Also bear in mind that you will need a root template (or unnamed root template) in your index.html, else your homestate cannot be populated.

So in your index.html, you need to have this:

<body ng-app="configuratorApp">
   <div ui-view></div> <!--this is the root template, to let Home state 'live' here-->
</body>

Here is the working plnkr

P.s. if the plnkr is not working just refresh it. sometimes it has problem fetching the htmls

Upvotes: 0

Related Questions