Angular ui-router dynamically adds a resolution function to all states

Question

I am trying to add a resolver function for each state in my application in order to wait for the application loading process to complete. I already have the following code:

angular.forEach($state.get(), function(state) {
  state.resolve = state.resolve || {};
  state.resolve.session = function() {
    return SessionResolver.handle(state);
  }
});

SessionResolver is a service in which a function handle(state)returns a promise that is resolved after the download process completes.

This works fine if no state is defined without an existing object resolve. For example, the following state will be blocked until the promise SessionResolver.handle is defined:

$stateProvider.state('dashboard', {
  url: "/",
  templateUrl: "dashboard.html",
  controller: "DashboardCtrl",
  resolve: {}
});

But if the permission object is not set, the state is not blocked:

$stateProvider.state('dashboard', {
  url: "/",
  templateUrl: "dashboard.html",
  controller: "DashboardCtrl",
});

resolve , SessionResolver.handle , .

, , ?

Answer 1

:

angular.module('sample', ['ui.router']).config(function($stateProvider) {
   var $delegate = $stateProvider.state;

   $stateProvider.state = function(name, definition) {
      definition.resolve = angular.extend({}, definition.resolve, {
         myCustomResolve: function() { return true; }
      });

      return $delegate.apply(this, arguments);
   };
   $stateProvider.state('example', { url: 'example/' });

}).run(function($state) { console.log('have resolve?', $state.get('example')); });

Answer 2

, , . , , . , "" , .

$stateProvider.state('parent', {
  abstract: true,
  template: '',
  resolve: {
    session: function() {
      return SessionResolver.handle(state);
    }
  }
}).state('parent.child1', {
  url: '/',
  template: 'dashboard.html',
  controller: 'DashboardController'
});

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states.