AngularJS UI-Router:在加载应用程序之前预加载$ http数据

Question

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

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

AngularJS:如何在app加载之前加载json feed？

延迟AngularJS路由更改,直到加载模型以防止闪烁

我不到一个星期就进入angularJS,所以任何帮助都将不胜感激.

Answer 1

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

您可以使用resolve向控制器提供自定义状态的内容或数据.resolve是一个可选的依赖关系图,应该注入控制器.

如果这些依赖项中的任何一个是promise,它们将在实例化控制器并触发$ routeChangeSuccess事件之前被解析并转换为值.

该resolve属性是一个地图对象.map对象包含键/值对:

• key - {string}:要注入控制器的依赖项的名称.
• factory - {string | function}:
  • 如果是string,那么它是服务的别名.
  • 否则,如果是函数,则将其注入,并将返回值视为依赖项.如果结果是promise,则在实例化控制器并将其值注入控制器之前解析.

例子:

在实例化控制器之前,resolve必须解析下面的每个对象(通过deferred.resolve()它们是一个承诺).注意每个resolve对象如何作为参数注入控制器.

$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;
    }
})