javascript - Unknown provider: $routeParamsProvider -

i'm going through angularjs phonecat tutorial , while application seems behave correctly when click through manually, 1 of unit tests failing step 8.

using karma, i'm getting following console output:

chrome 42.0.2311 (windows 7) phonecat controllers phonedetailctrl should fetch phone detail failed error: [$injector:unpr] unknown provider: $routeparamsprovider <- $routeparams

the relevant part of unit test file (controllersspec.js) looks this:

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

the problem seems related declaration of function parameter of call inject(). if take $routeparams out script execute.

from reading related stackoverflow questions seems might missing dependency somewhere. relevant parts of karma.conf.js file this:

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

my app.js looks this:

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"             });     } ]); 

and controllers.js looks this:

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;     }); }]); 

as mentioned @ top, app seems work fine when click through in browser i'm quite confused things breaking down unit tests.

as case these kind of errors, fix pretty obvious when see it! there 2 functions in controllersspec.js, 1 list of phones , 1 individual phone's details. phone list tests working fine because had beforeeach(module("phonecatapp")); before call beforeeach(inject(function ());

the phone detail tests on other hand missing line. once moved line outer function tests passed expected. working controllersspec.js looks this:

describe("phonecat controllers", function () {     // line moved.     // existed phonelistctrl 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     }); });