AngularJS UI-路由器 : preload $http data before app loads

Question

我需要使用 ui-router 插件的 AngularJS 专家的帮助。有人可以提供一个在应用程序运行之前预加载 $http 数据请求的 plunker 示例吗？

我做了一些研究，但最接近的是这两个堆栈溢出:

AngularJS: How to load json feed before app load?

Delaying AngularJS route change until model loaded to prevent flicker

我进入 angularJS 还不到一周，所以任何帮助都将不胜感激。

Answer 1

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

您可以使用 resolve为您的 Controller 提供该州自定义的内容或数据。 resolve是一个可选的依赖关系映射，应该注入(inject)到 Controller 中。

如果这些依赖项中的任何一个是 promise ，它们将被解析并转换为值 之前 Controller 被实例化并触发 $routeChangeSuccess 事件。
resolve属性是一个 map 对象。 map 对象包含以下键/值对:

key - {string}:要注入(inject) Controller 的依赖项的名称。

工厂 - {字符串|函数}:

如果是字符串，那么它是服务的别名。

否则如果是函数，则将其注入(inject)并将返回值视为依赖项。如果结果是一个promise，它会在 Controller 被实例化之前被解析，并且它的值被注入(inject)到 Controller 中。

示例:
resolve 中的每个对象在实例化 Controller 之前，必须解决以下问题(通过 deferred.resolve() 如果它们是 promise )。注意每个 resolve对象作为参数注入(inject)到 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;
    }
})