Choosing a data source using a provider during the config stage in AngularJS

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body data-ng-app="angularApp">
    <h4>Choosing a Data Source using a Provider during the config stage in AngularJS.</h4>
    <div data-ng-controller="DataController as dataCtrl">
      We are using: <span style="font-weight: bold;" ng-bind="dataCtrl.data.name"></span><br/>
      And the value is: "<span style="font-weight: bold;"  ng-bind="dataCtrl.data.value"></span>"
    </div>
    <h1></h1>
    <div>
        To switch to the other service, replace the line in the angularApp.config() method from:<br/>
        dataSourceProvider.setEnvironment('chrome');<br/>
        to<br/>
        dataSourceProvider.setEnvironment('mobile');<br/>
        And your dataService will be using the mobile factory automatically instead
     </div>
     <h1></h1>
     <div>
          This way you can use mutiple sources of data depending on where your app is running, for example mobile vs desktop vs chrome app. You can reuse your controllers and views for all the different environments, just configure the data provider on start.
     </div>
  </body>

</html>

// The Angular App
var angularApp = angular.module('angularApp', []);


// The provider
angularApp.provider('dataSource', function() {
     var environment = 'chrome'; // I know this is ridiculous
     
     this.setEnvironment = function(value) {
          environment = value;
     };

     this.$get = ['chromeAppFactory', 'mobileAppFactory', function (chromeAppFactory, mobileAppFactory) {
          // environment !== 'chrome' ... yes, don't judge!
          return environment !== 'chrome' ? mobileAppFactory : chromeAppFactory; 
     }];
});

// The first factory
angularApp.factory('chromeAppFactory', [function() {
     // Private methods to access the data 
     var chromeAppGet = function() {
          return { name: 'chrome app service', value: 'angular is indeed cool' };
     };
     
     // Public methods, they should have the same signature in both services
     return {
          get: chromeAppGet
     }
}]);

// The second factory
angularApp.factory('mobileAppFactory', [function() {
     // Private methods to access the data 
     var mobileAppGet = function() {
          return { name: 'mobile app service', value: 'cool angular indeed is' };
     };
     
     // Public methods, they should have the same signature in both services
     return {
          get: mobileAppGet
     }
}]);

// The data service used in the controllers
angularApp.factory('dataService', ['dataSource', function(dataSource) {
     // Add some business logic in here, massage the data if you want
     // or extend the factory object before returning it to the controllers.

     // Return the factory, the providers's $get() method is invoked here.
     return dataSource;
}]);




// The configuration stage 
angularApp.config(['dataSourceProvider', function(dataSourceProvider) {
     dataSourceProvider.setEnvironment('chrome');
}]);

// The controller
angularApp.controller('DataController', ['dataService', function(dataService) {
     this.data = dataService.get();
     // dataService.get() calls either chromeAppGet() or mobileapGet() 
     // depending on which one we selected during config()
}]);

/* Styles go here */