CODEWITHSUNDEEP
angularjsnestedangular-ui-routerstate
user2678324
user2678324

Reputation:

How to use multiple named ui-views

I have the following states in config file:

var home = {
   name: 'home',
   template: '<div ui-view></div>',
   url: '/',
};

var homeSubjects = {
   name: 'home.subjects',
   url: 'Subjects',
   views: {
      '': { templateUrl: 'app/subjects/partials/subjects.html' },
      '[email protected]': {
         templateUrl: 'app/subjects/partials/subjects_intro.html',
      },
      '[email protected]': {
         templateUrl: 'app/subjects/partials/subjects_auth.html',
      }
  }
};

var homeSubjectsSubjectExams = {
   name: 'home.subjects.exams',
   url: '/Exams',
   views: {
      '': { templateUrl: 'app/exams/partials/exams.html'},
      '[email protected]': {
         templateUrl: 'app/exams/partials/exams_intro.html',
      },
      '[email protected]': {
         templateUrl: 'app/exams/partials/exams_auth.html',
      },
   }
}

In my index.html file i have the following code:

<div ui-view></div>

In subjects.html I have: 

<div id="subject">
   <div class="intro" ui-view="subjects.intro"></div>
   <div class="auth" ui-view="subjects.auth"></div>
</div>
<div ui-view></div> // <--- I want the exams.html to appear here

In my exams.html I have:

<div id="exams">
    <div class="intro" ui-view="exams.intro"></div>
    <div class="auth" ui-view="exams.auth"></div>
</div>

I want the exams.html to appear below the subject.html page. Anyone has any idea how am I supposed to go with this?

Upvotes: 1

Views: 51

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

You should be almost there. The example as is is working.

There is a plunker with that all - AS IS.

I did not change almost anyhting (just use template instead of templateUrl to make it more simple):

.state('home.subjects', {
    name: 'home.subjects',
    url: 'Subjects',
    views: {
      '': {
        templateUrl: 'app/subjects/partials/subjects.html'
      },
      '[email protected]': {
        //templateUrl: 'app/subjects/partials/subjects_intro.html',
        template: 'app/subjects/partials/subjects_intro.html',
      },
      '[email protected]': {
        //templateUrl: 'app/subjects/partials/subjects_auth.html',
        template: 'app/subjects/partials/subjects_auth.html',
      }
    }
})

.state('home.subjects.exams', {
  name: 'home.subjects.exams',
  url: '/Exams',
  views: {
    '': {
      templateUrl: 'app/exams/partials/exams.html'
    },
    '[email protected]': {
      //templateUrl: 'app/exams/partials/exams_intro.html',
      template: 'app/exams/partials/exams_intro.html',
    },
    '[email protected]': {
      //templateUrl: 'app/exams/partials/exams_auth.html',
      template: 'app/exams/partials/exams_auth.html',
    },
  }
})

And this is the result if we go to <a ui-sref="home.subjects.exams">

app/subjects/partials/subjects_intro.html
app/subjects/partials/subjects_auth.html
app/exams/partials/exams_intro.html
app/exams/partials/exams_auth.html

As we can see, the home.subjects is on page, and below is injected exams substate

Check it here

Upvotes: 1

Related Questions