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, Sep 08 '15 at 02:40
@maddygoround, thanks yeah I think I was over thinking it. That works. Thanks again. — Galactic Ranger, Sep 08 '15 at 04:19

score 4 · Accepted Answer · edited May 23 '17 at 10:29

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

Well, maybe here is the reason why, explained even better [How do I prevent reload on named view, when state changes? AngularJS UI-Router](http://stackoverflow.com/q/23568908/1679310) — Radim Köhler, Sep 08 '15 at 04:49
Radim, Is the the first object inside of views supposed to be ' ' empty? I moved
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 — Galactic Ranger, Sep 08 '15 at 06:17
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, Sep 08 '15 at 06:22
There is a link to working plunker http://plnkr.co/edit/aR3cdYrDEY7FJvhLPRCj?p=preview, hope that could help to see that in action — Radim Köhler, Sep 08 '15 at 06:27

How to update only the named view using UI-Router

1 Answers1

Angular UI Router - Nested States with multiple layouts

Linked