angular-translate / angular-translate Goto Github PK
View Code? Open in Web Editor NEWDEPRECATED Translating your AngularJS 1.x apps
Home Page: https://angular-translate.github.io
License: MIT License
DEPRECATED Translating your AngularJS 1.x apps
Home Page: https://angular-translate.github.io
License: MIT License
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
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"
}
}
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!
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
Since 'ng' prefix is actually kinda 'reserved' for angular core modules.
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,
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 multilanguageangular-translate-storage-cookie
- the cookie storage service extractedangular-translate-storage-local
- the local storage service extractedangular-translate-loader-url
- the url loader service extractedangular-translate-loader-static-files
- the static-files loader service extractedUser 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
.
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:
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.
undefined
How I wish it would behave:
translate
filter / directive does not run until the translations are fetched from $http servicetranslate
filter / directive is invoked and $missingTranslationHandlerFactory is called as neededYour thoughts?
preferredLanguage()
(#29)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.
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!
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!
Discussion started at #13 (comment)
Do this plugin make Search engine friendly optimization for multi-language app?
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
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?
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;
});
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 :)
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.
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:
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?
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
.
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
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)?
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.
Syntactic sugar.
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?
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!
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:
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.
Currently flatObject()
is only used when receiving translation data asynchronously. Just for consistency this:
$translateProvider.translations({
component: {
foo: {
bar: 'label'
}
}
});
Should also work.
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 !
...and let the app know which language to use?
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.
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.
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!
Making installation of ngTranslate as simple as possible, a registered bower package would be great.
Because we want to save key strokes!
Clean demos for different examples.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.