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

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

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：

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

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

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

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

因此，查看this plunker 的工作示例。附带说明一下，旧版本的 angular-mocks 似乎不支持此功能，因为我收到一个错误：carId 没有为 angular v1.2.23 定义