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

16 浏览
0 Comments

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

我需要来自已经使用过ui-router插件的AngularJS专家的帮助。可以提供一个能够在应用程序运行之前预加载$http数据请求的plunker示例吗?\n我做了一些研究,但我找到的最接近的是这两个stackoverflow链接:\nAngularJS: How to load json feed before app load?\nDelaying AngularJS route change until model loaded to prevent flicker\n我刚刚接触AngularJS不到一周,所以非常感谢任何帮助。

0
0 Comments

问题的出现原因:AngularJS的UI-Router中,可以使用resolve来在应用加载之前提供控制器所需的内容或数据。resolve是一个可选的依赖映射,它将被注入到控制器中。如果其中的任何依赖项是promise对象,它们将在控制器实例化之前被解决,并转换为一个值。

解决方法:可以在resolve属性中定义一个依赖项的映射对象,该对象包含键/值对。其中,键是要注入到控制器中的依赖项的名称,值是一个工厂函数。工厂函数可以是一个服务的别名字符串,也可以是一个被注入的函数,其返回值将被视为依赖项。如果返回值是一个promise对象,它将在控制器实例化之前被解决,并注入到控制器中。

例如,在$stateProvider的state方法中,可以使用resolve属性来定义需要解决的依赖项。每个依赖项都必须在控制器实例化之前解决。然后,可以将每个resolve对象作为参数注入到控制器中使用。

同时,可以使用一个抽象的父状态来解决全局依赖项,其他状态作为该父状态的子状态。需要注意的是,父状态仍然需要一个包含所有子状态ui-view的ui-view。然后,在子状态的控制器中,可以像正常使用父状态的解决的依赖项一样声明依赖项。

这样,控制器将等待每个resolve对象完全解决后再进行实例化。解决后的对象将被注入到控制器中并可供使用。

完整代码如下:

$stateProvider.state('myState', {
    resolve: {
        simpleObj: function () {
            return { value: 'simple!' };
        },
        promiseObj: function ($http) {
            return $http({ method: 'GET', url: '/someUrl' });
        },
        promiseObj2: function ($http) {
            return $http({ method: 'GET', url: '/someUrl' })
               .then(function (data) {
                   return doSomeStuffFirst(data);
               });
        },
        translations: "translations",
        translations2: function (translations, $stateParams) {
            translations.getLang($stateParams.lang);
        },
        greeting: function ($q, $timeout) {
            var deferred = $q.defer();
            $timeout(function () {
                deferred.resolve('Hello!');
            }, 1000);
            return deferred.promise;
        }
    },
    controller: function ($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting) {
        $scope.simple = simpleObj.value;
        $scope.items = promiseObj.items;
        $scope.items = promiseObj2.items;
        $scope.title = translations.getLang("english").title;
        $scope.title = translations2.title;
        $scope.greeting = greeting;
    }
});

通过以上的解决方法,可以在AngularJS应用加载之前预加载$http数据,并在控制器实例化之前将其注入到控制器中使用。这样可以确保在控制器中使用的数据已经准备好了。

0