Localize your AngularJS Application with angular-localization

[00:00] You can jumpstart your application's foreign language support using angular-localization or any one of the other great localization libraries available. The latest version of this is 1.1.3. That's what we're going to use for the purpose of this demo.

[00:14] A little bit about the application. We have three animals here, each with an English name. I want to support three different translations here, English, Spanish, and Swedish. A note, particularly to the Swedes. I did most of the translations on Google Translate. I apologize if they're a bit off for the purpose of this demo.

[00:32] Right now, the translations are not changing at all. I'm going to walk through how we can take an existing app and something that performs like a pretty normal Angular app and make it into a localized app.

[00:44] A little bit on configuration here. Up at the app.js file, we define our app, and then we also pull in dependencies. ngSanitize and ngLocalize are both required to use the Localize library, and then the .Config and .InstalledLanguages just make it a little easier to use some of the existing structure, like this localeConf, as well as this localeSupported.

[01:04] localeSupported is simple enough. It's just the three locales we are supporting in this application. This is US English, Mexican Spanish, and Swedish Swedish. The localeConf itself tells our library where to go to find its languages.

[01:23] In this case, the basePath is languages from the root directory, and then our defaultLocale is actually going to be Mexican Spanish. Then our sharedDictionary is common. That's what this guy is right here, common.lang.json. Then the file extension, as you can imagine, is lang.json.

[01:39] These observable attributes are a regular expression for determining which attributes to watch on our elements that have localization applied. This is the default. We're not going to switch this up for this example, but it's something you can definitely check out in the documentation.

[01:56] The animal controller is fairly simple. We have several supportedLanguages, along with their codes in the value field. We're choosing English as the default, and then we have all of our animals. Each has an English name, and then they also have a code.

[02:08] This code refers to a file name, and then the actual key that they are in the key-value pair. If you take a look at these language files, they are pretty normal JSON files with a flat structure, that just have keys and then values.

[02:25] This is Spanish. This is Swedish. This is English. In this case, they all replicate each other, which means they all should have proper translations for everything that's sitting out there on the DOM.

[02:39] With that, the first thing we want to do is make sure we have the right directive in place to translate these animal names. Right now, it's just an ng-bind to the animal's name. You may recall there's an animal.code as well.

[02:54] What we actually want to do is instead of ng-bind, we want to use the directive from the library, i18n. We need to set that to double-bracketed because we have a dynamic value here. This is going to be animal.code.

[03:08] That small change alone, because our default language is Spanish, should actually change all these translations to Spanish. Already, angular-localization is pulling all those translations from our Spanish language file.

[03:21] If we actually take a look back here, even if we switch it, nothing's changing yet. We're going to wire that up to actually switch the locale for us. This select box isn't really doing anything special.

[03:32] Now that we've demonstrated the default language changing, I'm actually going to make our default en-US, which is just English US, because that's the first option chosen. If we take a look again, we're going to see that that comes right back for us.

[03:49] How can we change that locale then? We can also use the internal service that angular-localization provides for us. What I'm going to do is I'm going to create a method for the selector right here. We're going to use that on ng-change.

[04:04] Let's go up to the controller first. We'll call it "this.updateLocale." This is going to take a lang. The lang object will actually be one of these objects. We'll have a label and a value on it. We're going to use a service that is provided to us. It's called "locale."

[04:23] We're going to pass that in there. We're just going to do locale.setLocale. All we're doing is saying, "Hey. The user just changed that." Here's our lang.value right here, which is going to be our locale. Let's set that locale accordingly.

[04:42] If we go over here, we can just add a quick ng-change directive to this selector. It'll be ctrl.updateLocale, and then our language that is selected is ctrl.language. Cool. Now we've got a way to update that locale, as well a default, which is English in this case. The first is chosen. Now Spanish. Now Swedish.

[05:11] That's pretty cool too. We got all these characters in there. What it's doing is it is loading up those files on the fly. Then it's saving them to memory after that point so that no matter what locale you're choosing, you've still got those strings available to you after that point.