All features

Quality Checks

Term Base

Translation History

Translation Memory

Style Guide

Translation Team Management

Professional Translation

Machine Translation

Features

For managers

For translators

For developers

For designers

For enterprises

Solutions

Help Center

Blog

Case Studies

Integrations

Resources

Pricing

Demo

Book a demo

Navigation Bar

Our goal is to provide you with in-depth knowledge regarding localization.

Learn how CMS localization can boost your online presence, expand your reach, and optimize for international success with our informative article.

CMSs: industry state and how to localize them best

Newsletter Sign Up

Localization Blog

We all know the <strong>replace()</strong> function for JavaScript Strings and that it is possible to do really fancy things by using regular expressions to replace a (sub)string. What I didn't know was that there are <strong>special $ references</strong> you can use in the replace() function. Of course there is <strong>$1</strong>, <strong>$2</strong>,.. to get the first, second finding, BUT did you know <strong>$&</strong> is also available?
<h2><strong>$&</strong> reinserts the whole regex match</h2>

Here is an example how it works:

<p style="text-align: left;">The usage of <strong>$&</strong> is basically just the shorthand of using the replace() function with a function as second parameter:</p>
<pre><code>text.replace(regex, function(m){ return '<mark>'+m+'</mark>';});</code></pre>

When you use <em>replace(RegExp, function)</em> then the function is called with the following arguments:
<ul>
<li>The matched substring</li>
<li>Match1,2,3,4 etc (parenthesized substring matches)</li>
<li>The offset of the substring</li>
<li>The full string</li>
</ul>
<h2>When to use it?</h2>

It will make sense to use <strong>$&</strong> if you can't change the regex per se, e.g. if you get it from a server. Or, secondly you just don't want to employ a captured group in your regular expression ;)

More information:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch" target="\_blank">RegExp.lastMatch ($&) - JavaScript | MDN</a></li>
<li><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/replace" target="\_blank">String.prototype.replace() - JavaScript | MDN</a></li>
</ul>

<h2>Lingohub - Translation Management for Developers</h2>

This article is provided by [Lingohub](https://lingohub.com/), a translation management software. It is used by development and product teams from all over the world to manage software translations more productively.

JavaScript's replace() function has special $ references that can be used with regular expressions to replace (sub)strings. In this article, we provide a detailed overview of how it works. 

Dev Bit: How to reuse matched value of regex in JavaScript's replace() function

Localizing your apps, games, or websites is an exciting, yet often lengthy task. Here at Lingohub, we aim to make your localization and translation journey more effective and more fun.

With the following updates, we aim to make your life a bit easier:

- New GitHub integration + repo integration updates
- An all-new mobile SDK supporting Over-the-air updates
- A better experience to manage your Lingohub members & their permissions
- Updates for your style guides
- All the small & not so small bug fixes :)

Feel free to jump to each product update directly. We’re super excited to show you all the improvements and updates our team has been working on over this summer.

Please give it a read, sign up for a Lingohub account to experience them first hand, or log in to your existing account.

We’re stoked to get your feedback. ✌️

## 1\. A new GitHub integration & many improvements for streamlining your code pipeline

### A new repository UI & wizard

At Lingohub, supporting developers to make software localization a hassle-free experience is at our hearts. With the new repository wizard, we aim to make your life easier and set up new repository integrations faster.

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://www.youtube.com/embed/3Ta6RbucTb8?controls=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<figcaption>Repo overview</figcaption>

### Supporting GitHub Apps

By connecting Lingohub to your GitHub repositories, you can directly exchange files between Lingohub & GitHub, making sure your translations are up-to-date and accurate.

With the all-new GitHub app from Lingohub, we give you and your team more options and a better experience in connecting your GitHub repos to Lingohub.

