未知的提供者：$ routeParamsProvider

我正在浏览AngularJS PhoneCat tutorial，而当我手动点击它时，应用程序似乎表现正常，其中一个单元测试失败，出现step 8。

使用Karma，我得到了以下控制台输出：

Chrome 42.0.2311 (Windows 7) PhoneCat controllers PhoneDetailCtrl should fetch phone detail FAILED Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams

单元测试文件（controllersSpec.js）的相关部分看起来是这样的：

describe("PhoneCat controllers", function() { 
    describe('PhoneDetailCtrl', function() { 
     var scope, $httpBackend, ctrl; 

     beforeEach(inject(function (_$httpBackend_, $rootScope, $routeParams, $controller) {   
      $httpBackend = _$httpBackend_; 
      $httpBackend.expectGET('phones/xyz').respond({ name: 'phone xyz' }); 
      $routeParams.phoneId = 'xyz'; 
      scope = $rootScope.$new(); 
      ctrl = $controller('PhoneDetailCtrl', { $scope: scope }); 
     })); 
    }); 
});

这个问题似乎涉及到对inject()的调用的函数参数的声明。如果我拿出$ routeParams，那么脚本就会执行。

从阅读一些相关的StackOverflow问题，似乎我可能会错过某处的依赖关系。该karma.conf.js文件的相关部分是这样的：

module.exports = function (config) { 
    config.set({ 
     basePath: '', 
     frameworks: ['jasmine'], 
     files: [ 
      '../lib/angular/angular.js', 
      '../lib/angular/angular-mocks.js', 
      '../lib/angular/angular-route.js', 
      '../app/*.js', 
      'unit/*.js' 
     ], 
     browsers: ['Chrome'], 
     singleRun: false 
    }); 
};

我app.js看起来是这样的：

var phonecatApp = angular.module("phonecatApp", [ 
    "ngRoute", 
    "phonecatControllers"]); 

phonecatApp.config([ 
    "$routeProvider", function($routeProvider) { 
     $routeProvider 
      .when("/phones", { 
       templateUrl: "Scripts/app/partials/phone-list.html", 
       controller: "PhoneListCtrl" 
      }) 
      .when("/phones/:phoneId", { 
       templateUrl: "Scripts/app/partials/phone-detail.html", 
       controller: "PhoneDetailCtrl" 
      }) 
      .otherwise({ 
       redirectTo: "/phones" 
      }); 
    } 
]);

而且controllers.js看起来是这样的：

var phonecatControllers = angular.module("phonecatControllers", []); 

phonecatControllers.controller("PhoneDetailCtrl", ["$scope", "$routeParams", "$http", function ($scope, $routeParams, $http) { 
    $http.get("api/Phones/" + $routeParams.phoneId).success(function (data) { 
     $scope.phone = data; 
    }); 
}]);

正如在顶部提到的，当我在浏览器中点击它时，该应用似乎工作正常，所以我对于单元测试的细节问题感到困惑。

来源

2015-04-29 Malice

就像这种错误经常发生的情况一样，当你看到它时，修复是非常明显的！基本上，controllersSpec.js中有两个函数，一个用于电话列表，另一个用于个人电话的详细信息。因为他们有电话之前 beforeEach(module("phonecatApp"));到beforeEach(inject(function());

，另一方面手机详细测试，缺少此线路的电话清单测试工作的罚款。一旦我将该行移至外部函数，测试就按预期进行。工作controllersSpec.js看起来是这样的：

describe("PhoneCat controllers", function() { 
    // This is the line that was moved. 
    // It existed for PhoneListCtrl but not PhoneDetailCtrl.  
    beforeEach(module("phonecatApp")); 

    describe("PhoneListCtrl", function() { 
     var scope, ctrl, $httpBackend; 

     beforeEach(module("phonecatApp")); 

     beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { 
      // Setup 
     })); 
     // Various tests 
    }); 

    describe('PhoneDetailCtrl', function() { 
     var scope, $httpBackend, ctrl; 

     beforeEach(inject(function (_$httpBackend_, $rootScope, $routeParams, $controller) { 
      // Setup 
     })); 

     // Various tests 
    }); 
});

来源

2015-04-29 16:19:38 Malice

你可以只有一个'beforeEach（注（函数（）......'父描述了这样的瓦尔块：HTTP：//的jsfiddle达网络/ hravc0g6/1 / –

未知的提供者：$ routeParamsProvider

回答

相关问题