Inject environment details into AngularJS controller

angularjs, javascript

Solution

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.

Problem

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?

Original source