AngularJSの予期せぬ要求ngmock

Question

GET /#/car/view/0で予期しない要求エラーが発生します.0は:carIdです。

これは、ngMockバックエンドで基本的な角鮮明なアプリケーション向けです。 $httpBackend.whenGET(carUrl)が働き、すべての車のリストを返します。 addCar()も機能します。

私は私が正しいURLの取得とIDで詳細なビューを取得するといくつかの助けを必要と詳細ビュー

を得ると間違ってやっているかを把握することはできません。明らかに、URLは静的であるため、以下のコードは動作しますが、ID変数を持つURLを取得する正しい方法を見つけることができません。

thecode：

App.js

ルーティング：

.when('/car', { 
     templateUrl: 'pages/car/car.html' 

    }) 
    .when('/car/view/:carId', { 
     templateUrl: 'pages/car/carView.html', 
     controller: 'carViewCtrl', 
     controllerAs: 'ctrl' 
    }) 
    .when('/car/addCar', { 
     templateUrl: 'pages/car/carAdd.html' 
    }) 

app.run：私のモックバックエンドが定義されている これがされ

window.app.run(function($httpBackend) { 
var cars = [ 
    { 
    id: 0, 
    name: ‘car0’, 
    address: 'adress0', 
    tel: 'tel0', 
    email: 'email0'}, 
    { 
    id: 1, 
    name: ‘car1’, 
    address: 'adress1', 
    tel: 'tel1', 
    email: 'email1' 
    }]; 

var carUrl = “/#/car”; 

//this works and gives back the list of all cars 
$httpBackend.whenGET(carUrl).respond(function(method,url,data) { 
    return [200, cars, {}]; 
}); 

//this is where it goes wrong I think 
$httpBackend.whenGET(‘/#/car/view/:carId').respond(function(method, url, data){ 
    return [200, cars, {} ]; 
}); 

}); 

CarService.js

window.app.service(‘CarService', ['HTTPService', '$q', '$http', function (HTTPService, $q, $http) { 
'use strict'; 

cars = []; 
this.showDetails = function (carId){ 
    var deferred = $q.defer(); 

    HTTPService.get('/car/view/' + carId).then(function resolve(response){ 

    deferred.resolve(response.data); 

    }, function reject(response){ 
     deferred.reject(response); 
    }); 

    return deferred.promise; 
}; 

carView.js

window.app.controller(‘carViewCtrl', ['$scope', '$routeParams', '$location', ‘CarService', function ($scope, $routeParams, $location, CarService) { 
'use strict'; 

$scope.carId = $routeParams.carId; 
initCar($scope.carId); 

function initCar(carId) { 
    CarService.showDetails(carId).then(function success(car) { 
    $scope.car = car; 
    }, function error(response) { 

    }); 
    } 
}]); 

carList.html

<tr ng-repeat=“car in cars track by $index"> 
     <td>{{$index}}</td> 
     <td><a href=“/#/car/view/{{car.id}}”>{{car.id}}</a></td> 
     <td>{{car.name}}</td> 
     <td>edit</td> 
</tr> 

Answer 1

$httpBackend.whenGETのURLはstring、regexまたはFUNCのいずれかでありますtrueまたはfalseを返します。だから、

だけ一致しません文字列を提供している、あなたはあなたが並ぶのparamsを指定する必要が正規表現でキャプチャしたデータにアクセスするような/\/#\/car\/view\/(.+)/

にマッチする正規表現を指定する必要がありますdocsから、より詳細に入るためにあなたのキャプチャグループ

$httpBackend.whenGET(/\/#\/car\/view\/(.+)/, undefined, undefined, 
    ['carID']) 
.respond(function(method, url, data, headers, params) { 
    return [200, {myReponse: 'this worked'} 
}); 

：

に一致する正規表現パラメータ10期待値や定義が正規表現を使用してURLと一致する場合は、params引数を使用してキーの配列を指定できます。配列の各キーのインデックスは、正規表現内のグループのインデックスと一致します。

コールバックのparamsオブジェクトは、正規表現内の対応するグループの値を保持するこれらのキーを持つプロパティを持つようになりました。

これは、whenとexpectのショートカット方法にも当てはまります。これが何を意味するのか

はexpectまたはwhen（のようなwhenGET）メソッドのためにあなたがURLと一致する正規表現を使用することができるということです。次に、()ブロックの内側にあるキャプチャグループごとに、paramsオブジェクトのコールバックに渡される変数に格納することができます。

したがって、実際の例ではthis plunkerをご覧ください。ちょっとしたお話として、古いバージョンの角度モックは、角度v1.2.23に対してcarIdが定義されていないというエラーが発生したため、この機能をサポートしていないようです。