CODEWITHSUNDEEP
javascriptangularjstypescriptinversion-of-control
Amir Popovich
Amir Popovich

Reputation: 29846

IOC in AngularJS (1.x) - How can I achieve?

I'm looking for some way to add IOC to my angularjs application.

My app is a multi tenant app and I need to use different services for different tenants with the same registration name.

I'm using TypeScript as well and it works well with using concrete types over interfaces.

My main problem is how can I decide how to register the correct service to my application.

This is an example:

var app = angular.module('app',[]);

// common registrations
app.service('commonService1', commonServiceFunction1);
app.service('commonService2', commonServiceFunction2);
app.service('commonService3', commonServiceFunction3);
app.service('commonService4', commonServiceFunction4);

// here I want to register the same service name with a different implementation
app.service('serviceName', serviceOneFunction); // sometimes I will need this service
app.service('serviceName', serviceTwoFunction); // sometimes I will need this service

Things I thought about:

  1. Add some logic and download the correct js files per source - Function names will stay the same and I will need to figure out a way to provide the correct js file that includes the correct functions.

  2. Override the registrations (e.g. register the common service and then override the registration with a specific implementation).

Both solutions ugly and not scalable to me.

I would like to have a IOC container or some other solution that is a bit more nice and scalable.

Upvotes: 0

Views: 144

Answers (2)

Ruben Nagoga
Ruben Nagoga

Reputation: 2218

If I have understood question correct, you can register services(which are actually providers) as provider which you configure at angular configuration step. So, it may look like this:

var app = angular.module('app',[]);

// common registrations
app.service('commonService1', commonServiceFunction1);
app.service('commonService2', commonServiceFunction2);
app.service('commonService3', commonServiceFunction3);
app.service('commonService4', commonServiceFunction4);

app.provider('serviceName', function ServiceNameProvider() {
    var service = DefaultService;

    this.setService = function(newService) {
        service = newService
    }

    this.$get = [function() {
        return service;
    }];
});

app.config(["serviceNameProvider", function(serviceNameProvider) {  
    if(someCondition) {
        serviceNameProvider.setService(ServiceImpl1);
    } else {
        serviceNameProvider.setService(ServiceImpl2);
    } 
}]);

Services, factory are just syntactic sugar over provider. You can determine your service function at configuration stage of angular. ServiceImpl1, ServiceImpl2 are just functions but you can use dependency injection there as they will be called by provider with $injector.invoke. Read about providers

Upvotes: 1

Vignesh Sn
Vignesh Sn

Reputation: 120

Hope this will help you. Try Using angular factory. 

angular.module('app').factory('tenantService', function() {
  var tenantService = undefined;

  if(tenantType == "1"){
     tenantService = new TenantService1();
  } else if(tenantType == "2"){
     tenantService = new TenantService2();
  } else {
     tenantService = new TenantDefService();
  }
  return tenantService;
});

Upvotes: 0

Related Questions