如何在使用ui-router resolve显示任何UI之前加载Angular-translate [英] How to load Angular-translate before any UI is displayed with ui-router resolve
本文介绍了如何在使用ui-router resolve显示任何UI之前加载Angular-translate的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将angular-translate
用于i18n.我想使用$translatePartialLoader
服务将模块化语言密钥作为延迟加载.我也想为此使用ui-router
resolve选项.
I used angular-translate
for i18n. I want to use $translatePartialLoader
service to modular language key as lazy load. Also I want to use ui-router
resolve option for this.
现在如何执行此操作?可以为我添加一个代码示例吗?
Now How to do this? Is possible add a code sample for me?
谢谢
推荐答案
我找到了解决方案并解决了我的问题.
I find solutions and solve my problem.
在配置中:
$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
中用于索引:
.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',
resolve: {
trans:['RequireTranslations',
function (RequireTranslations) {
RequireTranslations('modules/user');
}],
dep: ['trans','$ocLazyLoad',
function(trans,$ocLazyLoad){
return $ocLazyLoad.load(['UserListCtrl.js'])
}]
}
})
和run
中的
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);
}
);
};
});
,请注意,您应该像这样在所有controllers
中添加$translatePartialLoader
和trans
作为参数:
and please note you should add $translatePartialLoader
and trans
as parameter in all controllers
like this:
app.controller('UserListCtrl',function($scope,...,$translatePartialLoader,trans){
这篇关于如何在使用ui-router resolve显示任何UI之前加载Angular-translate的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文