Understanding the inner workings of Dependency Injection with AngularJS modules has sparked an idea in my mind. I thought about leveraging this concept to switch between different modules based on the environment of the application.
For instance, I aim to create a solution that can function on both mobile devices (via Phonegap) and regular desktop browsers.
There is a particular service function I intend to utilize for data access. On the device, I prefer it to query the local database directly. However, for the desktop browser version, I want it to interact with a web service.
To illustrate, I plan to have 2 services that are interchangeable:
angular.module('myDataServiceLocalStorage', [])
.factory('dataSrv', [function () {
return {
getOrders: function () {
// retrieve data from local database
}
};
} ])
;
angular.module('myDataServiceWebService', [])
.factory('dataSrv', [function () {
return {
getOrders: function () {
// fetch data from web service
}
};
} ])
;
In my Angular controllers, I could inject either 'myDataServiceLocalStorage' or 'myDataServiceWebService' to access the getOrders function. But is there a more efficient way to configure this so I can easily switch between them across all controllers?
I'm not necessarily looking for an automatic environment detection mechanism. Instead, I wonder if there's a method to avoid manual module references every time I prepare to deploy the project.
I considered working with providers, but I'm uncertain since their primary role seems to involve modifying existing services before instantiation.
Is achieving such functionality even feasible?