URL handling in Multilingual Sites

A multilingual website is any website that offers content in more than one language.

Some concerns for building a multilingual websites are :

1. We should first think of how translations will be managed, whether it will be dynamic or static. For static we can use angular-translate & for dynamic we can think of google translate.
2. Right-to-Left languages completely alters original design as we are used Left-to-Right languages.
3. If we are using non-english Url’s, we should use UTF-8
4. URL structure also needs to be considered so that user can instantly know he is on right page.

In this blog, we will talk on URL structure, which can be
E.g :

1) example.com/about?lang=en
2) example.com/en/about
3) en.example.com/about

As 2nd type of url is widely used & behaves better in terms of SEO, we will working on generating the 2nd type of URL .

We have to manage language in URL in all states in our web app, nested states is the key to introducing language as a URL variable to all states. We start off by creating the ‘home’ state that every other state will be child of.

[html]
angular
.module(‘dtWebApp’)
.config(routerConfig);

/** @ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/:activeLang’, // here we have activeLang as $stateParams
template: ”,
controller: ‘HomeController’,
controllerAs: ‘home’
})
.state(‘home.default’, {
url: ‘/?utm_source?utm_medium?utm_term?utm_content?utm_campaign’,
templateUrl: ‘app/main/main.html’,
controller: ‘MainController’,
controllerAs: ‘main’
})
.state(‘home.aboutDoTrips’, {
url: ‘/about-us/’,
controller: ‘AboutDoTrips’,
controllerAs: ‘aboutus’,
templateUrl: ‘app/aboutdotrips/experienceListing.html’
});

}[/html]

Now in the Home Controller, we can get $stateParams where you can check if the activeLang param is valid or not if it is not valid you can redirect to home default state with default preferred language & if it valid you can use it to get valid multilingual translations for web apps.

[html]
angular
.module(‘dtWebApp’)
.controller(‘HomeController’, HomeController);

/** @ngInject */
function HomeController($translate, $state, $stateParams) {

//getting preferred language

var activeLanguage = $translate.use() || $translate.storage().get($translate.storageKey()) || $translate.preferredLanguage();

console.log("from url " + $stateParams.activeLang + " localstorage " + activeLanguage);
var validLangs = [‘ar’, ‘en’];

if ($stateParams.activeLang == ” || $stateParams.activeLang == ‘:activeLang’ || validLangs.indexOf($stateParams.activeLang) == -1) {
$state.go($state.current, {
activeLang: activeLanguage
}, {
reload: true
});
} else {
$translate.use($stateParams.activeLang);
if ($state.is(‘home’)) {
$state.go(‘home.default’);
}
}
}
[/html]

When ever there will language change, suppose a function is called from which you can change language so corresponding to it URL should also change, you can do this by

[html]
/**Changing language only if previous & current selection is not same****/
ctrl.changeLanguage = function(newObj, oldObj) {
if (newObj !== oldObj) {
$translate.use(newObj);
}
};
/**After Success translate Change ,we can go to current state with valid activeLang which will change url ****/
$rootScope.$on(‘$translateChangeSuccess’, function(event, data) {
var language = data.language;
$state.go($state.current, {
activeLang: language
});
});[/html]

In this way using angular-translate, we can handle the multilingual URLs in web apps. Also one more thing it is recommended that we should provide unique content for different URLs, although we understand that it might not be possible always.

Hope you like this blog, let me know in comments below.

Happy Coding 🙂