javascript - 将环境细节注入 AngularJS 控制器

Question

让我们以AngularJS 教程中的例子为例

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

   $scope.orderProp = 'age';
}

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

现在，假设我不想对 url 进行硬编码，而是'phones/phones.json'更喜欢托管此控制器的页面来注入它，那么在 Angular JS 中做同样事情的正确方法应该是什么？

Answer 1

有很多方法可以做到这一点......最简单的方法就是使用$window，因此您将注入 $window 服务，而这基本上只是注入的全局 $window 。然后你可以注册这些路径window.path = 'whatever.json';，你会没事的：

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

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

   $scope.orderProp = 'age';
}

一种更高级的方法是创建一个包含您注入应用程序的服务的模块，在这种情况下，每个页面都有自己的模块：

 //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';
});

当然，您可以在两者之间做任何事情。我建议采用最易于维护且易于测试的路径。