Inject environment details into AngularJS controller

Question

Inject environment details into AngularJS controller

Let's take the example from AngularJS tutorial

function PhoneListCtrl($scope, $http) {
   $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
   });

   $scope.orderProp = 'age';
}

//PhoneListCtrl.$inject = ['$scope', '$http'];

Now, lets say I don't want to hard code the url 'phones/phones.json' and would prefer the page which hosts this controller to inject it, what should be the right way of doing the same in Angular JS?

javascript
angularjs

Answer 1

There are a lot of ways to do this... the simplest way would just be to use $window, so you'd inject the $window service, and that's basically just the global $window that's been injected. Then you can register those paths as window.path = 'whatever.json'; and you'll be fine:

window.path = 'some/path.json';

function PhoneListCtrl($scope, $http, $window) {
   $http.get($window.path).success(function(data) {
      $scope.phones = data;
   });

   $scope.orderProp = 'age';
}

A more advanced way would be to create a module with a service that you inject into your app, in this case each page would have it's own module:

 //create your module.
 angular.module('configData', [])
   .factory('pathService', function () {
        return {
           path: 'some/path.json'
        };
   });

//then inject it into your app
var app = angular.module('myApp', ['configData']);

app.controller('PhoneListCtrl', function($scope, $http, pathService) {
   $http.get(pathService.path).success(function(data) {
       $scope.phones = data;
   });

   $scope.orderProp = 'age';
});

You can, of course, do anything in between the two. I would suggest taking the path that is the most maintainable while still easy to test.