1

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?

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments