Question

我在这里使用deployd作为我的服务器。当我输入http://localhost:5500/products时 - 它会产生如下结果：

[{"name":"Apples","category":"Fruit","price":1.2,"id":"1bc7e360530b28fb"},{"name":"Bananas","category":"Fruit","price":2.42,"id":"9c5d8a618181486e"},{"name":"Pears","category":"Fruit","price":2.02,"id":"7c744dfc08ce085b"},{"name":"Tuna","category":"Fish","price":20.45,"id":"d00c7dbc1f0ab937"},{"name":"Salmon","category":"Fish","price":17.93,"id":"80bb9da35d120b0a"},{"name":"Trout","category":"Fish","price":12.93,"id":"81b199043e64681e"}]

但是当我使用ngResource时，我收到的错误为：

获取http://localhost:5500/products/:id 404（未找到）

我没有收到任何数据。这是ngResource模块中的配置。

更新代码

angular.module("promiseApp", ["updatePrice", "ngResource"])
.constant("baseUrl", "http://localhost:5500/products/")
.controller("defaultCtrl", function ($scope, $resource, baseUrl) {

    $scope.displayMode = "list";
    $scope.currentProduct = null;

    $scope.productsResource = $resource(baseUrl+"/products/:id", {id: "@id"}, {create: {method: "POST"}, save: {method: "PUT"}, update: {method: "PUT"}});

    $scope.listProducts = function () {
        $scope.products = $scope.productsResource.query();
    }

    $scope.deleteProduct = function (product) {
        product.$delete().then(function () {
            $scope.products.splice($scope.products.indexOf(product), 1);
        });
        $scope.displayMode = "list";
    }

    $scope.createProduct = function (product) {
        new $scope.productsResource(product).$create().then(function (newProduct) {
            $scope.products.push(newProduct);
            $scope.displayMode = "list";
        });
    }

    $scope.updateProduct = function (product) {
        product.$save();
        $scope.displayMode = "list";
    }

    $scope.editOrCreateProduct = function (product) {
        $scope.currentProduct = product ? product : {};
        $scope.displayMode = "edit";
    }

    $scope.saveEdit = function (product) {
        if (angular.isDefined(product.id)) {
            $scope.updateProduct(product);
        } else {
            $scope.createProduct(product);
        }
    }

    $scope.cancelEdit = function () {
        if ($scope.currentProduct && $scope.createProduct.$get) {
            $scope.currentProduct.$get();
        }
        $scope.currentProduct = {};
        $scope.displayMode = "list";
    }

    $scope.listProducts();
});

我的代码在哪里出错？任何人都纠正我生产正确的配置吗？我正在寻找所有CURD进程需要正常工作。

Answer 1

我通常以不同的方式定义我的控制器。类似的东西：

.controller('thingController', ['$scope', '$resource', function($scope, $resource){
  Thing = $resource("/things/:id", {id: "@id"}, {create: {method: "POST"}, save: {method: "PUT"}, update: {method: "PUT"}});
  $scope.things = Thing.query();
}]);

编辑：所以，试试这个，看看会发生什么：

angular.module("promiseApp", ["updatePrice", "ngResource"])
.controller('productController', ['$scope', '$resource', function($scope, $resource){
  Product = $resource("/products/:id", {id: "@id"}, {create: {method: "POST"}, save: {method: "PUT"}, update: {method: "PUT"}});
  $scope.products = Product.query();
  $scope.updateProduct: function(product){ 
    return $resource('/products/:id', {id: '@id'}, {'update': {method: "PUT"}}).update(product); 
  };
}]);

Answer 2

通常我们在单独的文件中定义实体工厂，如：

实体factory.js：

angular.module('promiseApp') //update
.factory('ProductsEntity', ['$resource', function ($resource) {
    return $resource(
        '/api/products/:id',
        {id: '@id'},
        {
            create: {method: 'POST'},
            update: {method: 'PUT'}
        }
    );
}]);

你在controller.js中的

：

angular.module('promiseApp').controller('AnotherModuleCtrl', ['$scope',...,'ProductsEntity', function(){
    //here we do update by id
    ProductsEntity.update({id: productId}, newProduct, function (res) {
        ...
    });
}]);

Answer 3

Appologies，错误是我的。而不是angular-resource我使用bower安装了ng-resource。导致所有问题。修好了我的朋友们！

`ngResource` - 配置问题以从服务器

3 个答案: