1

GET /#/car/view/0在 0 是:carId.

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

我无法弄清楚我在获取详细视图时做错了什么

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

编码:

应用程序.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, {} ];
});

});

汽车服务.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) {

    });
   }
 }]);

汽车清单.html

<tr ng-repeat=“car in cars track by $index">
        <td>{{$index}}</td>
        <td><a href=“/#/car/view/{{car.id}}”&gt;{{car.id}}</a></td>
        <td>{{car.name}}</td>
        <td>edit</td>
</tr>
4

1 回答 1

0

的 url$httpBackend.whenGET要么是 a stringregex要么是返回 true 或 false 的函数。

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

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

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

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

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

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

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

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

因此,对于一个工作示例,请看一下这个 plunker。附带说明一下,旧版本的 angular-mocks 似乎不支持此功能,因为我收到了一个carId未为 angular v1.2.23 定义的错误

于 2016-06-13T16:24:19.773 回答