Angular Run Block - Use the $ stateProvider UI Router to Resolve the Promise

Question

UI-Routerdifferent from Angular ngRoute. It supports everything that ordinary can do ngRoute, as well as many additional features.

I am changing the application Angularfrom ngRouteto UI-Router. But I can’t understand how to programmatically introduce a resolvefunction - part of the code that I use outside of Controllerand config.

So, with the standard, Angular ngRouteI can dynamically embed mine resolve promisein the execution block Angular:

app.run(function ($route) {
  var route = $route.routes['/'];
  route.resolve = route.resolve || {};
  route.resolve.getData = function(myService){return myService.getSomeData();};
});

Now, how can I smooth out the solution of the promise in a similar way with UI-Router? I tried to skip $stateProviderto access state, but it was unsuccessful for me.

angular.module('uiRouterSample').run(
  [          '$rootScope', '$state', '$stateProvider'
    function ($rootScope,   $state, $stateProvider) {

      //$stateProvider would fail

Answer 1

resolve, . , .

. ui.router .:

angular.module('myApp', ['ui.router']);

, . shoppingList, , .

angular.module('myApp.shoppingList').config(function ($stateProvider) {

    $stateProvider.state('app.shoppingList', {
        url: '/shopping-list',
        templateUrl: 'shopping-list.html',
        controller: 'ShoppingListController',
        resolve: {
            shoppingLists: function (ShoppingListService) {
                return ShoppingListService.getAll();
            }
        }
    });

});

. shoppingLists. , .

angular.module('myApp.shoppingList').controller('ShoppingListController', function ($scope, shoppingLists) {
    $scope.shoppingLists = shoppingLists;
});

Angular -UI Wiki, .

Answer 2

:

Resolve

, , . - , .

- promises, $stateChangeSuccess.

- . /:

• key - {string}: , .
• factory - {string | function}:
  • , .
  • , , , . , , , .

:

, , ( deferred.resolve(), ) . , .

$stateProvider.state('myState', {
  resolve:{

     // Example using function with simple return value.
     // Since it not a promise, it resolves immediately.
     simpleObj:  function(){
        return {value: 'simple!'};
     },

     // Example using function with returned promise.
     // This is the typical use case of resolve.
     // You need to inject any services that you are
     // using, e.g. $http in this example
     promiseObj:  function($http){
        // $http returns a promise for the url data
        return $http({method: 'GET', url: '/someUrl'});
     },

     // Another promise example. If you need to do some 
     // processing of the result, use .then, and your 
     // promise is chained in for free. This is another
     // typical use case of resolve.
     promiseObj2:  function($http){
        return $http({method: 'GET', url: '/someUrl'})
           .then (function (data) {
               return doSomeStuffFirst(data);
           });
     },        

     // Example using a service by name as string.
     // This would look for a 'translations' service
     // within the module and return it.
     // Note: The service could return a promise and
     // it would work just like the example above
     translations: "translations",

     // Example showing injection of service into
     // resolve function. Service then returns a
     // promise. Tip: Inject $stateParams to get
     // access to url parameters.
     translations2: function(translations, $stateParams){
         // Assume that getLang is a service method
         // that uses $http to fetch some translations.
         // Also assume our url was "/:lang/home".
         return translations.getLang($stateParams.lang);
     },

     // Example showing returning of custom made promise
     greeting: function($q, $timeout){
         var deferred = $q.defer();
         $timeout(function() {
             deferred.resolve('Hello!');
         }, 1000);
         return deferred.promise;
     }
  },

resolve

  // The controller waits for every one of the above items to be
  // completely resolved before instantiation. For example, the
  // controller will not instantiate until promiseObj promise has 
  // been resolved. Then those objects are injected into the controller
  // and available for use.  
  controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){
      $scope.simple = simpleObj.value;

      // You can be sure that promiseObj is ready to use!
      $scope.items = promiseObj.data.items;
      $scope.items = promiseObj2.items;

      $scope.title = translations.getLang("english").title;
      $scope.title = translations2.title;

      $scope.greeting = greeting;
  }
})

Answer 3

$stateProvider run, , ( , , ), resolve ?

Answer 4

resolve :

$stateProvider
.state('root', {
    abstract: true,
    resolve: {
        common: ...
    },
})
.state('some', {
    parent: 'root',
    ...
});

, .

$route UI Router, . state, , .

$state.get('stateName'), , . - , JS, , resolve, . $state.get('stateName').resolve, .

state resolve , .

angular.module('ui.router.hacked', ['ui.router'])
.config(function ($stateProvider) {
  var stateOriginal = $stateProvider.state;
  $stateProvider.state = function (name, config) {
    config.resolve = config.resolve || {};
    return stateOriginal.apply(this, arguments);
  }
})

angular.module('app', ['ui.router.hacked']).run(function ($state) {
  var state = $state.get('some');
  state.resolve.someResolver = ...;
});

Like any other hack, it can have traps and, as a rule, break. Although this method is very simple and simple, it requires additional unit testing and should not be used if conventional methods can be used instead.