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

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

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

AngularJS: How to load json feed before app load?

Delaying AngularJS route change until model loaded to prevent flicker

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

解决方法

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

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

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

resolve属性是一个map对象. map对象包含键/值对：

> key – {string}：要注入控制器的依赖项的名称.
> factory – {string | function}：

>如果是string,则它是服务的别名.
>否则,如果是函数,则将其注入,并将返回值视为依赖项.如果结果是promise,则在实例化控制器并将其值注入控制器之前解析.

例子：

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

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