Hi,

there is one functionality which I suspect could be useful for larger apps which require translations.

Assume there is an app which is made up of several (say 20-30) sub-apps. A given user will at any particular time probably only use about 4-6 apps in a given session. These apps are all known at startup, and each app may require a substantial amount of language strings.

What I would like is some functionality which would allow me to inform $translateProvider at runtime that a new file should be loaded, which would happen when a sub-app is "entered" for the first time. The details behind that are beyond this library, let's just assume for a moment that it is possible for me (as the application code) to detect when a sub-app is entered for the first time.

Having a custom loader is not enough (at least from what I've learned), because it is only called when there is a change in language, but this may possibly never happen under these circumstances, i.e. the user will probably just pick his/her language once, and then be done with that. However, (s)he will probably enter sub-apps all the time, some of them more often than others, and some of them never, in which case I would like to be able to NOT load the language files for those sub-apps, at least until they are actually needed.

Regards,
Daníel

Hi,

do you have already a plan or idea supporting async loading of messages and even refreshing messages in realtime?

I would maybe integrate this, but I'm still brainstorming the best way doing this. A dedicated service seems to be ideal, but how we should integrate this in the provider? And what is about "changing"? Any other solution than just a simple event broadcast on rootScope?

I've implemented a custom translation loader, which basically loads a single .json file using $http, pretty much in the same way as in the plunker example (http://plnkr.co/edit/n6MEMU).

My application is made out of several individual "apps", and each app will maintain its own list of translated texts in their own files, so my code needs to take this into account. I've experimented with using $q.all() to create a single promise object out of a list of promise objects for each sub-app:

mainApp.factory('languageLoader', function ($http, $q) {
return function (options) {

    var allPromises = [];

    // g_apps is an array containing the names of all 'apps':
    angular.forEach(g_apps, function(value,index){
        var langUrl = '/' + value + '/' + value +  '_' + options.key + '.json';

        var deferredInst = $q.defer();
        allPromises.push(deferredInst);

        $http({
            method: 'GET', 
            url: langUrl 
        }).success(function(data, status, header, config){
            console.log("Successfully loaded " + langUrl);
            deferredInst.resolve(data);
        }).error(function(data, status, header, config){
            console.log("Failed to load " + langUrl);
            deferredInst.reject(options.key);
        });
    });

    // Finally, create a single promise containing all the promises
    // for each app module:
    var deferred = $q.all(allPromises);

    return deferred;
};

});

Perhaps I'm making some mistake, and perhaps the library should be able to handle this, because if the code looks like this, then no translations work at all.

Hi,

there is a typo in the bower config.

git://github.com:PascalPrecht/bower-angular-translate.git

should be

git://github.com/PascalPrecht/bower-angular-translate.git

trace log from CLI:
[czechspekk@tunnel angular-header]$ bower install angular-translate
bower cloning git://github.com:PascalPrecht/bower-angular-translate.git
bower caching git://github.com:PascalPrecht/bower-angular-translate.git
bower error status code of git: 128

There were errors, here's a summary of them:

• angular-translate status code of git: 128
  fatal: Unable to look up github.com (port PascalPrecht) (Servname not supported for ai_socktype)

• useUrlLoader(url);
• useStaticFilesLoader(options)
• useLoader(serviceName, options)

Syntactic sugar.

I was wondering if you'd given any thought to adding namespaces to the translation dictionary.

My main use for it is to allow expressive translation keys while reducing the repetition and wasted space in the translation dictionary. For example

{
  "component1.label.foo": "Foo",
  "component1.label.bar": "bar",
  "component2.header.foobar": "foobar",
  "login.label": "Email",
  "login.submit": "Sign in"
}

becoming

{
  "component1": {
    "label": {
      "foo": "Foo",
      "bar": "bar"
    },
    "header": {
      "foobar": "foobar"
    }
  },
  "login": {
    "label": "Email",
    "submit": "Sign in"
  }
}

Just starting to look into how to take snapshots of my site in all supported languages so I can make them available to search engines.

It looks like https://github.com/cburgdorf/grunt-html-snapshot could be the thing to use here. I think it would just require setting up angular-translate to read the locale from the location fragment, and then it's just a matter of adding <meta name="fragment" content="!"> as documented at
http://docs.angularjs.org/guide/dev_guide.services.$location#crawlingyourapp.

Please let me know if I'm on the right track, and if desired I'll be happy to document my findings here as I continue to work on this.

Thanks for the great work on angular-translate!

• Support for asynchronous loading of translations (#4)
• Register storage provider support (#3)
• Introducing preferredLanguage() (#29)
• Automated changelog (#11)
• Move examples to plunker (#5)
• Teaching $translateProvider translation namespaces (#14)
• Support for ng-pluralize (#15)
• clarify final interpolation extension structure
• update interpolation extensions accordingly
• update to latest dependencies
• prepare documentation for 1.0 release (update README)
• making sure to update migration guide due to breaking changes
• writing tutorial for website
• clean up pending pull requests
• release!
• setup separate repositories for angular-translate extensions (#59)
• missing translation handling (#45)
• Add @knalli somehow as contributor, since he already did a great job by discussing features
• Update repo to fit the angular module spec (names, structure etc.)
• Check links in readme if they fit to new module name
• Update wiki to fit to new module name (code examples, links etc.)
• Update plunkers to fit new module and components name (also plunker tagging)
• Update tests to run with new module name
• Update package.json and component.json (bower.json) with new module name
• Adding .bowerrc (#16)
• Adding .jshintrc (#17)
• Getting rid of provider folder
• Documentation through code comments
• Introducing ngmin (#20)

Do this plugin make Search engine friendly optimization for multi-language app?

I've run into something that looks like a timing issue when retrieving the current language during bootstrapping when there aren't any translation tables loaded yet. I am using the local-storage plugin and the static-files loader.

I wanted to validate if the stored language is valid in the .run() function using $translate.uses(). As it needs to load the remote translation file first the language is not applied and the method just returns undefined. If I have the translation tables locally there is no problem at all - but unfortunately thats not an option for me.

I created a plunk to reproduce the issue: http://plnkr.co/edit/EPr9bU?p=preview
I logged the output of $translation(Provider).uses() during .config() and .run() to the console.

Can you look into that?

Discussion started at #13 (comment)

Making installation of ngTranslate as simple as possible, a registered bower package would be great.

Hello again,

I, again, have probably made a newbie error. I am trying to switch languages while using the translate directive but it isn't working for me.

Here is a fiddle demonstrating what I'm attempting http://jsfiddle.net/2AfGv/4/

Thanks again!

Edit: I forgot to ask, in my JSFiddle example there is a silly hack to translate english to english strings. Is there a more elegant way to do this (and avoid all the console messages about untranslated strings)?

It's cooler.

Hey guys,

I have a problem and I'm pretty sure it doesn't come from ngTranslate but I'll try to use your xp.
When I set my configuration of $translateProvider

.config(function myAppConfig($translateProvider, $routeProvider) {
    $routeProvider.otherwise({redirectTo: '/home'});

    $translateProvider.registerLoader({
        type: 'static-files',
        prefix: 'i18n/',
        suffix: '.json'
    });
    $translateProvider.uses('fr_FR');
})

When I run my test files, I get

Error: Unexpected request: GET i18n/fr_FR.json
No more request expected

Have you any idea why and how fix this ?

FYI I try ng-boilerplate project on a mac os x env.

Sorry for my bad english and thank you for your reading!

Happy coding!

Hello!

I love the async loaders. But what I'm finding is that, for an instant while my page is loading, my visible fields are populated with my translation IDs instead of with my localized content. Then the async loader finishes grabbing the locale file and everything is fine.

This is a reasonable thing to have happening - after all, the locale has to be fetched from the server in a separate request and processed.

My complaint is just that it's displaying my translation IDs instead of some reasonable default values. I am able to use $translateProvider.translations() to specify defaults on load. This works - but my app config is a very bad place for me to be placing default string values.

Do you have any suggestions?

I think it would be very natural to have default values actually inline in my HTML template. I realize this is in conflict with your syntax, but something like the following feels natural:

<h1 translate="ui.heading">Welcome!</h1>

Looking forward to hearing your thoughts.

Hi Pascal, thanks for your module.

Sometime , when full update page(F5) , i catch this error in Chrome console:

Uncaught Error: Argument 'fn' is not a function, got undefined from pascalprecht.translate angular.min.js:314 ab angular.min.js:314 ra angular.min.js:319 Cb angular.min.js:530 $provide.provider localhost:645 (anonymous function) angular.min.js:563 n angular.min.js:15 e angular.min.js:555 (anonymous function) angular.min.js:559 n angular.min.js:15 e angular.min.js:555 sb angular.min.js:666 c angular.min.js:286 rb angular.min.js:297 (anonymous function) main.js:32 context.execCb require-jquery.js:1615 Module.check require-jquery.js:851 (anonymous function) require-jquery.js:1092 (anonymous function) require-jquery.js:129 (anonymous function) require-jquery.js:1135 each require-jquery.js:57 Module.emit require-jquery.js:1134 Module.check require-jquery.js:905 Module.enable require-jquery.js:1122 Module.init require-jquery.js:764 callGetModule require-jquery.js:1149 context.completeLoad require-jquery.js:1529 context.onScriptLoad

Use angular 1.0.6 , require.js, test Chrome 26.0.1410.65

Why polluting all the HTTP with a local configuration var?

[edited, it was absolutely unclear what I was talking about]

The $cookieStore, used for the rememberLanguage feature, sets cookies, so the info is sent back to the server with each and every remote call. HTML5 LocalStorage is local-only, so it avoids the additional bandwidth.

...and let the app know which language to use?

The fallbackLanguage should be loaded automatically (just like preferredLanguage is) when we work with static files.
Using storage might also be a good thing to have complete integration :)

Hi @PascalPrecht ,

I am working at integrating the angular-translate-loader-url project into my codebase but it isn't playing nice with $missingTranslationHandlerFactory. The behaviour I'm seeing looks like this.

1. Page loads
2. $missingTranslationHandlerFactory is immediately called for every string on the page, but $uses is currently undefined
3. The translations finally finish loading via $http service
4. Some other page content loads via XHR (eg: a list of content for a sidebar on the page)
5. $missingTranslationHandlerFactory is called for any untranslatable strings in this newly loaded content. Now $uses is correctly set to the current page language

How I wish it would behave:

1. Page loads
2. The translate filter / directive does not run until the translations are fetched from $http service
3. Once finished loading the translate filter / directive is invoked and $missingTranslationHandlerFactory is called as needed

Your thoughts?

Sometimes you need to translate something like:

<p>If your download does not begin automatically, <a href="...">click here</a>.</p>

Or even just:

<p>Another translated string with just a <em>tiny</em> bit of markup inside it.</p>

Seems like a common use case but didn't see it documented, so I thought I'd open a ticket.

What's the best way to achieve this? You could divide the single translated string into three parts (e.g. before_markup, inside_markup, after_markup), but this doesn't scale to more nested markup:

<p>Then I asked, <q>Did you just say <cite><a href="..."><q>nested markup</q></a></cite>?</q></p>

In a case like this, it would be nice to include everything in the <p> element in a single translated string, and each translation would include the necessary contained markup. Is this possible?

ng-bind-html and ng-bind-html-unsafe can be used to include sanitized or unsanitized markup. Do they help? Ideally the angular-translate-injected markup could also support live angular behavior too:

<p>To open now, <a ng-click="handleOpen()">click here</a>.</p>

Is that possible?

Thanks for reading, and thanks for the great work on angular-translate!

I think instead of simply overriding the a $translationTable it should be merged with the new given items. This would allow to call translate from different modules without removing already existing translations.

If there is a way to use predefined storage factories, maybe, it would be nice to give user an ability to change a key for a language in a storage. For example, it might be useful to provide a better integration with a server side of the app (in case of cookies storage).
This key is represented like a constant $COOKIE_KEY now. But there are some lacks now:

• constant means that it cannot be changed at all
• the name of this constant does not represent a trues, because a local storage might be used instead of cookies (so, it's not a COOKIE key, but storage key, language key of something like that)

Clean demos for different examples.

Since 'ng' prefix is actually kinda 'reserved' for angular core modules.

In order to make ngTranslate fully testable with $httpBackend and maybe injectable $injector, the tests have to be rearranged to get rid of more moch.module() calls, since it breakes specs $injector.

• to make sure bower components get installed where ngTranslate expects'em

Because we want to save key strokes!

Hello,

I'm no AngularJS expert (yet!) but I think I have my code in the right order. Here is a fiddle of what I'm trying to accomplish http://jsfiddle.net/2AfGv/2/

I have not been able to get the translate directive or filter working correctly.

Any help you can offer would be greatly appreciated.

Thanks,

Hey @knalli, @DWand !

I wonder, what you guys think about the following approach:

So currently, we provide pretty cool methods like

• $translateProvider.useCookieStorage()
• $translateProvider.useLocalStorage()
• $translateProvider.useStorage()
• $translateProvider.useMissingTranslationHandlerLog()

These methods give a user the ability to decide, which service to use, as well as building a custom service and use that instead.

In canary, there're also new methods for async loaders like

• $translateProvider.useUrlLoader()
• $translateProvider.useStaticFilesLoader()
• $translateProvider.useLoader()

When a user says, he wanna use a built-in service, then the built-in service is being used. But a user can only use one service at a time. Which means, there's an overhead when using features like storage and loaders, since only one of'em is actually used.

Now, how about splitting these kinda 'extensions' up in separate components. Each of'em is an injectable service, so it would be no problem to extract'em from the main source. I think we could provide a main repository (which is angular-translate) and a few 'extension' repositories, which provide services for specific features.

The current state could look like this: We have repos for the following

• angular-translate - which just works, and provides a way to setup multilanguage
• angular-translate-storage-cookie - the cookie storage service extracted
• angular-translate-storage-local - the local storage service extracted
• angular-translate-loader-url - the url loader service extracted
• angular-translate-loader-static-files - the static-files loader service extracted

User could also install'em via bower and just use the code they really need and rely on.

In addition to that, the world could build pretty cool other loaders and storage as angular-translate extension, which is just awesome! :)

What do your guys think? I'd go and implement this for version 1.0.0.

When typing

bower install angular-translate

i get the following error:

bower error status code of git: 128
There were errors, here's a summary of them:
angular-translate status code of git: 128
error: Couldn't resolve host 'github.com:PascalPrecht' while accessing https://g
ithub.com:PascalPrecht/bower-angular-translate.git/info/refs?service=git-upload-
pack
fatal: HTTP request failed

Missing translation handler should be injectable as well!

Default behavior should be changed. Currently I have to do something like this, to avoid logging:

$translateProvider.missingTranslationHandler(function (translationId) {
    return;
});

Hi,
sometimes it occurs that a few translations are missing in one language but we have to wait to get them. I known that i can log those missing translations using the useMissingTranslationHandler but what i would like to do the following:
i've defined en-GB as my preferred language, the user changes the language to fr but in the translation table there are a few translationIDs missing, is it actually possible to load the en_GB translations only for those missing translationIDs ?

i've managed to do it (quite dirty i think...) by adding the following code right after your "var translation=..." in the provider

if(!translation && $uses && $uses!==$preferredLanguage){
            translation=$translationTable[$preferredLanguage][translationId];
}

would you have a better solution ?
thanks for all the work done is this fabulous module !

I don't even know if this one is possible. But I sure would love if it were!

My dream is to have the HTML of my pages to be written in the default site language (eg: English), then to only provide the alternate site language translation tables. That is to say, I should not need to write out the English translation table, because it is right there in the initially loaded HTML.

Example 1.

<span translate>This is the easy example. This will work right now.</span>

Example 2.

<span translate values="{name: 'James'}">Hello {{name}}, alas this does not work right now.</span>

The advantages of this approach are:

• Theoretically, faster loading and easier web-crawler integration for the default site language
• Front-end / UI developers can more easily understand the HTML source code
• Reduced bugs and accidentally rendered 'TOKEN_TEXT'

Edit: Forgot to add the ideal translation table.

app.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.translations('de_DE', {
    // I don't know German ;-)
    'This is the easy example. This will work right now.': 'Dies ist der einfache Beispiel. Dies wird jetzt arbeiten.',
    'Hello {{name}}, alas this does not work right now.': 'Hallo {{name}}, ach dies nicht gerade arbeiten.'
  });
}]);

Thoughts?

I added "angular-translate": "~0.7.0" to my bower.json. When I run bower install from a fresh clone, I get

...
bower cloning git://github.com:PascalPrecht/bower-angular-translate.git
bower caching git://github.com:PascalPrecht/bower-angular-translate.git
bower error status code of git: 128
...
There were errors, here's a summary of them:
- angular-translate status code of git: 128
fatal: Unable to look up github.com (port PascalPrecht) (nodename nor servname provided, or not known)

It looks like you accidentally registered the url as git://github.com:PascalPrecht/bower-angular-translate.git instead of git://github.com/PascalPrecht/bower-angular-translate.git.

Is it possible to integrate it to work with ng-pluralize directive?
I'm having this issue right now, and this project seems to be one of the best that works with the pluralization.

Well, thank you very much!

Currently flatObject() is only used when receiving translation data asynchronously. Just for consistency this:

$translateProvider.translations({
   component: {
        foo: {
            bar: 'label'
        }
   }
});

Should also work.

I just switched to using your awesome static files loader in preparation for being able to integrate with transifex.com, an extremely popular platform for managing translations for software projects.

According to http://support.transifex.com/customer/portal/articles/971979, Transifex supports the Chrome i18n JSON format, which is slightly different from the JSON format you're using in your super helpful example plunkr.

Just wondering if I'm doing it wrong, or if angular-translate just does not yet integrate with Transifex and whether I can help with that. Thanks!

Hi everybody,
thanks for the good work on angular-translate. In a current project I wanted to use it in the specified way:

<h1 translate>app.title</h1>

But when running grunt:htmlmin for deployment, this is translated into:

<h1 translate="">app.title</h1>

And this obviously doesn't put the correct translation string in the element.

I didn't find any options in the grunt-htmlmin documentation where I could steer this behavior, so my only solution is to switch to the other syntax angular-translate provides (which I find to be less concise), e.g.

<h1 translate="app.title"></h1>

I know that this is not directly fixable in angular-translate alone, but I thought I let you know. If someone else has solved this problem, I am all ears. Thanks!

Related: http://briantford.com/blog/angular-bower.html
Discussion: https://gist.github.com/PascalPrecht/5411171#angular-module-structure-proposal

I would like to be able to provide custom functions for these scenarios:

If a message property isn't found, modify the message tag with ✘ so it stands out.

✘ USER.GREETINGS ✘

When supporting longer languages like German we like to make our English strings longer to see what features in the UI will break before we even spend time adding and debugging with translations. One way to do this is double every string.

HelloHello

Using IE 10 i couldn't run any examples. Even if I download or run from plunker. I had a "SCRIPT5022: No module: ngTranslate" error.

I think it'd be great to provide a full tutorial building an App with angular-translate. ngdocs provides besides guide and api a section for a tutorial which is, for example, used by the angular team to write the phonecat tutorial.

Actually this tutorial would probably similar to the guide but with a more connecting background.