Deploying substitution using AngularJS

Question

I am still learning AngularJS and wondering about their taste for dependency injection. For example, I have a DataProcessor service that has a processData method that takes a uri parameter, and it needs to read this data (which can be xml, json, etc.), and then perform some actions on the topic. The DataProcessor constructor accepts an implementation of the DataReader interface, which knows how to read a specific file type. Here are some examples of services I'm talking about:

 // implementations of the DataReader interface myApp.service('XmlDataReader', function() { this.readData = function(uri) { // read xml data from uri } }]); myApp.service('JsonDataReader', function() { this.readData = function(uri) { // read json data from uri } }]); // data processing service that takes in an implementation of a DataReader myApp.service('DataProcessor', ['DataReader', function(DataReader) { this.processData = function(uri) { var readData = DataReader.readData(uri); // process data and return it } }]); 

From the usual perspective of dependency injection, a specific DataReader type can be passed to the DataProcessor and used like this:

 var dataProcessor = new DataProcessor(new JsonDataReader()); var processedData = dataProcessor.processData('dataz.json'); 

What is the AngularJS way?

Answer 1

This is a good article on this topic http://phonegap-tips.com/articles/conditional-dependency-injection-with-angularjs.html

Answer 2

Do something like this:

 myApp.service('DataProcessor', ['$injector', 'valueRecipeOfTheServicename', function($injector, valueRecipeOfTheServicename) { this.processData = function(uri) { var service = $injector.get(valueRecipeOfTheServicename); // process data and return it } }]); 

$ injetcor.get () gets the service

Answer 3

Based on the Noypi Gilas answer , I start the controller with the service name and retrieve it through $ injetcor.get ():

 myApp.service('DataProcessor', ['$injector', function($injector) { var service; $scope.init = function (serviceName) { service = $injector.get(serviceName); } this.processData = function(uri) { // use the service ... } }]); 

Answer 4

Because of how DI works, you don’t need to instantiate your services, ever really. What you do is that you enter the services you need into your controller, and it should just work. In the above case, your controller may be defined as:

 var app = angular.module('App', ['DataProcessor']); function MyController($scope, DataProcessor) { var uri = ''; DataProcessor.processData(uri); } 

The only thing you need to do is make sure that “Application” is the name specified in the “ng-app” directive and make sure your page contains JS files with “DataProcessor” before you enable the angular application module (technically they can be defined in one file). Hope this helps!

Edit

By the way, if you need to minimize - this is how you define the controller:

 var app = angular.module('App', ['DataProcessor']); // if you need to minify: var MyController = ['$scope', 'DataProcessor', function($scope, DataProcessor) { var uri = ''; DataProcessor.processData(uri); } ]; 

Additional offers

My understanding of the service at the moment is that it is used to share data or code between controllers. If this data processing is specific to this controller, you can simply transfer the "ProcessData" implementation directly to your controller. Sometimes such changes may be easier than processing data in a service. If you process data in a service, you can still write that data back to the area. In this case, you can pass $ scope as a parameter to the service procedure. Since I don’t know too much about your use case, just accept these recommendations with salt. Good luck