Label and resources

[sondreb]

Does the Angular WinJS support the resource strings framework that is part of WinJS?

I have .resjson files for multiple languages in a project and migrating from this:

data-win-control="WinJS.UI.NavBarCommand" data-win-res="{winControl: { label: '{{item.label}}'}}"

Into something like this:

<win-split-view-command label="'menuHome'"

The example above simply renders menuHome, and not the resource text value from the resjson file.

Is there a concept of "res" (resources) in Angular WinJS?

[xdvarpunen]

Hi @sondreb If you look at SplitViewCommand definition in angular-winjs.js, attributes that are supported are defined in api-variable; icon,label,tooltip and on-invoked.

exists("SplitViewCommand") && module.directive("winSplitViewCommand", function () {
        var api = {
            icon: BINDING_property,
            label: BINDING_property,
            tooltip: BINDING_property,
            onInvoked: BINDING_event,
        };
        return {
            restrict: "E",
            replace: true,
            scope: getScopeForAPI(api),
            template: "<DIV ng-transclude='true'></DIV>",
            transclude: true,
            link: function ($scope, elements) {
                initializeControl($scope, elements[0], WinJS.UI.SplitViewCommand, api);
            }
        };
    });

data-win-res can be done programmatically though: http://www.codefoster.com/resjs/. Localization is possible to set after you get access to winControl.

Rightway/workaround is to utilize AngularJS builtin localization. Basically you set parameter variable into scope and let AngularJS localization to do the rest.

Some helpful links about AngularJS localization : https://docs.angularjs.org/guide/i18n https://github.com/doshprompt/angular-localization https://alicoding.com/how-to-localized-angularjs-app/

-XDVarpunen

[sondreb]

Thanks!

Ended up doing the following, where the first jQuery load downloads the angular-local_{{language}}.js, then the second getJSON downloads the resources.resjson.

$.getScript(filename, function () {
    $.getJSON(filenameJson, function (data) {

        // Set the global value for our localized strings.
        window.strings = data;

        angular.element(document).ready(function () {
            angular.bootstrap(document, ["app"]);
        });

    });
});

This is a good way to load dynamic locale Angular files, it's important that those modules are fully loaded before the bootstrap of the app, or dates/numbers won't translate properly.

Then I wrote a provider and a filter that simply returns window.strings :+1: