在配置中使用带有 $http 调用的 ownProvider

Question

我已经阅读了很多关于 SO 的信息，我无法在配置中调用 $http 但我可以做的是创建自己的提供程序并在配置中使用此提供程序。

但是我阅读的 none 主题展示了如何实际使用在 API 调用 config() 中收集的信息。

所以我创建的提供者是这样的：

(function () {
    'use strict';

    angular
        .module('app', [])
        .provider('translateOwnProvider', Provider);

    function Provider () {
        this.$get = function($http) {

            $http({
                url: 'http://ipinfo.io/json',
                method: 'GET'
            })
            .then(function(response) {
                var homeCountry = response.data.country;
                var homeCountryLower = homeCountry.toLowerCase();
                console.log(response.data);
            }, function(errorCall) {
                console.log("error");
            });

            return homeCountryLower;
            // ?????
        };
    };

})();

所以在第 23 行（脚本底部）我 return 值，我不知道这是否真的是一个好方法，这是我第一次尝试这个，需要你们的帮助.

下一个配置文件名为 really common app.js 我有配置

路由
设置用户语言

密码是：

(function () {
    'use strict';

    angular
        .module('app', [
            'ngRoute',
            'pascalprecht.translate'
        ])
        .config(config);

    //$inject for minify issue
    config.$inject = ['$routeProvider', '$translateProvider', 'translateOwnProvider'];

    function config ($routeProvider, $translateProvider, translateOwnProvider) {
        $routeProvider
            .when('/', {
                controller: 'mainCtrl',
                templateUrl: 'views/main.html'
            })
            .otherwise('/');

        // add translation tables
         $translateProvider.translations('en', translationsEN);
         $translateProvider.translations('de', translationsDE);
         $translateProvider.translations('pl', translationsPL);

         // preferredLanguage is gather should be gather in provider
         $translateProvider.preferredLanguage('en');

         $translateProvider.fallbackLanguage('en');
         //fallbackLanguage in case somebody hides his IP
    };


})();

在第 28 行中，我设置了一个 preferredLenguage，我希望这是一个值 returned in own provider：homeCountryLower.

目前我在控制台中没有任何错误，但这显然不起作用，页面根本没有加载，它保持空白。

Answer 1

我建议您将 api 调用用于解决此类问题。这将确保您的 app/main controller is not instantiated 直到服务调用完成。

resolve: {
    translateService: function($http, $route){
      return $http.get('http://ipinfo.io/json')
      .then(function(response){
        return response.data;
      })
    }
}

现在您可以 inject 控制器中的 translateService 并将其设置为 factory/service，您可以在整个应用程序中重复使用它，因为它本质上是单例的。

Answer 2

我得出的结论是无法在 config() 中使用从后端调用收集的信息。也许可以对 resolve 函数使用某种 hack，但我无法弄清楚。

我在 config() 中使用 window.navigator.language 而不是这个调用，所以现在我的翻译脚本不是基于用户 IP，而是基于用户浏览器语言。它不如 IP 令人满意，因为我仍然可以拥有来自波兰的用户并将浏览器设置为英语，然后我的页面将以英语显示。

我也可以编写自己的服务来为我翻译页面，但我真的很想使用 angular-翻译模块：link to module.

请注意，我使用的是 window.navigator.language 而不是 $window，因为第二个在 config() 中也无法实现。所以我的方案在测试的时候可能会出现一些问题。

我写这篇文章是为了将来会涉及到这个话题的任何人。

在配置中使用带有 $http 调用的 ownProvider

Use ownProvider with $http call inside config

provider

config

http

angularjs

angular-translate