Question

我需要使用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，所以任何帮助都将不胜感激。

Answer 1

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

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

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

resolve属性是一个地图对象。 map对象包含键/值对：

key - {string}：要注入控制器的依赖项的名称。
factory - {string | function}：
- 如果是字符串，则它是服务的别名。
- 否则，如果是函数，则将其注入，并将返回值视为依赖项。如果结果是一个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;
    }
})

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

1 个答案: