Позвольте мне показать вам мой подход. Там - рабочий плункер
Давайте будем иметь translation.json
следующим образом:
{
"home" : "trans for home",
"parent" : "trans for parent",
"parent.child" : "trans for child"
}
Теперь давайте представим супер родительское состояние root
$stateProvider
.state('root', {
abstract: true,
template: '',
resolve: ['Translations'
, function(Translations){return Translations.loadAll();}]
});
Это супер-корневое состояние не имеет url
(не влияет на какой-либо дочерний url) . Теперь мы будем тихо вводить это в каждое состояние:
$stateProvider
.state('home', {
parent: 'root',
url: "/home",
templateUrl: 'tpl.html',
})
.state('parent', {
parent: 'root',
url: "/parent",
templateUrl: 'tpl.html',
})
Как мы видим, мы используем установку parent
- и не влияем / не расширяем исходное состояние name .
Корневое состояние загружает переводы одним выстрелом с помощью нового метода loadAll()
:
.service('Translations', ['$http'
,function($http) {
translationsService = {
data : {},
loadAll : function(){
return $http
.get("translations.json")
.then(function(response){
this.data = response.data;
return this.data;
})
},
get: function(section) {
return data[section];
}
};
return translationsService;
}])
Нам совсем не нужно $q
. Наше супер-корневое состояние просто решает, что однажды ... с помощью методов $http
и loadAll()
. Все они теперь загружены, и мы можем даже разместить эту службу в $rootScope
:
.run(['$rootScope', '$state', '$stateParams', 'Translations',
function ($rootScope, $state, $stateParams, Translations) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.Translations = Translations;
}])
И мы можем получить к ней доступ к ней:
Translation
{{Translations.get($state.current.name) | json}}
Ничего себе ... это решение, приносящее выгоду почти из каждой функции, идущей с UI-Router ... Я бы сказал. Все загружены один раз. Все унаследованы из-за $ rootScope и наследования вида ... все доступные в любом дочернем состоянии ...
Убедитесь, что все здесь .