AngularJS意外请求ngmock

Question

我在GET /#/car/view/0上收到一个意外的请求错误，其中0是:carId。

它用于ngMock后端上的基本角度crud应用程序。$httpBackend.whenGET(carUrl)工作并返回所有汽车的列表。addCar()也起作用。

我不知道我在获取详细视图时做错了什么

我需要一些帮助来获得正确的url，并通过id获得详细的视图。显然，下面的代码是有效的，因为url是静态的，但我找不到正确的方法来获得带有id变量的url。

代码：

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或返回true或false的函数。

所以你只提供了一个不匹配的字符串，你需要提供一个匹配的正则表达式，比如//#/car/view/(.+)/

要访问您用正则表达式捕获的数据，您需要指定与捕获组一致的参数

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

要了解更多详细信息，请参阅文档：

Regex参数匹配如果期望值或定义使用正则表达式来匹配URL，则可以通过params参数提供键数组。数组中每个键的索引将与正则表达式中某个组的索引相匹配。

回调中的params对象现在将具有带有这些键的属性，这些键在正则表达式中保存相应组的值。

这也适用于when和expect快捷方式。

这意味着对于expect或when(如whenGET)方法，可以使用正则表达式来匹配url。然后，对于( )块中的每个捕获组，您可以将其存储在一个变量中，该变量将传递给params对象中的回调。

所以，作为一个工作的例子，看看这个plunker。顺便说一句，旧版本的angular mock似乎不支持此功能，因为我得到了一个错误，即carId没有为angular v1.2.23 定义