javascript - AngularJS 意外请求 ngmock

Question

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

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

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

我需要一些帮助来获取正确的 url 并通过 id 获取详细 View 。显然，下面的代码可以工作，因为 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'
    })

应用程序运行:这是定义我的模拟后端的地方

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

要了解更多详细信息，请从 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 。然后，对于每个捕获组(即 ( ) block 内的内容)，您可以将其存储在一个变量中，该变量将传递给 params 对象中的回调。

因此，对于一个有效的示例，请查看 this plunker 。附带说明一下，旧版本的 Angular-Mocks 似乎不支持此功能，因为我收到错误消息 carId 未为 Angular v1.2.23 定义