加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 如何在使用ui-router解析显示任何UI之前加载Angula

发布时间:2020-12-17 07:49:35 所属栏目:安全 来源:网络整理
导读:我使用角度翻译为i18n.我想将$translatePartialLoader服务用于模块化语言密钥作为延迟加载.另外我想为此使用ui-router resolve选项. 现在怎么做?可以为我添加代码示例吗? 谢谢 我找到解决方案并解决我的问题. 在配置中: $translatePartialLoaderProvider.
我使用角度翻译为i18n.我想将$translatePartialLoader服务用于模块化语言密钥作为延迟加载.另外我想为此使用ui-router resolve选项.

现在怎么做?可以为我添加代码示例吗?

谢谢

我找到解决方案并解决我的问题.

在配置中:

$translatePartialLoaderProvider.addPart('index');
        $translateProvider
            .useSanitizeValueStrategy(null)
            .fallbackLanguage('en-us')
            .registerAvailableLanguageKeys(['en-us','pt-br'],{
                'en_*': 'en-us','pt_*': 'pt-br'
            })
            .useLoader('$translatePartialLoader',{
                urlTemplate: '{part}/locale_{lang}.json'
            })
            .useLoaderCache(true)
            .useCookieStorage()
            .determinePreferredLanguage();

在ui-router for index中:

.state('index',{
    url: '/index',templateUrl: 'index.html',controller:'IndexCtrl',resolve: {
        trans:['RequireTranslations',function (RequireTranslations) {
                RequireTranslations('index');
            }],dep: ['trans','$ocLazyLoad',function(trans,$ocLazyLoad){
                return $ocLazyLoad.load(['plugin']).then(
                    function(){
                        return $ocLazyLoad.load(['IndexCtrl.js']);
                    }
                );
            }]
    }
})
.state('index.users',{
    url: "/users",templateUrl: "users.html",controller:'UserListCtrl',function (RequireTranslations) {
                RequireTranslations('modules/user');
            }],$ocLazyLoad){
                return $ocLazyLoad.load(['UserListCtrl.js'])
            }]

    }
})

并在运行中:

app.run(function($rootScope,$translate) {

    // translate refresh is necessary to load translate table
    $rootScope.$on('$translatePartialLoaderStructureChanged',function () {
        $translate.refresh();
    });

    $rootScope.$on('$translateChangeEnd',function() {
        // get current language
        $rootScope.currentLanguage = $translate.use();
    });
})

在RequireTranslations工厂中:

app.factory('RequireTranslations',function($translatePartialLoader,$translate,$rootScope) {
    return function() {
        angular.forEach(arguments,function(translationKey) {
            $translatePartialLoader.addPart(translationKey);
        });
        return $translate.refresh().then(
            function(){
                return $translate.use($rootScope.currentLanguage);
            }
        );
    };
});

请注意你应该在所有控制器中添加$translatePartialLoader和trans作为参数,如下所示:

app.controller('UserListCtrl',function($scope,...,$translatePartialLoader,trans){

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读