angularjs - Localize URL's with ui-router and angular-translate -
angularjs - Localize URL's with ui-router and angular-translate -
i using ui-router routing , angular-translate translations. accomplish having selected language bind url so:
www.mydomain.com/en/ www.mydomain.com/ru/ www.mydomain.com/en/about www.mydomain.com/ru/about
and respond accordingly.
tried examples, did not find anything. if implemented similar solution, love hear how did it.
thanks
i utilize along these lines:
coffeescript
angular.module('app') .config([ '$stateprovider' ($stateprovider) -> $stateprovider.state 'app', abstract: true url: '/{locale}' $stateprovider.state 'app.root', url: '' $stateprovider.state 'app.root.about', url: '/about' ])
javascript
angular.module('app').config([ '$stateprovider', function($stateprovider) { $stateprovider.state('app', { abstract: true, url: '/{locale}' }); $stateprovider.state('app.root', { url: '' }); homecoming $stateprovider.state('app.root.about', { url: '/about' }); } ]);
with this, can inject $stateparams
controller , access locale there:
coffeescript
angular.module('app') .controller('appctrl', [ '$scope', '$stateparams' ($scope, $stateparams) -> $scope.locale = $stateparams.locale ])
javascript
angular.module('app').controller('appctrl', [ '$scope', '$stateparams', function($scope, $stateparams) { homecoming $scope.locale = $stateparams.locale; } ]);
or, if want impact whole page automatically, utilize $statechangestart
event in application controller or similar:
coffeescript
$scope.$on '$statechangestart', (event, tostate, toparams, fromstate, fromparams) -> $translate.use(toparams.locale)
javascript
$scope.$on('$statechangestart', function(event, tostate, toparams, fromstate, fromparams) { $translate.use(toparams.locale); });
note if you're using angular-translate v1.x should utilize $translate.uses
instead of $translate.use
.
angularjs angular-ui-router angular-translate
Comments
Post a Comment