Guide to sending post variables in an AngularJS service

Question

Guide to sending post variables in an AngularJS service

Is there a way to send POST variables to a RESTful API using an angularjs service?

I currently have the following setup:

angularjsServices.factory('LoginService', [ '$resource',
  function($resource){
    return function(user, pass){
      return $resource(baseURL + "/login", {}, {
        logIn: {method:'POST', params:{username: user, password: pass}, isArray:false}
      });
    }
  }]);

As it stands, the variables are being sent in the URL. (I found inspiration from this tutorial, although it uses jQuery instead of angularJS.)

javascript angularjs rest

Answer 1

Answer №1

It's important to keep your resource and service separate.

Declare your resource like this:

resourceModule.factory('rsrUser', [ '$resource',
  function($resource){
    return $resource(baseURL + "/login", {}, {
        logIn: {method:'POST', isArray:false}
    });
  }
]);

Then, you can utilize the rsrUser resource in your service or controller:

controllerModule.controller('ctrlMain', [ '$scope', 'rsrUser',
  function($scope, rsrUser){
    // create a new instance of the resource and set properties
    $scope.user = new rsrUser;
    $scope.user.username = 'savior';
    $scope.user.password = '123';

    // call the resource action
    $scope.user.$logIn(function(){
      // success callback
    }, function() {
      // error callback
    });

  }
]);

Answer 2

It's important to keep your resource and service separate.

Declare your resource like this:

resourceModule.factory('rsrUser', [ '$resource',
  function($resource){
    return $resource(baseURL + "/login", {}, {
        logIn: {method:'POST', isArray:false}
    });
  }
]);

Then, you can utilize the rsrUser resource in your service or controller:

controllerModule.controller('ctrlMain', [ '$scope', 'rsrUser',
  function($scope, rsrUser){
    // create a new instance of the resource and set properties
    $scope.user = new rsrUser;
    $scope.user.username = 'savior';
    $scope.user.password = '123';

    // call the resource action
    $scope.user.$logIn(function(){
      // success callback
    }, function() {
      // error callback
    });

  }
]);

Answer 3

Answer №2

If you're looking for a reliable solution, I recommend using restangular. You can find more information about it here: https://github.com/mgonto/restangular

Restangular is an AngularJS service designed to handle Rest API Restful Resources in a simple and effective manner.

For posting data, you can follow this example:

 var newBuilding = {
    name: "Awesome Tower",
    location: "United States"
  };

  // POST request to /accounts/123/buildings with newBuilding data
  firstAccount.post("Buildings", newBuilding).then(function() {
    console.log("Data saved successfully");
  }, function() {
    console.log("An error occurred while saving data");
  });

Answer 4

If you're looking for a reliable solution, I recommend using restangular. You can find more information about it here: https://github.com/mgonto/restangular

Restangular is an AngularJS service designed to handle Rest API Restful Resources in a simple and effective manner.

For posting data, you can follow this example:

 var newBuilding = {
    name: "Awesome Tower",
    location: "United States"
  };

  // POST request to /accounts/123/buildings with newBuilding data
  firstAccount.post("Buildings", newBuilding).then(function() {
    console.log("Data saved successfully");
  }, function() {
    console.log("An error occurred while saving data");
  });

Guide to sending post variables in an AngularJS service

Answer №1

Answer №2

Similar questions

Validation on the client side for a form that is displayed within a bootstrap modal using ajax technology

Uploading Files with Django Rest Framework and Angular 2

Transferring the chosen dropdown value to the following page

Error encountered: unable to locate module - '@deck.gl/exper-layers'

Modifying arrays in ReactJS

React's input onChange event does not trigger for the second time. It only works the first time

Using AngularJS's ng-repeat to dynamically display JSON data

Utilize vue-resource for updating information in the database

Traversing a hierarchical structure and building a REACT user interface based on it

Enhancing the functionality of the onclick function within the ng-repeat by incorporating a scope

Looking for the temporary folder created by the nodejs filesystem?

Is it possible to utilize both the /app and /pages folders in my Next 13 application?

What strategies can I use to eliminate nested loops while constructing a navigation?

Attempt to make a Restangular request again using an interceptor

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

When working with Next.js, I encountered a scenario where the useEffect() function was being triggered twice. I attempted to solve this issue by providing an empty array as the second argument, but to no

Issue with AngularJS Directive - ng-click not activating within the specified directive

Storing the .NET Framework viewmodel in its own individual Javascript file

Leveraging jQuery within a webpack module shared across multiple components, located outside the webpack root directory

Most efficient method for nesting child objects within an array of objects using JavaScript