Adding resolve to Angular ui-router nested views?

Question

I am trying to create a version on my Angular 1.4.12 app with nested views. The reason is that some sections of my app have a header/content/footer setup and some do not.

My index page has a single ui-view.

  <div ui-view class="top-view"></div>

Into that, via ui-router, I load routes that have multiple views; most of the time, it's a header/content/footer, such as home.html:

<div ui-view="header" class="header"></div>
<div ui-view="content" class="site-content"></div>
<div ui-view="footer" class="footer"></div>

Using a route such as:

  angular.module('app').config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider.state('home', {
      url: '/home',
      views: {
        '': {
          templateUrl: 'modules/home/home.html'
        },
        'header@home': {
          templateUrl: 'modules/header/header.html'
        },
        'content@home': {
          controller: 'HomeController as hc',
          templateUrl: 'modules/home/home.content.html'
        },
        'footer@home': {
          templateUrl: 'modules/footer/footer.html'
        }
      }
    });
  });

There are links on the content html and the header html with swaps the 3 views for another stub page like home.html above with 1, 2, or all 3 subviews (header, content, and/or footer).

Not sure if this is the best way to do this, but it's working so far.

My roadblock now is trying to use resolves for the routes. For example, let's say the HomeController needs data from a service. In other apps, I'd use a resolve, such as:

    resolve: {
      PeopleResolve: function (MockDataFactory) {
        return MockDataFactory.query({filename: 'ds_users'});
      }
    },

However, when I try adding this to the routes.js file as shown above, the page does not load (no console errors, which is confusing, just a blank page).

    $stateProvider.state('home', {
      url: '/home',
      resolve: {
        PeopleResolve: function (MockDataFactory) {
          return MockDataFactory.query({ filename: 'ds_users' });
        }
      },
      views: {
        '': {
          templateUrl: 'modules/home/home.html'
        },
        'header@home': {
          templateUrl: 'modules/header/header.html'
        },
        'content@home': {
          controller: 'HomeController as hc',
          templateUrl: 'modules/home/home.content.html'
        },
        'footer@home': {
          templateUrl: 'modules/footer/footer.html'
        }
      }
    });

Is there something obvious I am missing here?

UPDATE 1:

Based on a comment I added this to my app.module, found here after a search:

angular.module('app', ['ui.router']).run(function ($state, $rootScope) {
$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
  event.preventDefault();
  console.log(error);
});

});

try adding a state change error handler in a run block and inspect the error object. Does the MockDataFactory.query() method work elsewhere? — charlietfl
– charlietfl, Commented Jan 1, 2017 at 17:36
See my update. I added a run block but not sure how to get the error anywhere I can view it. This factory works in other projects. — Steve
– Steve, Commented Jan 1, 2017 at 17:58
Also assuming that query() is part of $resource could try returning the $resource promise. A plunker demo that reproduces problem would help — charlietfl
– charlietfl, Commented Jan 1, 2017 at 18:02
The error is Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- MockDataFactory I guess I haven't loaded angular resource in this app? — Steve
– Steve, Commented Jan 1, 2017 at 18:09

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

SOLUTION:

The error (thanks charlietfl) tipped me off to the fact I never injected the ngResource module, even though I linked to the angular-resource.js in my index.html.

The factory in my promise was the first use in this app of $resource, and using it broke the app -- surprisingly with no console errors until I added the run block.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 1, 2017 at 18:29

Steve

15k39 gold badges140 silver badges247 bronze badges

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

Collectives™ on Stack Overflow

Adding resolve to Angular ui-router nested views?

UPDATE 1:

1 Answer 1

SOLUTION:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE 1:

1 Answer 1

SOLUTION:

Comments

Your Answer

Sign up or log in

Post as a guest

Related