How to update only the named view using UI-Router

Question

I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.

I have not used UI-Router at all and any assistance would be greatly appreciated.

index.html

<div ui-view></div>

state-exam>exam.html

<div class="state-exam">
    <nav ui-view="exam-pagination"></nav>
    <section ui-view="exam-detail"></section>
</div>

route.js

(function() {
'use strict';

angular
.module('studentPortal')
.config(routeConfig);

function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })

  .state('exam', {
    url: '/exam/:step',
    abstract: true,
    templateUrl: 'app/state-exam/exam.html',
    controller: 'ExamController',
    controllerAs: 'examController',
  })

  .state('exam.instructions', {
    url: '/instructions',
    views: {
      'exam-pagination':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-instructions.html'
      }
    }
  })

  .state('exam.math', {
    url: '/math',
    views: {
      'exam-pagination':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });
  $urlRouterProvider.otherwise('/');
  }

})();

what you can simply do is you create navigation as a seperate directive and include it in master.html rather then having it as a ui-view — maddygoround
– maddygoround, Commented Sep 8, 2015 at 2:40
@maddygoround, thanks yeah I think I was over thinking it. That works. Thanks again. — Galactic Ranger
– Galactic Ranger, Commented Sep 8, 2015 at 4:19

Community · Accepted Answer · 2017-05-23 10:29:43Z

4

There is a working plunker

There is a similar Q & A in fact, with working plunker:

Angular UI Router - Nested States with multiple layouts

Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)

So this is the code adjustment

.state('exam', {
    url: '/exam/:step',
    abstract: true,
    // the root view and the static pagination view
    // will be defined here, so we need views : {}
    views: {
      '':{
        templateUrl: 'app/state-exam/exam.html',
        controller: 'ExamController',
        controllerAs: 'examController',
      },
      // absolute naming targets the view defined above
      'exam-pagination@exam':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
    }
  })

  .state('exam.instructions', {
    url: '/instructions',
    views: {
      // 'exam-pagination':{}, // defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-instructions.html'
      }
    }
  })

  .state('exam.math', {
    url: '/math',
    views: {
      // 'exam-pagination':{}, // defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });

Also check this to get more details about absolute view naming

The working example is here

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Sep 8, 2015 at 4:40

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

4 Comments

Radim Köhler Over a year ago

Well, maybe here is the reason why, explained even better How do I prevent reload on named view, when state changes? AngularJS UI-Router

Galactic Ranger Over a year ago

Radim, Is the the first object inside of views supposed to be ' ' empty? I moved <nav ui-view="exam-pagination"></nav> to the parent but when I use 'exam-pagination@exam' like in your example the pagination does not load. If I remove the @exam it loads

Radim Köhler Over a year ago

Well, the exam.html is injected into index.html ui-view="" (unnamed). It contains targets for child state ui-view="exam-detail" and also for sister view ui-view="exam-pagination". Because this target is filled by this (exam) state, we need to use absolute naming... so the second view must be 'exam-pagination@exam' - to target view name exam-pagination inside of the stat exam === exam-pagination@exam. Does it help?

Radim Köhler Over a year ago

There is a link to working plunker plnkr.co/edit/aR3cdYrDEY7FJvhLPRCj?p=preview, hope that could help to see that in action

Collectives™ on Stack Overflow

How to update only the named view using UI-Router

1 Answer 1

Angular UI Router - Nested States with multiple layouts

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related