I have an application built with Angularjs using Angularjs Translate library - https://angular-translate.github.io/, and I have set it up with UI router because the current website has already been indexed by google with language versions like www.domain.com/en/us/ and I need to keep the same URL structure. The website has over 30 languages but it is a SPA (Single Page Application).
Below is my Javascript for the app configuration:
app.run(['$rootScope', '$translate', '$state', function ($rootScope, $translate, $state) {
$rootScope.onChangeValue = function (e) {
$rootScope.$broadcast("changeValue", e);
};
$rootScope.$on('$stateChangeSuccess', onStateChangeSuccess);
function onStateChangeSuccess(event, toState, toParams) {
var current = $translate.use();
if (!current || current !== toParams.lang)
$translate.use(toParams.lang);
}
}]);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: '../languages/locale-',
suffix: '.json'
});
$translateProvider.fallbackLanguage('en');
$translateProvider.preferredLanguage('en');
$translateProvider.useSanitizeValueStrategy('escape');
$translateProvider.useCookieStorage();
}]);
app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
$stateProvider.state('catalog', {
url: '/{lang}',
controller: "SudokuController",
params: {
lang: {
value: function ($translate) {
return $translate.use();
}
}
}
});
}]);
and in the controller I have these functions:
app.controller("SudokuController", ['$scope', 'Chronicle', '$timeout', '$cookies', '$translate', '$state', '$stateParams', function ($scope, Chronicle, $timeout, $cookies, $translate, $state, $stateParams) {
$scope.params = $stateParams;
$scope.changeLanguage = function (newLang) {
var params = angular.extend($stateParams, { lang: newLang });
$translate.use(newLang).then(function () {
$state.transitionTo($state.current, params, {
reload: true, inherit: false, notify: true
});
});
}
}]);
Here is the HTML that is generating the nav with multiple languages:
<div class="language-dropdown">
<ul class="country-list" ng-controller="navigationLanguages">
<li class="country" ng-repeat="language in languagesMenu">
<div class="country-flag" style="background-image: url('images/mk.png');"></div>
<a ng-bind="language.Language" ng-click="changeLanguage(language.Code)"></a>
</li>
</ul>
</div>
So far I have achieved to add to the URL the chosen language, for instance, if I click on English I get www.domain.com/en, if I click on Spanish I get www.domain.com/es. But when I go directly to the www.domain.com/en I get Error 404 - Object not found!
How can I make so when the URL is inserted along with the language after the / to access the website with that particular language instead of showing Error 404.
How to make the languages states like www.domain.com/en/us instead of www.domain.com/en (so it goes first the language code and then the country code)?
Is it possible for these URLs/ languages to be crawlable by Google?
"/" so if you refresh your page on any route that isn't the root it won't serve anything up and you'll get not found. Basically for single page apps the routing should be handled completely client side because that is the piece that has the context about your app to know what to do. So always have your server serve up the index page no matter which route, that will let ui router take over and do its magic/en/us update your state config. Also, you don't really need to define params unless you need a default value$stateProvider.state('catalog', {
url: '/{lang}/{region}',
controller: "SudokuController"
});