lavinjj / angularjs-localizationservice Goto Github PK

First of all thanks for this awesome module. I really like the idea of using directives instead of filters to increase performance....

Currently it's not possible to have HTML as part of the localised copy because the content is being set as text on the element.

It would be really handy to have this functionality to force line breaks etc. e.g.:

   {
        "key": "component.title",
        "value": "my title and this</br>goes onto the second line",
        "description": ""
    }

The fix is as simple as using element.html() instead of element.text() when setting source values...

Do you see any issues with that?

Thanks for your post, it's amazing.

And I have one question, that is it seems 'localize' service is always running

it keep log out.

I put one line in localize.js, getLocalizedString function

console.log('run getLocalizedString');

the entire function is like so:

// checks the dictionary for a localized resource string
getLocalizedString: function(value) {
    // default the result to an empty string
    var result = '';

    // make sure the dictionary has valid data
    if ((localize.dictionary !== []) && (localize.dictionary.length > 0)) {
        // use the filter service to only return those entries which match the value
        // and only take the first result
        var entry = $filter('filter')(localize.dictionary, function(element) {
                return element.key === value;
            }
        )[0];

        console.log('run getLocalizedString');

        // set the result
        result = entry.value;
    }
    // return the value to the call
    return result;
}

Hi,

During module initialization, the langage value is determined by
language:$window.navigator.userLanguage || $window.navigator.language

This may not work on earlier version of Android browsers.

I am using the following snippet for language detection.

And I think it is better to use normalized language string for resource loading. I have seen language string returned by browsers in various format: "en-US", "en-us", "en_us", "en", etc. I am actually defining a new angular service to normalize the string, which can be done in the module itself.

var lang, androidLang;
// works for earlier version of Android (2.3.x)
if (navigator && navigator.userAgent && (androidLang = navigator.userAgent.match(/android.*\W(\w\w)-(\w\w)\W/i))) {
    lang = androidLang[1];
} else {
    // works for iOS and Android 4.x
    lang = navigator.userLanguage || navigator.language;
}

I am currently using your service - and wondered if it would be feasible to extend it to include image localization using a similar pattern that you have used to create text localization. I was thinking of creating a directive e.g.i18nImg that looks for a directory structure e.g. /i18n/images/[culturecode] and then loads the appropriate images (defaults to the default directory if the culture does not exist). I could easily write a version myself - but just wondered if it was feasible to extend your service to include this functionality. Do you have any thoughts on this or are there any other ways of doing this?

I can see that we can use {{'_title' | i18n}} for it to be used in html files. What syntax can i use to add the similar label in a js file

Instead of always automatically getting the language from the browser let the user explicitly choose a language via a querystring variable.

Thanks for sharing this fine library!

In my scenario I don't want to get the resources-locale_XX.js files from the server.

I'm including all available localization files in script elements on the page so they are pre-loaded. What I'm having trouble with is telling localize that these files exist.

Currently I have a hackish and horrible solution involving a global variable "dictionaries" which localize.js reads on calls to setLanguage, getting the appropriate dictionary from it using the language parameter. Each localization file adds a dictionary to this global variable:

dictionaries["en-US"] = [{"key": "key1", "value": "value1"}];

This blows. I'd like that each .js localization file could add a dictionary to localize, something like:

localize.addDictionary([{"key": "key1", "value": "value1"}]);

But obviously, this can't be done from a non-Angular context. Do you have any ideas?

Thanks

Fixing getLocalizedString filter to select the first matched object because it returns an array!

getLocalizedString: function(KEY) {
// default the result to an empty string
var result = '';

// make sure the dictionary has valid data
if (localize.resourceFileLoaded) {
    // use the filter service to only return those entries which match the KEY
    // and only take the first result
    var entry = $filter('filter')(localize.dictionary, function(element) {
            return element.key === KEY;
        }
    )[0]; // get the first matched
    // set the result
    result = entry.value;
}
// return the value to the call
return result;

}

I have now been using your code and we will be using it in a production environment shortly.
In general we have not found many issues but due to certain use cases have simplified and modified the framework to fit into our model.
One of our main issues was the default locale - we did not feel it necessary to have this as it does not always represent the locale we wanted to display to the user.
How we resolved this issue was to create a WEB API endpoint where we pass the locale from the browser which then determines the default locale to return to the application. This negates the need for having a default locale and also allows to add certain business rules to determine the locale based on the current locale of the users browser (this could also be included in a local JSON file if required)

e.g if the locale is fr-BE we want the default locale to be fr-FR whereas for en-NZ it should be en-GB.
This also negates the need to return a 404 not found status code as we always assume that the default locale should always exist and therefore is a valid exception case.

Other areas we are reviewing is splitting the locale JS files into smaller functional files - if the application gets quite large - this reduces the number of merge conflicts and also simplifies the translation process - as we can break down into functional areas and make it easier to locate the content.

Thanks.

Hello, i want try to do something like that, but i think that the service don't support it, i want use dynamic data (model) passed by a filter and later translate it.

