How to translate your Angular app with ngx-translate

Each of these challenges will be addressed in this article; some through robust AngularJS libraries, others through certain strategies and approaches. I’m using the sample league app that was built in this series, building angularjs translate on the code base from github that existed at the end of tutorial 7. This commit also included the devise authentication from this post, or hit the tutorials menu at the top and select the Rails 3 tutorial.

• Angular-translate is a JavaScript translation library for AngularJS 1.x app.
• It supports pluralization through MessageFormat, and is designed to be highly extensible and configurable.
• Businesses that target other cultures, nationalities, and languages need a way to provide this feature in a way that is responsive and maintainable.
• The module angular-translate expects these translation tables to be provided as plain JavaScript objects or as JSON objects (if loading remotely).

It lazy loads the language-specific translation data from the server only when necessary. The previous section showed how you can provide translation tables directly in the source code as JavaScript objects. This may be acceptable for small applications, but the approach is not scalable, which is why translation tables are often downloaded as JSON files from a remote server.

You’ll note that we’ve translated the things that are on the html page itself, but the column headers on the grid are not translated. We need to translate these in code, since they’re configured in the javascript. The combination of the partial loader and ngGrid makes this difficult. The angular-translate library comes with built-in directives and filters that make it simple to internationalize our apps. Given that we are building AngularJS client-side apps, we don’t particularly want the user to have to refresh the page or visit an entirely different URL. Of course, AngularJS could easily accommodate your international audience natively, perhaps by generating different templates for different languages and serving those within the app.

How to Internationalize Your AngularJS App

For attributes, angular-translate has a specific directive. If you have discovered a bug or have a feature suggestion, feel free to create an issue on GitHub. Please follow the guideline within the issue template.

First off, I’ve mentioned a little about angular-translate, the AngularJS module used to easily localize your app for multiple languages. It’s very quick and easy to setup, simple type the following into your terminal. This creates entries in all 3 translation files at once – your translation files can never get out of sync. With this, you can easily group your translations in
different contexts. E.g. main.title, settings.account.user_name and so on.

For us it made more sense to use a third party library so that we could focus on our app instead of a translation library. One promising 3rd party library is the AngularJS localization module angular-l10n. It provides translations in directives or through filters.

Another blog article that is written by ICAN’s talented developer – enter our front end developer – Ellie

If you don’t know in-context editing yet, have a look at our demo. Modern apps, where the front-end and the back-end are distinctly separate from one another, can be even trickier to deal with when it comes to internationalization. Suddenly you no longer have access to the plethora of time-tested tools that once helped with internationalizing your traditional server-side page generated web apps. We can add as many languages as needed – there’s no limit; however, since there are now two languages available, how does our app know which language to use? Angular-translate doesn’t prefer any language until you tell it to do so. This time, use BabelEdit’s Pre-Translate dialog to translate to all languages automatically.

Localizing your existing AngularJS apps with angular-translate can be done easily. It’s a great module that covers everything you need to implement a localized version of your apps. If you’re familiar with the Phrase in-context editor you know what a powerful tool it is to speed up the translation process and boost the content’s quality. Editing translations directly on the page is fast and easy!

Add the module

It’s also possible to use HTML formatted messages in your translations. You can of course pass parameters from your component’s .ts file, too. If you’ve followed the into step, abort the server with CTRL-C. We look forward to sharing our expertise, consulting you about your product idea, or helping you find the right solution for an existing project.

For more information about the angular-translate project, please visit our website. To develop this app, we have used HTML, CSS, translate.js and AngularJS. Here, we’re using Microsoft Translate, but one could just easily use another provider such as Google Translate or Yandex Translate.

I am doing registration page and my app contains English and Arabic pages. I am storing English and Arabic words in JSON files. In this article, you learned how to use these packages to internationalize and localize AngularJS applications. Invalidating the cache is less of a concern here, since locale rules are less likely to change than string translations.

The @ngx-translate/http-loader loads the translation files dynamically from your webserver. Hi, I’m running an Angular hybrid app with the downgrade module. How did you manage to make ngx-translate to work alongside angular-translate? I’m asking this because i can’t seem to address the angular cli from any of the project’s folder since there is no angular.json to be found. English and Deutsch you can not add in mapping languages file. But it is better to write it in translate directive but not in plain text.

We then listen for the translation success event, which is fired once the translation files have loaded, and we call again to update the column headers. In a translation table, the key represents a translation ID, whereas the value represents the concrete translation for a certain language. $translateProvider https://forexhero.info/ provides a method called translations() to take care of that. Being able to answer these questions is important when selecting a library or package. There are many tools for translating and many ways to go about it. You can do it server-side, client-side, or have a mix of both.