To synchronize a GitHub repository with the Lingohub service, you need to install the Lingohub App. [You can install it right here.](https://github.com/apps/lingohub)

**Are you an existing customer?**

No worries. Nothing will change in regards to your existing GitHub integration. However, we do recommend switching to our new GitHub app as it gives you more freedom, flexibility, and safety for your files.

If you create a new Lingohub project today, connecting to your repos via our GitHub app will be the default configuration.

<div style="position: relative; padding-bottom: 56.25%; height: 0;"> <iframe src="https://www.youtube.com/embed/oih1cZbxG4M?controls=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> <figcaption>Connecting GitHub & Lingohub</figcaption>

### All the improvements coming to your repo integrations

Besides our all-new GitHub app, the following improvements are coming to your account as well:

- **New file matcher**: We’ve updated the file matcher, making it simpler to choose the files that should be synchronized with your Lingohub project.
- **Greater synchronization options**: With these updates, you get the following sync options
  - Manual pull: You can always pull changes manually
  - On commit: Lingohub is synchronized as soon as a new commit happens
  - On Schedule: In addition, you can set up cron jobs to synchronize your repo and your Lingohub project based on your custom needs
- **New integration settings**: We’ve also added new settings for your repo integration to - for example - automatically delete a file in Lingohub when it has been removed in your repository.

We are excited to release all those great repository updates to your Lingohub account. If you have any feedback or questions on setting up your Lingohub project, please feel free to [contact us right here](https://lingohub.com/support).

*P.S. Lingohub support for self-hosted repositories for GitLab, GitHub, and BitBucket along Azure DevOps support is coming soon. Please let us know if you’d like to be among the first testers.*

## 2\. All-new mobile SDK for iOS & Android, supporting Over-the-air updates

After our initial private beta, we are stoked and proud to announce our all-new mobile SDK coming to Lingohub in public beta to all Lingohub users.

Our mobile SDK is available for everyone with a [Lingohub account](https://app.lingohub.com/sign-up) and can be utilized to <a href="https://lingohub.com/use-cases/mobile-app-localization">localize mobile apps</a> (iOS and Android).

The mobile SDK now supports Over-The-Air (OTA) updates, allowing you to publish translation updates to your iOS and Android apps quickly without going through the review and release process of the iOS App Store or Google’s Play Store.

To learn more about our new mobile SDKs, please visit the following resources right here:

- [Our mobile localization web page](/p/mobile-app-localization)
- [iOS Tutorial: How to get started with the Lingohub iOS SDK](/blog/2020/09/ios-sdk-localization)
- [Android Tutorial: How to get started with the Lingohub Android SDK](/blog/2020/09/android-sdk-localization)

All in all, we are excited to see the mobile SDK in a public beta. Rest assured, further updates are coming soon, including a new translation editor & our Snap SDK with automated screenshots. Instead of manually uploading screenshots, the Snap SDK automatically uploads them for you and matches them with the corresponding strings.

## 3\. Members & permissions reinvented

Managing different team roles and freelancers in one team and one project can sometimes be a bit tricky.

Who does what? Who’s managing your organization, your projects and languages? Who should only get access to certain project settings? Which translator is responsible for which language?

With our reinvented members & permissions, we give you more flexibility to manage your team. No matter how small or large it really is.  With new standard roles and custom permissions, we give you more control over managing your team.

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://www.youtube.com/embed/cQvrBOczSpI?controls=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<figcaption>Members Permissions</figcaption>

Because, in the end, it’s all about giving you the flexibility to set up your team inside Lingohub in the best way possible.

With the updated interface and new permissions:

- admins can change billing information
- project admins can manage, add or remove members
- translators can now download/upload/pull/push files

These are just some examples that will make you and your team’s roles a bit clearer.

[To learn more about members and roles, visit our help page right here.](https://lingohub.com/help/getting-started/understanding-members-and-roles) Alternatively, you can directly check out your new members' page right in [your Lingohub member settings](https://app.lingohub.com).

## 4\. Style Guides for you and your translators

The Lingohub Style Guides are a set of standards established for your translators to follow while translating text. Style Guides come in handy in various situations as they promote and ensure all your translations' consistency.

At Lingohub, we highly encourage you to use Style Guides when working with internal or external translators. It helps you set expectations and gives new translators a faster onboarding to your text.

When hiring translators through Lingohub, Style Guides give external translators an easy time understanding your translation needs. We also highly recommend using them as they save you and your translators a lot of misunderstandings.

Please note that Style Guides will soon be required for ordering translations through Lingohub. [To learn more on how to create and manage your Style Guides, please visit this page right here.](https://lingohub.com/help/using-lingohub/translation-tools/style-guides)

## 5\. A more powerful resource dialog & many more bug fixes

Last but not least, this update includes a lot of small improvements and bug fixes that make your Lingohub experience better. We believe that those small things add up and create a seamless and more enjoyable translation experience.

Here is a list of improvements and bug fixes included in our update:

- Resource Dialog: Our updated resource dialog for exporting your resource files gives you a full export history of your exports
- We fixed the translation orders without Style Guides
- "`&nbsp`" are now correctly detected in new Editor
- "`&nbsp`" are now handled in Twine files
- We fixed an Android placeholder bug with double percentage signs
- We updated the Zendesk integrations and fixed a bug for different attachment types

## That's a wrap

With all those mentioned updates, our team is continually aiming to make your Lingohub experience better. Thanks to your feedback and constant input, we make Lingohub a better place for localizing software.

And best of all. All those updates are available today in your Lingohub account. No matter if you're a long-term customer or just signed up for a free trial account.

Go ahead and log in to your account here. Are you not using Lingohub yet? Try it out; it's entirely free for 14 days.

P.S. Please let us know what you think about those new updates. Either via email [support@lingohub.com](mailto:support@lingohub.com) or [tweet us at @lingohub](https://twitter.com/lingohub). Thank you.

In this article, you can find all the latest improvements coming to your Lingohub account. You can now find GitHub App support, Over-the-Air Updates, and many more features to boost your software localization.

GitHub App, Over-the-Air Updates, and many more features to boost your software localization

GitHub App Support, OTA Updates, Member Permissions

In this article, we show you how to localize an iOS app and make it available in multiple languages by using the Lingohub iOS SDK. We will guide you through the process of adding the SDK and making your Mobile app ready to get text/translation updates without releasing a new version (Over The Air updates).

First, there is still the question of why should you support multiple languages in the first place? If you have a consumer-facing app, chances are really high that a large percentage of your user base is not English natives. Providing these users with an optimal experience requires your app to be localized and translated. A goal that we help you achieving with our iOS Lingohub SDK.

## Prerequisites

For the proper integration of the Lingohub SDK, the first thing you will need is an existing Xcode project with localization support. To guide you through the next steps, we will create a demo app called **Funtastic** that will be localized into English and German. Although the tutorial is for iOS, the Lingohub SDK will also work the same way with macOS, tvOS & watchOS.

For our demo project **Funtastic**, we created an app project containing English & German languages.

<figcaption>Creating the Funtastic project in XCode</figcaption>

We created a simple splash screen for the app, including some labels and buttons.

For the moment, all localization is handled statically in the app by adding the required strings into the corresponding *Localizable.strings* files.

<figcaption>Locazlizable.strings file containg the texts</figcaption>

The UI elements are connected via `IBOutlets`, so the localization can easily be managed via code instead of using Storyboard localization.

<figcaption>IBOutlet to connect UI elements</figcaption>

For our demo, the app is now finished and working as expected. Usually, you would add some more features, but for the moment, this is fine for us. We would now submit the app to the App Store and release it once it passes the app review.

If you want to change some verbiage in a released app, the process gets really painful. You have to create a new version, upload it again to the App Store, and have it reviewed. There must be something better for this.

Well, luckily for us, there is something better. :)

Let's integrate the **Lingohub SDK** into our project. The SDK was designed to be as easy to use and integrate for developers as possible, so you will only need a few lines of code, and you are good to go.

## Integrating the SDK

The Lingohub SDK supports integration with all the popular dependency managers, including CocoaPods, Carthage, Swift Package Manager, and manual integration. For help using our integrations, please refer to the readme of our repository. ([Lingohub iOS SDK](https://github.com/lingohub/lh-ios-sdk)).

In this tutorial, we are using the manual integration and add the Lingohub.xcframework as a dependency by dragging it to `Frameworks, Libraries, and Embedded Content` section of the Target.

Next we start configuring our SDK in the AppDelegate. Let's import the Lingohub module and add the following snippet:

~~~swift
LingohubSDK.shared.configure(withApiKey: Constants.Lingohub.authToken, projectId: Constants.Lingohub.projectId)

LingohubSDK.shared.swizzleMainBundle()
~~~

## Connecting to Lingohub

Before you start with this section, make sure you have either an iOS or Android project on Lingohub. How you can create one, is described in detail in our [help](/help/). To connect the SDK to Lingohub, two steps are necessary:

1. Creating a package that contains the resource files
2. Creating an API on Lingohub for the project

### Creating a package

Creating a package is really simple and can be done through Lingohub's intuitive UI. By creating a package you have to enter the following information:

* **Platform**: Either iOS or Android. This option tells the system what kind of files (.string or .xml) the package will contain.
  Note, although Lingohub's projects are associated with only one platform, it is possible to create an `Android` package in an `iOS` project and vice versa. So if you have one project for both, Android and iOS, you need to create two packages for OTA updates.
* **Stage**: This is optional to use. Basically it allows you to distinguish between two environments, `production` and `pre-production`, so you can test the new texts before you release it to production.
* **Version from and to**: Since you normally don't have one version out in the wild, it is handy to specify for which versions a package is responsible. This allows you to manage different and incompatible versions. The `from` version is **inclusive** and the `to` version is **exclusive**, as it is in most programming languages.

A package consists of one or more releases. You can think of a release like a version of a package. Only one release can be active. Check the following graphic on how the SDK determines which package-release combo to use. Note: iOS V4.0 and iOS V3.0 won't receive any updates because the package version doesn't match. **The actual version of your app will be used against the package version.**

For this tutorial, we will use

* Platform: iOS
* Stage: Production
* Version from: 1
* Version to: 1.3

Lingohub will automatically create a release for a new package.

<figcaption>Create package holding the translations from Lingohub</figcaption>

### Creating an API Key

Now you need to add an API Key and the Project Id to your project, so that the SDK can access the Lingohub API. Creating the API is really easy, simply click the `Create API Key` under packages. Then a dialog shows up showing the new API Key + the Project Id.
**Important**, the API key is not displayed again, you can only generate a new one, so please make sure that you save your API Key + Project Id somewhere safe!

<figcaption>API Key and Project Id for connecting the SDK</figcaption>

Next, add the code for the SDK to check for an update package of your translations

```swift
func applicationDidBecomeActive(_ application: UIApplication) {
    LingohubSDK.shared.update { result in
        switch result {
        case .success(let value):
            print("Content updated: \\(value)")
        case .failure(let error):
            print(error.localizedDescription)

        }
    }
}
```

The last thing we need to do is to subscribe to the LingohubDidUpdateLocalization notification, which will tell us when new translations were found. Once this notification is received, just update the UI and you will see your brand new translations. We think `applicationDidBecomeActive` is a good place to check for updates, but you can add this code wherever you want to, as long as it is run.

<figcaption>Listen to text changes</figcaption>

```swift
NotificationCenter.default.addObserver(forName: .LingohubDidUpdateLocalization, object: nil, queue: nil) { [weak self] _ in
    self?.updateLocalization()
}
```

## Over The Air updates

Now everything is in place and the SDK listens to changes on Lingohub. So the next step is to inform the SDK when we want the texts updated. We can do this by creating a new release for the package that we created.

**Important**: As stated above a package can have multiple releases, but only one can be active. The active release will be delivered to the SDK. This way you have the ability to version your releases and if necessary quickly switch back. The SDK then will ping the Lingohub API and will be informed that new texts are available. So it will download and update the texts. This only happens once, the texts are then stored in your app.

<figcaption>Releasing new texts via Lingohub</figcaption>

And like magic all your users get the new texts without the need for a new release:

## Summary

We hope we got you as excited as we are about this new feature. Check out the code of this tutorial and the SDK. If you have any feedback or questions, don't hesitate to contact us. We happily help you set up OTA updates for your awesome app.

Btw. if you are not a Lingohub user yet, start the [free trial](https://app.lingohub.com/sign-up) and [contact us](/support)!

Links:

* [Lingohub iOS SDK](https://github.com/lingohub/lh-ios-sdk)
* [Funtastic project](https://github.com/lingohub/funtastic-ios)

In this article, you can read how to localize an iOS app and make it available in multiple languages by using the Lingohub iOS SDK. We will guide you through the process of adding the SDK and making your Mobile app ready to get text/translation updates without releasing a new version (Over The Air updates).

Get started with the Lingohub iOS SDK -  How to localize your iOS Apps with Over The Air updates

Get started with the Lingohub iOS SDK -  How to localize your iOS Apps

This article shows you how to localize an Android app and make it available in multiple languages by using the Lingohub Android SDK. We will guide you through the process of adding the SDK and making your Mobile app ready to get text/translation updates without releasing a new version (Over The Air updates). With the Android SDK from Lingohub, we help you localize your Android apps efficiently.

## Prerequisites

For the purpose of this tutorial, we are creating a new Android project called **Funtastic**. We are using Android Studio to create this project, but you can use any other IDE (like Eclipse for instance). Funtastic will have English as a source language and will be translated into German.

<figcaption>Project layout in Android Studio</figcaption>

We created a simple splash screen for the app, including some labels and buttons. The strings that are used in the layout are defined in the `strings.xml` file:

~~~xml
<resources>
  <string name="claim">Unleash your iamgination</string>
  <string name="login">Login</string>
  <string name="sign_up">Sign Up</string>
  <string name="forgot_password">Forgot your password?</string>
</resources>
~~~

Now let's assume we have finished our app project and published it to the Google Play Store (Yeah!). But shortly after the release we notice a typo in our strings file. Instead of **imagination** we typed **iamgination**. Of course, such a typo is embarrassing, so we want to quickly fix it. Without the Lingohub SDK, our only option would be to create a new release, which is quite cumbersome and slow. This is where the magic of the Lingohub SDK comes in handy.

## Integrating the SDK

The Lingohub SDK is hosted on jitpack, so before you add the SDK to your gradle file, you have to add the jitpack maven repository:

~~~groovy
allprojects {
    repositories {
        ...
        maven {
            url 'https://jitpack.io'
        }
    }
}
~~~

Now, add the Lingohub SDK dependency to your application-level .gradle file:

~~~groovy
dependencies {
    ...
    implementation 'com.lingohub:lh-android-sdk:1.0.0-beta01'
}
~~~

Voila, now you have added the Lingohub SDK as a dependency to your project. That means you can now use the Lingohub classes in your code. However, before we do that, we have to configure Lingohub to get the `API Key` and the `Project Id`.

## Connecting to Lingohub

Before you start with this section, make sure you have either an iOS or Android project on Lingohub. How you can create one, is in detail described in our [help](/help/). To connect the SDK to Lingohub, two steps are necessary:

1. Creating a package that contains the resource files
2. Creating an API on Lingohub for the project

### Creating a package

Creating a package is really simple and can be done through Lingohub's intuitive UI. By creating a package you have to enter the following information:

* **Platform**: Either iOS or Android. This option tells the system what kind of files (.string or .xml) the package will contain.
  Note, although Lingohub's projects are associated with only one platform, it is possible to create an `Android` package in an `iOS` project and vice versa. So if you have one project for both, Android and iOS, you need to create two packages for OTA updates.
* **Stage**: This is optional to use. Basically it allows you to distinguish between two environments, `production` and `pre-production`, so you can test the new texts before releasing it to production.
* **Version from and to**: Since you normally don't have one version out in the wild, it is handy to specify for which versions a package is responsible. This allows you to manage different and incompatible versions. The `from` version is **inclusive** and the `to` version is **exclusive**, as it is in most programming languages.

A package consists of one or more releases. You can think of a release like a version of a package. Only one release can be active. Check the following graphic on how the SDK determines which package-release combo to use. Note: We created a package that is responsible for all Android apps, which means the texts stay compatible between the versions.  **The actual version of your app will be used against the package version.**

For this tutorial, we will use

* Platform: Android
* Stage: Production
* Version from: 1
* Version to: 3

Lingohub will automatically create a release for a new package.

<figcaption>API Key and Project Id for connecting the SDK</figcaption>

Having now the necessary information, we need to set it in the SDK:

~~~kotlin
class App : Application() {

    override fun onCreate() {
        super.onCreate()

        Lingohub.configure(this, "<api key>", "<project id>")

        // Add following line only if you want to use pre-production packages.
        Lingohub.setPreproductionEnabled()

        // Fetch the latest translations from Lingohub
        Lingohub.fetchStrings()
}
~~~

### Replacing the texts

In order to be able to replace strings, the SDK needs to be wrapped around your activity context. In your activity override the `attachBaseContext()` as follows:

~~~kotlin
// we use a base class for all our activities
abstract class BaseActivity : AppCompatActivity() {
    override fun attachBaseContext(newBase: Context) {
        super.attachBaseContext(Lingohub.wrap(newBase))
    }
    override fun getResources(): Resources {
        return Lingohub.wrap(baseContext).resources
    }
}
~~~

That's it! Every time your app starts, Lingohub checks for updated strings and replaces them whenever a string is requested by your app.

## Over The Air updates

Now everything is in place and the SDK listens to changes on Lingohub. So the next step is to inform the SDK when we want the texts updated. We can do this by creating a new release for the package that we created.

**Important**: As stated above a package can have multiple releases, but only one can be active. The active release will be delivered to the SDK. This way you have the ability to version your releases and if necessary quickly switch back. The SDK then will ping the Lingohub API and will be informed that new texts are available. So it will download and update the texts. This only happens once, the texts are then stored in your app.

## Summary

We hope we got you as excited as we are about this new feature. Check out the code of this tutorial and the SDK. If you have any feedback or questions, don't hesitate to contact us. We happily help you setting up OTA updates for your awesome app.

Btw. if you are not a Lingohub user yet, start the [free trial](https://app.lingohub.com/sign-up) and [contact us](/support)!

Links:

* [Lingohub Android SDK](https://github.com/lingohub/lh-android-docs)
* [Funtastic project](https://github.com/lingohub/funtastic-android)

Here's how to localize an Android app and make it available in multiple languages by using the Lingohub Android SDK. We will guide you through the process of adding the SDK and making your Mobile app ready to get text/translation updates without releasing a new version (OTA).

Get started with the Lingohub Android SDK -  How to localize your Android Apps with Over The Air updates

Get started with the Lingohub Android SDK -  How to localize your Android Apps

Want to support more than 1 language in your app? Maybe you think this is just an easy task, but there is a lot that you should/can do to create multilingual support for your web app.

First of all, I show a<strong> i18n/l10n tutorial for Angular 1</strong>, and afterwards I give a brief overview about the steps you have to make to get the same result in <a href="#angular2"><strong>Angular 2</strong></a>.

So let's start with Angular 1! We use quite some Angular modules and other services to make our localized app ready for production:
<ul>
 	<li>angular-i18n</li>
 	<li>angular-dynamic-locale</li>
 	<li>angular-translate</li>
 	<li>angular-translate-loader-static-files</li>
 	<li>Lingohub</li>
 	<li>Grunt tasks for copying, revision and minify files</li>
</ul>
<h2>1. Start with angular-i18n</h2>

AngularJS supports i18n/l10n for datetime, number and currency filters. The locale files are included in the official <a href="http://docs.angularjs.org/guide/i18n" rel="nofollow" target="_blank">angular-i18n</a> package.

We only copy the languages (from the installed angular-i18n bower package) that are used in our app to our own 'locales' folder, by using a <a href="https://github.com/gruntjs/grunt-contrib-copy" rel="nofollow" target="_blank">Grunt copy task</a> (you can also use gulp or any other task runner ;)). This task runs before starting the development server.
<pre>locales: {
  expand: true,
  cwd: 'bower_components/angular-i18n',
  src: ['angular-locale_en.js', 'angular-locale_de.js'],
  dest: '&lt;%= yeoman.app %&gt;/locales/angular-i18n'
}</pre>
But there is one problem with these files - you can only include one. If you include every file, the last will overwrite all others. This would be the approach when only using the English format for date, numbers etc.:
<pre class="brush: xml; gutter: false">&lt;script src="/locales/angular-locale_en.js"&gt;&lt;/script&gt;</pre>
But we would like to give the user multiple languages to choose from.<strong> Solution:</strong> <a href="https://github.com/lgalfaso/angular-dynamic-locale" rel="nofollow" target="_blank">angular-dynamic-locale</a> is used for changing angular <strong>$locale</strong> (which means formatting dates, numbers, currencies, etc.) asynchronously. You just need to configure the pattern (where your angular-locale_*.js files are located) in you app's config:
<pre>app.config(function(tmhDynamicLocaleProvider) {
  tmhDynamicLocaleProvider.localeLocationPattern('/locales/angular-i18n/angular-locale_{{locale}}.js');
})</pre>
Then set the preferred locale (either from $cookies or a value from DB) via the <strong>app's run function</strong> and/or <strong>via controller</strong> when the user changes his language:
<pre>tmhDynamicLocale.set(locale); // locale is 'en' or 'de'</pre>
It is safe to remove the script-tag as defined above, because when <em>tmhDynamicLocale.set()</em> is called in the <em>run</em> function the right JS file (e.g. angular-locale_de.js) will be loaded!
<h2>2. Ready to internationalize with angular-translate</h2>

In the AngularJS world there’s the awesome <a href="https://angular-translate.github.io/" rel="nofollow" target="_blank">angular-translate</a> module. It provides services, directives and filters for translating your texts. If you haven't used it before, please take a look at <a href="https://angular-translate.github.io/docs/#/guide" rel="nofollow" target="_blank">their useful guide</a>.

I will only give a deeper look on how we use <strong>JSON files</strong> with <a href="https://angular-translate.github.io/docs/#/guide/12_asynchronous-loading" rel="nofollow" target="_blank">staticFilesLoader</a>, because we created only 1 JSON file, <strong>en.json</strong>, in development with our source texts. The source and translated JSON files are structured like this: <em>/locales/{locale}.json</em>. All you have to do is telling angular-translate to load the files from that path:
<pre>app.config(function($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: '/locales/',
    suffix: '.json'
  });
  $translateProvider.preferredLanguage('en').fallbackLanguage('en');
  
  // 'sanitize' would render UTF8 chars wrong!
  // 'escape' would not show HTML-tags which are inside our translations!
  // @see https://github.com/angular-translate/angular-translate/issues/1101
  $translateProvider.useSanitizeValueStrategy('sceParameters');
})</pre>
It is also important to define a sanitization strategy. You can find more information about that in the <a href="https://angular-translate.github.io/docs/#/guide/19_security">security section</a> at the angular-translate guide.
<h2>3. Translate with Lingohub</h2>

But how do you get the translated JSON files (e.g. <em><strong>de.json</strong> for German, fr.json for French, it.json for Italian</em> or <em>es.json for Spanish</em>)? If you do not want to send your translator a raw <strong><em>en.json</em></strong> file, the best way is to upload the file/s to Lingohub and use the editor to translate the texts or just order the translations from a professional translator network.

After translating you can simply download the translated files or even better: Make a connection to your GitHub repository and push back the translated files in the according folder.  <strong>TOP recommended workflow ;)</strong>
<h2>4. Deployment</h2>

Once texts are translated successfully, we add a timestamp to our file names to always provide our users with the latest translations. Nobody is happy when they're seeing removed translation keys or old texts, because the old cached JSON files are being served.

For that we use another Grunt copy task for revisioning our JSON files. While copying them to the 'dist' folder we add an UNIX timestamp to all our JSON files in the 'locales' folder:
<pre>expand: true,
cwd: '&lt;%= yeoman.app %&gt;/locales/',
src: ['*.json'],
dest: '&lt;%= yeoman.dist %&gt;/locales/',
rename: function(dest, src) {
  return dest + src.replace('.json', '.&lt;%= revTimestamp %&gt;.json');
}</pre>
The same revTimestamp is defined as an Angular constant, so that it can be used in the configuration for <a href="https://angular-translate.github.io/docs/#/guide/12_asynchronous-loading#asynchronous-loading_using-staticfilesloader" rel="nofollow" target="_blank">staticFilesLoader</a>, like this:
<pre>app.config(function($translateProvider, REVISION) {
  var revSuffix = REVISION ? '.' + REVISION : '';

  $translateProvider.useStaticFilesLoader({
    prefix: '/locales/',
    suffix: revSuffix + '.json'
  });
})</pre>
That's it! Now your app fully supports multiple languages and always serves the latests texts to your users.


<h2>Angular 2 <small>and ng-xi18n</small></h2>

As described in a <a href="https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015/">previous blog post</a>, Angular2 will change everything. So that's why I want to describe the workflow for Angular2 a little bit.
<ol>
 	<li>Add an <strong>i18n HTML attribute</strong> to your elements you want to translate.</li>
 	<li>Use the <strong>ng-xi18n</strong> tool to extract strings to a standard <a href="https://en.wikipedia.org/wiki/XLIFF" rel="nofollow" target="_blank">XLIFF</a> file.</li>
 	<li>Translate the file (e.g. with Lingohub).</li>
 	<li>The Angular compiler (<strong>ngc</strong>) imports the completed translation files, replaces the original messages with translated text and generates a new version of the application in the target language.</li>
</ol>

<blockquote>You build and deploy a separate version of the application for each supported language.</blockquote>

The following code example shows the template in the component and how the text gets extracted with the new Message Extraction Tool (<em>ng-xi18n</em>). The main difference to the angular-translate (Angular1) approach is, that you do not have to extract the texts manually and define translation keys.


Command to create the <em>messages.xlf</em>:
<pre class="p1"><span class="s1">./node_modules/.bin/ng-xi18n</span></pre>
<h2>Translating and updating texts</h2>

If you update your HTML and remove or add texts, the <em>messages.xlf</em> will change (it will be overwritten when executing the <em>ng-xi18n</em> command). If you translate your XLIFF file a <em>messages.de.xlf </em>will be generated. The easiest way <strong>not to lose</strong> already translated texts is to work with Lingohub. If you upload the changed <em>messages.xlf</em> again, Lingohub detects added and deleted texts, so you just need to translate the new added ones.
<h2>Deployment</h2>

There are two approaches to get a working internationalization with the translated XLIFF files: <strong>JiT</strong> (<a href="https://angular.io/docs/ts/latest/cookbook/i18n.html#!#merge-with-the-jit-compiler" rel="nofollow" target="_blank"><em>Just-in-Time</em></a>) or <strong>AoT</strong> (<a href="https://angular.io/docs/ts/latest/cookbook/i18n.html#!#_internationalize_-with-the-aot-compiler" rel="nofollow" target="_blank"><em>Ahead-of-Time</em></a>) compiler.

Using JiT is the standard <strong>development</strong> approach shown throughout the Angular documentation. It's great .. but it has shortcomings. AoT is used during a <strong>build process</strong> and radically improves performance for your web app. That's why I will only describe the AoT approach here. Read more at <a href="https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#_ahead-of-time_-aot-vs-_just-in-time_-jit-" rel="nofollow" target="_blank">Ahead-of-time VS Just-in-time</a>.

After creating (and translating) the <em>messages.de.xlf</em>, put it in your new created 'locale' folder. (I would save this with a GIT commit). Next, run the <strong>ngc</strong> compile command for each supported language (e.g. de for German). The result is a separate version of the application for each language.
<pre class="p1"><span class="s1">./node_modules/.bin/ngc --i18nFile=./locale/messages.de.xlf --locale=de --i18nFormat=xlf</span></pre>
<h2>Why I like this workflow</h2>

First of all, the developer doesn't need to extract texts by her-/himself - the original app comes with the defined source texts. Second, XLIFF is a standardized format for translating content and it should be <strong>the</strong> format to use, because the developer (or manager of translations) can provide the translator with context information. I also think that this approach is faster in production, because the templates are prebuilt and that's why there will never be a <a href="https://angular-translate.github.io/docs/#/guide/12_asynchronous-loading#asynchronous-loading_fouc---flash-of-untranslated-content">Flash of Untranslated Content</a> caused by asynchronous loaders.
<h2>Why I don't like it</h2>

IDs in your XLIFF are generated automatically, depending on the source text. Everytime you change the source text a new node in the XLIFF is generated and the old one will be removed. If you already translated the XLIFF file you will not see which text has changed in the German file. This is very similar when working with <strong>PO files</strong>. Lingohub cannot notify the translator that a text needs to be revised, because the source text has slightly changed.
<h2>Change language at runtime?</h2>

This is not possible with the current approaches. I also followed an Angular i18n discussion on GitHub, and found <a href="https://github.com/angular/angular/issues/9104#issuecomment-247848203" rel="nofollow" target="_blank">this comment</a> very interesting: "If the user does 1,000 things in your app, only 1 of these being <em>changing the language</em>, we'd rather have maximum performance on the other 999 things without sacrificing any bit of performance for that 1 thing."

I am not sure if it is the way Angular 2 tells you to go, but it seems for now that reloading the page is necessary to provide your app in another language.

After all, if you prefer the angular-translate (Angular 1) approach and want to use a similar workflow for Angular 2, just take a look at <a href="https://github.com/ocombe/ng2-translate" rel="nofollow" target="_blank">ng2-translate</a>. It is very flexible and works at runtime: no page reloading to change the language.
<h2>References</h2>

<a href="http://docs.angularjs.org/guide/i18n" rel="nofollow" target="_blank">docs.angularjs.org/guide/i18n</a>

<a href="https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015">lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015</a>

<a href="http://stackoverflow.com/questions/34797512/angular2-i18n-at-this-point" rel="nofollow" target="_blank">stackoverflow.com/questions/34797512/angular2-i18n-at-this-point</a>

<a href="https://angularjs.blogspot.co.at/2016/09/angular-2-rc6_1.html" rel="nofollow" target="_blank">angularjs.blogspot.co.at/2016/09/angular-2-rc6_1.html</a>

<a href="https://github.com/StephenFluin/i18n-sample" rel="nofollow" target="_blank">github.com/StephenFluin/i18n-sample</a>

<a href="https://angular.io/docs/ts/latest/cookbook/i18n.html" rel="nofollow" target="_blank">angular.io/docs/ts/latest/cookbook/i18n.html</a>

Incorporating multiple languages into your app requires careful planning for adequate multilingual support. Read about i18n and l10n for AngularJS apps in our blog

i18n and l10n for AngularJS apps from development to deployment

i18n and l10n for AngularJS Apps from Development to Deployment

Elasticsearch is a powerful search engine written in Java. Plugins make elasticsearch even more powerful. Two of the most common plugins are
<ul>
	<li>Kopf (<a href="https://github.com/lmenezes/elasticsearch-kopf" rel="nofollow">https://github.com/lmenezes/elasticsearch-kopf</a>): Administration tool written with AngularJS.</li>
	<li>Elastic HQ (<a href="https://github.com/royrusso/elasticsearch-HQ" rel="nofollow">https://github.com/royrusso/elasticsearch-HQ</a>): Management and monitoring.</li>
</ul>


However, sometimes it is not easy to find the right place to start. With the Mac/Brew installation, the libexec folder is what you are looking for. Here is the shortcut, simply go to your console and enter:

<pre style="text-align: center;">sudo /usr/local/Cellar/elasticsearch/2.1.1/libexec/bin/plugin install GIT_REPO</pre>

Of course your elasticsearch version can be different and you have to replace GIT_REPO with an actual Git repository (e.g. sudo plugin install lmenezes/elasticsearch-kopf/master). You can verify the plugin installation (don't forget to restart!) under <a href="http://localhost:9200/_plugin/kopf" rel="nofollow">http://localhost:9200/_plugin/kopf</a> or <a href="http://localhost:9200/_plugin/hq" rel="nofollow">http://localhost:9200/_plugin/hq</a>.

I use a Mac, so maybe your paths are different. If you are not sure where elasticsearch lives on your system, go to your browser and enter <a href="http://localhost:9200/_nodes?pretty=true&amp;settings=true" rel="nofollow">http://localhost:9200/_nodes?pretty=true&amp;settings=true</a>. This will print out an extensive list of details of your running installation.