example:

<span>In the date that you choose 12/11/2013 you will receive the package.</span>

the date '12/11/2013' is a model, so:
<foo ng-model="date"></foo> <span>In the date that you choose { date | date:'medium' } you will receive the package.</span>

how i can use this service to translate this sentence? i have a dynamic value
{ "key": "_Message_", "value": "In the date that you choose {0} you will receive the package." }

but it should be passed by a filter first and later to the i18n filter (like the date change on fly i think that i should use the i18n filter and not the directive)

Thanks

Hey!

Great work on the localization service! One thing: I'm building a multi language website with a lot of forms in it. In these forms I need to set a placeholder tag.

Any idea how to solve this issue? Basically I want to do something like input placeholder="TAG" but looking at the code made me realise switching languages will fail when just replacing the tag.

It would be awesome if there will be something like data-i18n-placeholder="TAG"!

Cheers!

Hi

Nice module! Under what license is https://github.com/lavinjj/angularjs-localizationservice/blob/master/src/localize.js released?

I suggest to change dictionaries extension to .json.

When setting the language with
localize.setLanguage(lang);

and use something like
{{ '2012-09-01' | date:'medium' }}

then the date is not displayed in the prev. set language, but in the 'default' language.

I think that the URL for the default file is wrong, maybe is necessary to remove the first slash in line 71:
'/i18n/resources-locale_default.js'
has to be
'i18n/resources-locale_default.js'

Hello,

First of all awesome js, I have been using in different project, it works perfectly.

For a new project, somehow my customer need IE8 support. (dont ask me why)

It does NOT seems to work with IE8, any idea why ?

Do I need to declare some custom element ?

In Phonegap environment, where file// protocol is used to retrieve resource files, the absolute url does not work

var url = '/i18n/resources-locale_' + localize.language + '.js';

Thanks for the great library. It made providing i18n support to my app very easy.

One feature I suggest is letting the service fall back to the default resource file if a given key/value combination is not in a localized resource file.

I'm developing a desktop app using node-webkit. I'm foreseeing the possibility of some tech-savvy users creating their own localized resource files. It would be great if even if they happened to leave out a key/value combination, the app would still output something other than the missing key or nothing.

Hi everyone,

I know that it's maybe not an issue of the provided localization service, but I couldn't get help elsewhere. [http://codingsmackdown.tv/blog/2012/12/14/localizing-your-angularjs-app/#comments - This site doesn't accept new comments somehow :/ and I didn't manage to get a contact email-address].

I'm just quoting what i tried to post in the comments twice in several days:

"I'm new to Angular and web-development in general.

I'm trying to include this localization feature into my app, but I'm stuck for quite some time now. I think the error in my case occurs in the following code:

var entry = $filter('filter')(localize.dictionary, function(element) {
return element.key === value;
}
)[0];

The dictionary is filled with the whole JSON-file, but the entry variable is set to "undefined" afterwards.

Does someone know whats going on there?

Kind regards from Germany

Nils"

It would be nice, if someone could help. If you think that this is the wrong place for this, don't hesitate to close/delete it ;).

Hi,
maybe I'm missing something:

.filter('i18n', ['localize', function (localize) {
    return function (input) {    
           //when I print
           console.log(localize);
           //I can se whole object with filled dictionary and etc...

          //but when I use method or property e.g.
          console.log(localize.dictionary)
          //I get empty array

          //likewise this returns empty string
           return localize.getLocalizedString(input);            
    };
}])

Other directives works ok.

Finding entries matching a particular localization key uses AngularJS's $filter. However, this filter uses by default substring matching. This can lead to the wrong value being displayed: eg if you have

{
    "key":"addItem",
    "value": "Add item"
},
{
    "key":"add",
    "value": "Add"
}

then if you use the resource key "add", the value for "additem" will always be displayed.
This can be a possible fix when matching:

var entry = $filter('filter')(localize.dictionary,
    function(element) {
        return element.key === value;
    }
)[0];

Obviously, if you have keys defined as in the examples with prefixes and postfixes (eg "somekey"), you won't have this issue and everything is fine.

I am getting data form database using sql server. But translator is on working not dynamically created dom. Rest is working fine.

Hi,

this line of code in the directive for i18nAttr is wrong:

scope.$on('localizeResourcesUpdated', function()

should be:

scope.$on('localizeResourcesUpdates', function()

Not working properly with angular 1.3

In french this is not working properly. I have a word Catégorie in french, but on UI it is coming like Cat�rie . Why so?

Hello there,
we are using angular's i18n for localization in our application and it works fine in IE10 onwards and in other browser, but in IE the text doen't appear, there is no error in console too.
The way we are using the localization in View is by below ways in our application :

1. using expression in html elements : {{'localizedStringKey'|i18n}}
2. using as attribute to html tags: data-i18n="localizedStringKey"

So does that mean i18n is not supported in IE9 or is there any way around to get localization work in IE9 for angular JS application ?