AngularJS 意外请求 ngmock

Question

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

它适用于 ngMock 后端上的基本 angular 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 或函数 returns true 或 false。

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

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

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

要了解更多详情，来自 docs:

Regex parameter matching If an expectation or definition uses a regex to match the URL, you can provide an array of keys via a params argument. The index of each key in the array will match the index of a group in the regex.

The params object in the callback will now have properties with these keys, which hold the value of the corresponding group in the regex.

This also applies to the when and expect shortcut methods.

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

因此，对于工作示例，请查看 this plunker。作为旁注，似乎旧版本的 angular-mocks 不支持此功能，因为我收到一个错误，即 carId 未为 angular v1.2.23[=23 定义=]

AngularJS 意外请求 ngmock

AngularJS unexpected request ngmock

javascript

angularjs

httpbackend

angularjs-ngmock