Question

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

这是针对ngMock后端的基本角度crud应用程序。 $httpBackend.whenGET(carUrl)工作并返回所有汽车的列表。 addCar()也有效。

我无法弄清楚我在获取详细视图时遇到了什么问题

我需要一些帮助来获取正确的网址并获取详细的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的网址是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）方法，您可以使用正则表达式来匹配网址。然后对于每个捕获组，它们是( )块内的什么，你可以将它存储在一个变量中，该变量将被传递给params对象中的回调。

因此，对于一个工作示例，请查看this plunker。作为旁注，似乎旧版本的角度模拟不支持此功能，因为我收到了carId没有为angular v1.2.23定义的错误

AngularJS意外请求ngmock

1 个答案: