AngularJS pass service name into state as variable

Question

I have various services that contain data and single state from where I resolve data from the service in order to avoid multiple sates. My problem is that I can't figure out how to pass/retrieve service name into state depending on item. Here is my sample code to get an idea:

This is my single state, it serves to construct the url and resolve data from specific service, the problem is that I need to find a way to pass a service name here just like :itemId. I know that service is an object so I probably can't just save its relative name like ID inside each item, but what could be a solution? Here are my codes:

 .state('single', {    
            url: '/:itemUrl/:itemId',
            templateUrl: 'templates/single.html',
            controller:'singleCtrl',
            resolve: {
                item: function($stateParams, data1Service) {                            
                    return data1Service.getItem($stateParams.itemId);               
                }
            }
        });

These are my various services where I hold data:

app.service('data1Service', function($q, $rootScope, $filter, $translate) {     

$translate = $filter('translate');

return {
    items: [{        
        id: '1',        
        title:$translate('TITLE'),
        lang:$translate('LANG'),        
        price:$translate('PRICE'),
        serviceName: 'data1Service' //I thought maybe I could save service name like that and then retrieve it somehow without loosing data reference.
      }],
    getItems: function() {
      return this.items;
    },
    getItem: function(itemId) {
      var dfd = $q.defer();
      this.items.forEach(function(item) {
        if (item.id === itemId) dfd.resolve(item);
      });

      return dfd.promise;
    }

 }; 
});

Another one, etc:

app.service('data2Service', function($q, $rootScope, $filter, $translate) {     

    $translate = $filter('translate');

    return {
        items: [{        
            id: '1',        
            title:$translate('TITLE'),
            lang:$translate('LANG'),        
            price:$translate('PRICE')
          }],
       ......

Thank you for any advice.

you can use $injector to get service by name: var data1Service= $injector.get('data1Service'); But the question is - what r u going to do with this service? If u have like 5 services with exactly same methods - may be it is better to make 1 service with additional parameter. — Petr Averyanov, Mar 30 '15 at 12:35
Resolves only work on controllers. http://stackoverflow.com/questions/27891121/angularjs-ui-router-using-resolved-dependency-in-factory-service — user3722785, Mar 30 '15 at 12:36
@PetrAveryanov you are absolutely right, the only thing that changes inside service is an array of data items, but I could not find how to pass a parameter into service so I just started to duplicate the service. If I got you right, you suggesting to keep one service and pass array inside it, not sure how. — devjs11, Mar 30 '15 at 12:40

score 0 · Answer 1 · answered Mar 30 '15 at 13:06

I decided to implement a switch by detecting the url, probably not the best solution but it works. I know I should just use one service and somehow to pass data array into service but have no idea how to do that.

 .state('single', {    
            url: '/:itemUrl/:itemId',
            templateUrl: 'templates/single.html',
            controller:'singleCtrl',
            resolve: {
                item: function($stateParams, data1Service, data2Service) {                   
switch($stateParams.itemUrl){
                    case 'val1':
                        return data1Service.getItem($stateParams.itemId);
                    break;

                    case 'val2':
                        return data2Service.getItem($stateParams.itemId);
                    break;                      
                }         

                }
            }
        });

app.service('cumulativeService', function(data1Service, data2Service) { return { 'val1' : data1Service, 'val2' : data2Service}}) }); — Petr Averyanov, Mar 30 '15 at 13:09

score 0 · Answer 2 · answered Mar 30 '15 at 13:10

0

whatever you are trying to solve, you better find a better alternative. however you can achieve this by using $injector

url: '/:serviceName/:itemId'
...
var service = $injector.get($stateParams.serviceName);
service.getItem()....

answered Mar 30 '15 at 13:10

bahadir

709
1
11
28

AngularJS pass service name into state as variable

2 Answers2