AngularJS, service which merges 2 resources

Question

I am working with AngularJS framework (noobie), and I am trying to develop a service String which has to merge 2 resources. I mean merge the result (json) of 2 requests:

string/:stringId.json
string-'+language+'/:stringId.json

It works great when string-'+language+'/:stringId.json exists. But when is doesn't exist an error 404 is displayed in the console as I expected but the return of String.get(...) is empty.

Service.js

angular.module(...)
.value('Language', 'fr')
.factory('String', ['$resource', 'Language',
    function($resource, language){
        return jQuery.extend(
            $resource('string/:stringId.json'),
            $resource('string-'+language+'/:stringId.json')
        );
    }])

Controllers.js

angular.module('exBusiApp.controllers', [])

.controller('LayoutCtrl', ['$scope', 'String',
    function($scope, String, version) {
        $scope.string = String.get({stringId: "layout"});
    }])

What I would like : in my controller call a service which return strings needed (stringId parameter) in the current language (the controller doesn't have to matter about language, service take care of that). SO to do that I need a Services which merge the result of 2 json files (on for default strings and and other for specific language, the default is used if some string in good language json are missing). So that my idea to merge the 2 resources.

And it works well when the 2 files exist. Ex : en {hello : "hello, mistake : "mistake"} fr {hello : "bonjour"} the view is able to display bonjour and mistake (as mistake is not defined in french file)

If someone has an idea, would be grateful.

Slightly off topic, but it looks like you should read: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 — TheHippo, Nov 25 '13 at 18:08

score 2 · Accepted Answer · edited Nov 26 '13 at 01:23

You can do this easier without $resource:

angular.module(...)
.value('Language', 'fr')
.factory('String', ['$http', '$q', 'Language', function($http, $q, Language){
    return {
        get: function(stringId){
            var deferred = $q.defer(),
                intermediate = $q.defer(),
                generic = $http.get('string/' + stringId + '.json'),
                specific = $http.get('string-' + Language + '/' + stringId + '.json');

            specific.then(function(data) { intermediate.resolve(data); }, // Success
                function() { intermediate.resolve({}); });       // Error

            $q.all([generic, intermediate.promise]).then(function(results) {
                deferred.resolve(jQuery.extend(results[0].data, results[1].data));
            });

            return deferred.promise;
        }
    }
}]);

This uses plain $http with two promises. To allow the first request to fail, it resolves another (intermediate) promise, which always succeeds.

The intermediate promise and the second request's promise are then resolved, combined and the resulting new promise is resolved with the result in the end. You can use it in your controller like this:

angular.module('exBusiApp.controllers', [])

.controller('LayoutCtrl', ['$scope', 'String',
    function($scope, String, version) {
        $scope.string = "";

        String.get("layout").then(function(result) {
          $scope.string = result;
        });
    }]);

Do you only want to retrieve data from the server (using `String.get`)? — Sammy S., Nov 25 '13 at 18:41
Yes, i use get resource method to pass the parameter which will be used in the resources url template. — Nicolas, Nov 25 '13 at 18:45
Whoops, forgot to return the service object. If it works for you, please consider marking the answer correct. — Sammy S., Nov 25 '13 at 19:07
No improvement still get the same error if file doesn't exist. — Nicolas, Nov 25 '13 at 19:19
OK that's working even if that's seems complicated to just do a request. Will read how $q works. Thanks — Nicolas, Nov 26 '13 at 01:24

AngularJS, service which merges 2 resources

1 Answers1