AngularJS UI-Router: preload $http data before app loads

Question

I need help from AngularJS experts that have worked with ui-router plugin. Can some provide a plunker example that works on preloading a $http data request before the app runs?

I did some research, but closest I came are these two stack overflows:

AngularJS: How to load json feed before app load?

Delaying AngularJS route change until model loaded to prevent flicker

I am less than a week into angularJS, so any help will be greatly appreciated.

Answer 1

From https://github.com/angular-ui/ui-router/wiki#resolve

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired.

The resolve property is a map object. The map object contains key/value pairs of:

• key – {string}: a name of a dependency to be injected into the controller.
• factory - {string|function}:
  • If string, then it is an alias for a service.
  • Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before the controller is instantiated and its value is injected into the controller.

Examples:

Each of the objects in resolve below must be resolved (via deferred.resolve() if they are a promise) before the controller is instantiated. Notice how each resolve object is injected as a parameter into the controller.

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

        // Example using function with simple return value.
        // Since it's 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".
            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;
        }
    },

    // 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's 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.items;
        $scope.items = promiseObj2.items;

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

        $scope.greeting = greeting;
    }
})