AngularJS控制器如何不通过构造参数获取$http以通过Karma测试

嘿，作为AngularJS新手搞TDD确实容易绕晕，我帮你梳理清楚问题所在，直接给你能通过测试的控制器代码，再解释为什么这么写：

正确的控制器代码 #

function CertificateController($http, $routeParams) {
    var vm = this;
    // 用$http.get简化写法，也可以保留你原来的配置对象写法
    $http.get('/api/certificates/' + $routeParams.id)
        .then(function(response) {
            // 关键：$http返回的是响应对象，要取data属性赋值给vm.data
            vm.data = response.data;
        });
}

// 推荐显式声明依赖，防止代码压缩时DI出错
CertificateController.$inject = ['$http', '$routeParams'];

为什么这样写能通过测试？ #

• 关于$http的注入：你之前误以为测试里没传$http就不能注入，其实完全不是！测试代码里已经通过$injector.get('$http')初始化了$http服务，Angular的DI系统会自动帮控制器找到这个依赖，不需要在createController的局部参数里特意传递。测试里传的$rootScope、$scope只是局部覆盖的依赖，不影响其他服务的正常注入。
• 响应数据的处理：你之前的代码里可能没注意到，$http的then回调拿到的不是直接的JSON数据，而是一个包含data、status等属性的响应对象。测试期望vm.data等于后端返回的证书对象，所以必须把response.data赋值给它。
• 关于$rootScope和$scope：测试里虽然传递了这两个参数，但如果你的控制器用不到它们，完全不用注入——Angular会自动忽略那些控制器没声明的局部依赖，不会出问题。

如果你非要从$rootScope获取$http（不推荐） #

虽然直接注入是最佳实践，但如果出于某种特殊需求要从$rootScope拿$http，可以这样做（但真心不建议，耦合度太高）：

function CertificateController($rootScope, $routeParams) {
    var vm = this;
    // 从$rootScope的注入器里获取$http
    var $http = $rootScope.$injector.get('$http');
    $http.get('/api/certificates/' + $routeParams.id)
        .then(function(response) {
            vm.data = response.data;
        });
}
CertificateController.$inject = ['$rootScope', '$routeParams'];

总之，第一种直接注入$http的写法是Angular的标准用法，代码更清晰易维护，完全符合测试的要求。

内容的提问来源于stack exchange，提问作者Galia G