AngularJS is capable of dynamically altering the URL based on the specific HTTP method being used, such as

Question

AngularJS is capable of dynamically altering the URL based on the specific HTTP method being used, such as

I have implemented Angular factories to connect ajax requests with my web api. Below is an example of how the factory is structured.

app.factory('QuestionContainer', ['$resource', function ($resource) {
return $resource('http://localhost:52133/api/questioncontainerapi/:id', null,
    {
        'update': { method: 'PUT' },
        'publish': { method: 'Put', url: 'http://localhost:52133/api/questioncontainerapi/:id/Publish/' }
    });
}]);

You can observe that I have inserted :id between two actions in the URL and the current method specified is Put. When using the factory in the controller as follows ->

QuestionContainer.publish({ id: 1 });

the request URL becomes

http://localhost:52133/api/questioncontainerapi/Publish/

with a body of { id: 1 }. If I switch to the Get method, the request URL changes to

http://localhost:52133/api/questioncontainerapi/1/Publish/

, which is the desired URL.

How do I configure Angular to achieve this behavior? Appreciate any guidance!

javascript angularjs http-headers

Answer 1

Answer №1

If you're encountering an issue, make sure to include the param in your code snippet:

app.factory('CustomContainer', ['$resource', function ($resource) {
return $resource('http://localhost:52133/api/customcontainerapi/:id', {id: '@id'},
    {
        'update': { method: 'PUT' },
        'submit': { method: 'POST', url: 'http://localhost:52133/api/customcontainerapi/:id/Submit/' }
    });
}]);

Check out this jsfiddle for reference.

You can monitor the requests made in the console.

Tutorial

url: /example/:param

It's crucial to define the param by using {param: 'value'}. This ensures that the URL will always be resolved to /example/value.

If you want dynamic URLs based on variables, use:{param: '@var'} Here, var is a variable associated with either the instance resource or the data object passed to a class resource.

CustomContainer.submit({ id: 1 }); // Data object: {id: 1}

To access /example/3, follow these steps:

CustomContainer.submit({ var: 3 }); // Class
var custom = new CustomContainer({var: 3}); // Alternatively: new CustomContainer(); custom.var = 3;
custom.$submit();

For further details, refer to the official documentation: $resource

Answer 2

If you're encountering an issue, make sure to include the param in your code snippet:

app.factory('CustomContainer', ['$resource', function ($resource) {
return $resource('http://localhost:52133/api/customcontainerapi/:id', {id: '@id'},
    {
        'update': { method: 'PUT' },
        'submit': { method: 'POST', url: 'http://localhost:52133/api/customcontainerapi/:id/Submit/' }
    });
}]);

Check out this jsfiddle for reference.

You can monitor the requests made in the console.

Tutorial

url: /example/:param

It's crucial to define the param by using {param: 'value'}. This ensures that the URL will always be resolved to /example/value.

If you want dynamic URLs based on variables, use:{param: '@var'} Here, var is a variable associated with either the instance resource or the data object passed to a class resource.

CustomContainer.submit({ id: 1 }); // Data object: {id: 1}

To access /example/3, follow these steps:

CustomContainer.submit({ var: 3 }); // Class
var custom = new CustomContainer({var: 3}); // Alternatively: new CustomContainer(); custom.var = 3;
custom.$submit();

For further details, refer to the official documentation: $resource

AngularJS is capable of dynamically altering the URL based on the specific HTTP method being used, such as

Answer №1

Similar questions

Can an asynchronous function potentially return an object with a "then" function included?

Switch between classes based on the query using the Ajax response

Real-time data updates using AJAX in Ruby on Rails

-g option must be enabled for jscoverage to function properly

Sending multiple AJAX post requests in succession

Leveraging recompose utility within the structure

The event handler is malfunctioning in Django's inline formset

Following the parsing of the list of months, the sequence undergoes a

Webstorm seems to be having trouble identifying Next.js

Issue encountered while integrating Angular with Grails

Navigating objects in an Array in React

Attempting to store an array of JSON objects in the state, and then utilizing the `map` method to render

How to Build Node 0.4.7 on Ubuntu 11.10?

AngularJS remove a row from a table disrupts the formatting

What are the steps to remove text within a list item using jQuery or regular JavaScript in a WordPress theme?

Tips for associating an id with PrimeNg menu command

Different color for background of division

Install global npm modules in alternative directories for Node.js

Error encountered while trying to import: 'getMovies' function is not available for export from 'C:/Users/hp/vidly/src/fakeGenreService'

Improving List performance with React.cloneElement