Translating AngularJS Applications in Context With Angular-Phrase

It is possible to take navigator.language and match it with names of the translation table. Almost all AngularJS style guides recommend avoiding filter because of productivity. Also, main disadvantages is an inability to change locale in run-time — you should somehow replace script[src] of locale and refresh page. All what you need to do is to put an AngularJS script in the head of your html file.

Look for my next article to learn more about angular-translate in particular and remember that translation can be addressed in almost any language or framework. I encourage you to research and find the best option for your application. If you choose to use the angular-translate library look for part 2 to learn more about string organization, alerts, drop-downs, language selection, and css changes. As the world grows closer through the internet, more companies need websites that are translated into other languages. Businesses that target other cultures, nationalities, and languages need a way to provide this feature in a way that is responsive and maintainable.

• Adding everything as global really is a pain with all the dependencies, different node version,
  etc.
• We can simply add another translation key with another language key.
• If for example, AngularJS were to change, you would have to make changes accordingly.
• I’m using the sample league app that was built in this series, building on the code base from github that existed at the end of tutorial 7.
• There are many guides and blogs online that refer to this as i18n (internationalization) and l10n (localization).

To set a preferred language, we can use the method $translateProvider.preferredLanguage(). This method tells angular-translate which of the registered languages is the one that our app should use by default. It expects an argument with the value of the language key, which points to a certain translation table. Locale rules are shipped with the angular-i18n package, so all you have to do is make the package contents available to your application as needed. But how do you generate the JSON files for your translation tables?

The example above is when a user updates their profiles, their data is sent to this function as form data. This iterates through the file zh_en.json and if it finds a match the data will be updated to English. Use the Pre-translate functionality to create the translation for the other languages.

I will introduce a few of these features in this article and will continue part 2 with more features later. Maintaining translation tables this way reduces the initial payload size delivered to the client but introduces additional complexity. Now you are faced with the design challenge of delivering i18n data to the client. If this is not handled carefully, your application’s performance can suffer needlessly. AngularJS can do this by using your tokens to perform a lookup in translation tables that you provide. The module angular-translate expects these translation tables to be provided as plain JavaScript objects or as JSON objects (if loading remotely).

We encourage everyone to have a look at our documentation website. If you think the documentation is not correct (bug) or should be optimized (enhancement) please file an issue. One option is to use programmatic translation APIs, especially if the strings in your application are simple literals without variables or pluralized expressions. Unlike i18n data, locale rules are global to the application, requiring the rules for a given locale to be loaded all at once. In a complex application, there may be many modules, each with its own distinct i18n data.

Once installed add the module to your existing Angular app just like any other module. This saves the project configuration in a .babel project file
and also updates the JSON files in your project. For correct filter and directive working key value in the nested object should be without spaces. In the official documentation, there is a recommendation to name keys of the object in the table with capital letters and low dashes because it is constant. It’s important to spend time and decide about namespacing in each case. Luckily, in our-days, we have good 3-rd party solutions for application localisation such as angular-localization and angular-translate.

Similarly if the data stored in the server is the literal string ‘China’ and a Chinese user fetches that data they will need to be able to see 中国 instead. Angular-translate is an AngularJS module that provides filters and directives, along with the ability to load i18n data asynchronously. It supports pluralization through MessageFormat, and is designed to be highly extensible and configurable. What we’re doing is creating a function that sets the column defs, that function uses the translation routines. We call that on entry, it will fail to translate the column headers.

Any AngularJS directives embedded as html in the string will now compile on load of the translation. Once all date has been through the process the results will be sent to the server using Angular’s $http method. If you are 100% sure that your translations are already loaded (e.g. by using static translations instead of
the translation loader) you can also use instant().

Adding in-context editing capability to your localized AngularJS app is easy with the angular-phrase adapter. If you are still having difficulty after looking over your configuration carefully, please post a question to StackOverflow with a specific tag. Especially if the question are related to AngularJS or even JavaScript/browser basic technologies (maybe your issue is not related to angular-translate after all).

It uses interpolations, which allow you to insert values in strings. These are fairly standard features for any translation library and this seems to be a strong contender for an AngularJS compatible library. This has been a quick look at what libraries exist for javascript, with a focus on AngularJS, and an overview of a few features of angular-translate.

To convert either toEnglish or to Chinese we can simple add the TRANSLATE module to a function like so. This is all fine and well until things get a little more complicated. We also use the preferred language to load language specific files. For example we have two files we use when selecting a country.