I am using the FOSRestBundle, this bundle generates routes for me and pluralises those routes. For instance a GET request to /users.json is different from a GET request to /user/15.json
Its worth noting that a call to /users/15.json fails.
More on this issue here https://github.com/FriendsOfSymfony/FOSRestBundle/issues/247
In my Angular app I use a $resource to create a RESTful call, the URL is a template as detailed here https://docs.angularjs.org/api/ngResource/service/$resource
For example
$resource('http://example.com/:id.json')
Or
$resource('http://example.com/user/:id.json')
And there in is the problem, the $resource seems to accept a single URL template for the REST resource, but I have multiple ones because of the forced pluralisation from the FOSRestBundle.
I do not think hacking the FOSRestBundle is the answer, so what can I do with my usage of $resource in AngularJs to correct this issue?
you can set url for every method as third parameter - actions
angular.module("example", ["ngResource"])
.factory("userService", function($resource) {
return $resource("http://example.com/user/:id.json", {
id: "#id"
}, {
'query': {
url: "http://example.com/users"
}
})
})
.run(function(userService) {
userService.query();
userService.get({id:1});
})
Related
I'm migrating a JSP/Spring project to Angular JS 1.X. Currently I'm stuck in following situation, appreciate if anyone can help.
My application is redirecting to a 3rd party app and after submitting a form response is coming back to again my application. In spring I used to get the request parameter using following code. How can I get the request parameters in Angular JS?
#Autowired
private HttpServletRequest request;
..
Enumeration paramsEnum = request.getParameterNames();
while (paramsEnum.hasMoreElements()) {
String paramName = (String) paramsEnum.nextElement()
....
}
Not sure I understood the question because with Java/Spring we access the params sent by angularJS.
Anyway, If you want to access a Url parameters of the current view you can use the angularjs $location service:
$location.search()
For example taking the 'impersonate_token' from the url and adding it to some variable:
if($location.search().token){
var token = $location.search().token;
url += "?impersonate_token=" +token;
}
if you want to manage the Url parameters send to the server side, you can do with angularjs $http service like this:
$http({
url: your/url,
method: "GET",
params: {
param_1: $scope.some_data
param_2: $scope.some_data2
}
});
$http.get(url)
.then(function(response) {
$scope.myWelcome = response.data;
});
Here is my route:
.state('payment-paytm', {
parent: 'app',
url: '/pricing/paytm_update',
component: 'pricing',
resolve: {
data: function (PricingService,$stateParams) {
return PricingService.paytm_update_status($stateParams);
}
}
});
this route is not accepting post request coming from paytm call back.
paramList["CALLBACK_URL"] = "http://localhost:9000/pricing/paytm_update"
this is the url we configured in paytm, this is responding correctly but this post request am not able to handle in my angular.
very first thing,paytm not support REST,so after you are making transaction,you have handle on backend url ( "http://localhost:9000/pricing/paytm_update").from there,use res.redirect("angular url/with paymentid").then by using that id you can display transaction details from your angular frontend
I think angular will not be able to capture the post request coming from paytm.
you have to catch it from the server side language and post it to angular route.
for post parameters you could include it in the url ($stateParams) and then you could get the parameters in your angular controller.
I'm using ngResource to consume a RESTful API, and have implemented the following service:
app.factory('User', function($resource) {
return $resource('/api/users/:id', { id: '#id' });
});
I would like to pass in a subdomain to it. Is there a way to do this?
I'm aware of the following workarounds:
Pass in a full URL: api.acme.com/users/:id
Inject a variable on the url: `'api.' + mydomain + '/users/:id'
With that said, I believe it'd be cleaner to just send the subdoman as an argument. Can this be done?
I have the following example method in angular service:
function send(data) {
return $http({
method: 'POST',
url: 'https://test.domain/test/send',
data: $httpParamSerializerJQLike(data)
});
}
The domain that is https://test.domain/test is the same for all the services in my app. I do not want to write it every time in every services. I can abstract it in a constant and inject it in every service but I wonder if there is more clever solution. Is it possible to store the domain part in an interceptor or any other suggestions are welcome. Please provide code examples as I am quite new to angular. Thanks
I'd say rather than abstracting the values out into a constant, you should abstract the $http call into a service. Then you can just inject that service into all of your other services in place of $http. For example:
angular.module('myApp').factory("myHttp", ["$http", function ($http) {
return function (config) {
config.url = "https://test.domain/test" + config.url;
return $http(config);
};
}]);
So effectively what this service is doing is proxying calls to $http, but prepending your common URL to the beginning - this would allow you to change your example code to:
function send(data) {
return myHttp({
method: 'POST',
url: '/send',
data: $httpParamSerializerJQLike(data)
});
}
Of course, this is just one example of how you could do an abstraction like this - the myHttp service could take any form you like, depending on what would be most convenient for you. I think this is a better solution than using an interceptor in this case, as it allows you to pick and choose when you use it, rather than it being applied to every single HTTP request.
create an interceptor and on requests change the url.
angular.module('app').factory('domainInterceptorService', [
function () {
var request = function (config) {
config.url = 'https://test.domain/' + config.url;
}
return config;
}
return {request: request};
});
I´m developing a web application where I have a front-end built with AngularJS that consumes Rest Services provided by a back-end API Rails application.
I would like to use the Angular $resource to get the Json objects in the backend API.
Client and Server applications run in different servers so far. So, angular client is in server-path:1234/app and backend api application runs in another-server-path:3000/.
Where server-path and another-server-path are localhost.
Both sides are developed, and works independently. I mean:
When I run another-server-path:3000/boats in a browser I get the list of boats, so the Restful service looks to be working.
I did a simulation in the client side, so, in my service I replaced the real url with a simulated url to a json data source. This code works too.
Now, I want to call the backend restful service in another-server-path:3000/boats from the angular service, but it´s now showing any data, neither I can see any get request in servers logs.
This is my angular service code:
angular.module('myApp.services', ['ngResource']).
// value('version', '0.1');
factory('Boat', function($resource){
return $resource('another-server-path:3000/:boatId', {}, {
query: {method:'GET', params:{boatId:'boats'}, isArray:true}
});
});
and this is my backend rails controller:
def index
#boats = Boat.all
respond_to do |format|
format.html
format.xml { render :xml => #boats}
format.json { render :json => #boats}
end
end
What am I missing? Please help.
UPDATE:
In Angular app, I changed my service file with:
return $resource('another-server-path\\:3000/:boatId', {}, {
query: {method:'GET', params:{boatId:'boats'}, isArray:true}
I also added this line to my app.js file:
delete $httpProvider.defaults.headers.common["X-Requested-With"];
and now I got the request in the api server. The controller is also executed. I got the boats from the DB. However I´m not able to send them back in JSON to Angular.
This is my api Controller:
def index
#boats = Boat.all
puts #boats
render :json => #boats
end
and this is the log I got when it´s called:
Started GET "/boats" for 127.0.0.1 at 2013-09-26 17:05:49 +0200
Processing by BoatsController#index as HTML
Boat Load (2.0ms) SELECT `boats`.* FROM `boats`
#<Boat:0x0000000675d9f0>
#<Boat:0x000000089e74a8>
#<Boat:0x000000089e71b0>
#<Boat:0x000000089e6e40>
Completed 200 OK in 66ms (Views: 3.0ms | ActiveRecord: 7.0ms)
As you can see, first, it says it is been processed as HTML instead of JSON. An second it is not sent to Angular back.
I got it working!
I configure my Rails api to accept cross-domain request by putting this configuration in config/application.rb
config.action_dispatch.default_headers = {
'Access-Control-Allow-Origin' => '*',
'Access-Control-Request-Method' => '*'
}
my service file with the resource call:
factory('Boat', function($resource){
return $resource('http://127.0.0.1\\:3000/:boatId', {}, {
query: {method:'GET', params:{boatId:'boats'}, isArray:true}
});
}).
and my Rails API controller:
def index
#boats = Boat.all
puts #boats
render :json => #boats
end
It looks easy, but this combination took me three days.