AngularJS - Consuming REST API with Restangular in

问题:

I understand how to use Restangular in a controller, however my thoughts are that Restangular is essentially an ORM on steroids.

The ORM shouldn't have any knowledge of the state of the application. That is the job of the controller.

I also want to re-use queries to the ORM, and as such, I believe that Restangular should be used inside a service.

My problem is that I am a js / angularjs and restangular noob, having only about 2-3 months exp with anything front-end.

My Controllers:

app.controller('AdminSupplierIndexController', 
    ['$scope', '$stateParams', '$state', 'Supplier', 
    function ($scope, $stateParams, $state, Supplier) {


        $state.reload();

        Supplier.getAll.then(function (suppliers) {
            $scope.suppliers = suppliers;
        });
}]);

app.controller('AdminSupplierDetailController', 
    ['$scope', '$stateParams', 'Supplier', 
    function ($scope, $stateParams, Supplier) {

        Supplier.getOne({ supplierId : $stateParams.supplierID}).then(function(supplier) {
            $scope.supplier = supplier;
        });
}]);

My Factory

app.factory('Supplier', ['Restangular', function (Restangular) {
    return {
        getAll: Restangular.all('supplier').getList(),
        getOne: Restangular.one('supplier', supplierId).get()
    };
}]);

My Supplier.getAll method works fine - I can list all the suppliers from the Supplier factory. My problem is with my Supplier.getOne method.

Question 1: How do I inject the supplierId into the factory? I am getting ReferenceError: supplierId is not defined Question 2: Am I trying to over-engineer things considering that I would have to create individual methods for C-R-U-D for every single factory when these methods are already provided by Restangular?

回答1:

I know this is old, but an alternate way would just be to wrap it within a function. This way, you can keep any other logic within the service/method.

app.factory('Supplier', ['Restangular', function (Restangular) {
  return {
    getAll: Restangular.all('supplier').getList(),
    getOne: function(supplierId) {
      return Restangular.one('supplier', supplierId).get()
    }
  };
}]);

回答2:

Found the solution in https://github.com/mgonto/restangular#decoupled-restangular-service

Essentially, the way I have solved this problem is as follows:

app.js

$stateProvider

            ...

    .state('admin.supplier', {
        url : "/supplier",
        templateUrl : 'templates/admin/supplier/index.html',
        controller: "AdminSupplierIndexController",
        resolve: {
            suppliers: ['Supplier', function(Supplier) {
                return Supplier.getList();
            }]
        }
    })
    .state('admin.supplier.detail', {
        url : "/:supplierId",
        templateUrl : "templates/admin/supplier/detail.html",
        controller: "AdminSupplierDetailController",
        resolve: {
            supplier : ['Supplier', '$stateParams', function(Supplier, $stateParams) {
                return Supplier.one($stateParams.supplierId).get();
            }]
        }
    })
            ...

Supplier.js

app.factory('Supplier', ['Restangular', function(Restangular) {
    return Restangular.service('supplier');
}]);

SupplierControllers.js

app.controller('AdminSupplierIndexController', ['$scope', '$stateParams', '$state', 'suppliers', 
    function ($scope, $stateParams, $state, suppliers) {

        $state.reload();

        $scope.suppliers = suppliers;
}]);

app.controller('AdminSupplierDetailController', ['$scope', 'supplier', 
    function ($scope, supplier) {

        $scope.supplier = supplier;
}]);