How to pass data from HTML form fields in a URL query string using $resource in AngularJS?

Question

I am designing UI for a REST based server side application developed using Jersey API . I want to take inputs from HTML form and pass the data as query string parameters to build the REST URL. I went through the AngularJS documentation too but didn't find the answer to my question. I came to know that $resource is used for GET/POST/PUT requests and I know that we can build URL with query strings using $resource . Can anyone guide me on how to pass the query string parameters from form fields?

Answer 1

Create an input field in HTML and button to add data

<div  ng-controller="myCtrl">
 <input ng-model="item.name" />
 <button ng-click="addItem()">Add Item</button>
</div>

Create a Service for calling API

   var myApp = angular.module("myApp",['ngResource'])

   myApp.factory("myService", function ($resource) {
        return $resource(
            "http://localhost/items/:id",
            {id: '@id'},
            {
                update: { method: 'PUT' },
                query: {method: 'GET', isArray: true},
                get: {method: 'GET'}

            }
        )
    })

Create a Controller

   myApp.controller("myCtrl", function ($scope, myService) {
   $scope.Details = myService.get();
   $scope.addItem = function () {
   myService.save($scope.item, function (data) {
        $scope.Details.push(data);
        $scope.item = {};
      });
   };