I want to send variable & object to controller by service in angularjs.
This is my service
.service('userService', ['$resource', 'config', function ($resource, config) {
return $resource(config.appRoot + 'api/user/teamname/:progressNo',
{ progressNo: '#ProgressNo' },
{
'query': {
method: 'GET',
isArray: true,
}
}
);
}])
and this is call service:
userService.query(condition, { progressNo: $scope.progressNo }, function (data) {});
Controller is:
[HttpGet]
[Route("teamname/{progressNo}")]
public async Task<ActionResult> QueryTeamName(int progressNo,UserSearchCondition condition)
{
return Json(await this.manager.SelectTeamName(progressNo, condition), JsonRequestBehavior.AllowGet);
}
I don't understand why it not call to controller. If i send one object or one param then Ok.
You need to change your Action To HttpPost, and similarly change the method in your query too as POST.
Related
I am trying to upload a file from the server but the file is not showing up. The call to the server is initiated from this segment of code:
'use strict';
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['Phone',
function PhoneListController(Phone) {
this.phones = Phone.query();
this.orderProp = 'age';
console.log(this.phones);
}
]
});
Which calls this service:
'use strict';
angular.
module('core.phone').
factory('Phone', ['$resource',
function($resource) {
return $resource('phones/:phoneId.json', {}, {
query: {
method: 'GET',
params: {
phoneId: 'phones'
},
isArray: true
}
});
}
]);
The return codes are 200 and subsequently 304 which indicate a successful upload. But the console.log statement in the earlier code segment does not display the phones in the console.
To log the result, use the $promise property of the $resource object:
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['Phone',
function PhoneListController(Phone) {
this.phones = Phone.query();
this.orderProp = 'age';
//console.log(this.phones);
//USE $promise property
this.phones.$promise.then(function(phones) {
console.log(phones);
}).catch(function (error) {
console.log("ERROR " + error.status);
});
}
]
});
It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.
By using the .then method of the $promise property, the $q service delays the console.log until the data has returned from the server.
I'm trying to using the $resource library of angular, to POST data to a nested resource.
My following nested resource of event looks like so
events/:eventId/match - POST
events/:eventId/match - GET
events/:eventId/match/:matchId - GET
I set up a service with angular
app.factory('EventService', ['$resource', function ($resource) {
var Event = $resource('/events/:eventId', {eventId: '#id'},
{
createMatches: {
url: '/events/:eventId/match',
method: 'POST'
}
);
return {
createMatches: function(data,event_id) {
var data.eventId = event_id;
return Event.createMatches(data).$promise;
}
}
});
Controller where it has been called:
app.controller('EventController', ['$scope','EventService', function($scope,EventService) {
$scope.create = function(event_id,title,description) {
EventService.createMatches({
title:title,
description: description
},event_id).then(function(result) {
console.log('event_created', result);
})
}
}]);
Problem
When I send the request to the server I expect the url that looks like so: /events/10/match
But instead the resource doesn't add the eventId as a parameter of the url but add it as a parameter of the request, for this reason my call fail because the url looks like so: /events/match.
I can't understand why it doesn't bind the :eventId to the url. Any suggest will be appreciated.
I believe that you are missing your second parameter decalaration, as per this link for the actions you are defining:
app.factory('EventService', ['$resource', function ($resource) {
var Event = $resource('/events/:eventId', {eventId: '#id'},
{
createMatches: {
url: '/events/:eventId/match',
method: 'POST',
params: {eventId: '#id'}
}
);
return {
createMatches: function(data,event_id) {
var data.eventId = event_id;
return Event.createMatches(data).$promise;
}
}
});
I am trying to build my first Angular $resource to give my application access to CRUD operations, but for some reason the actions being configured for the resource are not defined when I try to execute a query.
Here is my controller logic:
app.controller('MainCtrl', function ($scope, $http, $resource) {
var Alert = $resource('/WebApi/Alert/:type/:id',
{
systemUpdate: { method: 'GET' },
autoArchive: { method: 'POST', url: '/WebApi/Alert/Template/:type' }
});
$scope.systemUpdate = function (alert) {
var data = Alert.systemUpdate({ type: alert.Status, id: alert.AlertId }); // THIS LINE FAILS
console.log(data);
}
I get an error saying that Alert.systemUpdate is not defined. Am I doing something wrong here when configuring my $resource?
Change the definition of your Alert to
var Alert = $resource('/WebApi/Alert/:type/:id',
{},
{
systemUpdate: { method: 'GET' },
autoArchive: { method: 'POST', url: '/WebApi/Alert/Template/:type' }
});
As mentionned in the documentation of $resource, the order of the parameters is the following:
1) Url
2) The default value of the parameters of the url, since you don't have any default value, you must provide an empty object
3) The actions (systemUpdate & autoArchive here)
how to make Generic method for rest call in angularjs ?
i have tried for single request, it's working fine
UIAppRoute.controller('test', ['$scope', 'checkStatus', function($scope, checkStatus) {
$scope.data = {};
checkStatus.query(function(response) {
$scope.data.resp = response;
});
}])
UIAppResource.factory('checkStatus', function($resource){
return $resource(baseURL + 'status', {}, {'query': {method: 'GET', isArray: false}})
})
I want to make this as generic for all the request
Please share any sample,.. thanks in advance
I'm using something like this :
.factory('factoryResource', ['$resource', 'CONF',
function($resource, CONF) {
return {
get: function(endPoint, method) {
var resource = $resource(CONF.baseUrl + endPoint, {}, {
get: {
method: method || 'GET'
}
});
return resource.get().$promise;
}
};
}
])
called by :
factoryResource.get(CONF.testEndPoint, "POST"); // make a POST and return a promise and a data object
factoryResource.get(CONF.testEndPoint, "GET"); // make a GETand return a promise and a data object
factoryResource.get(CONF.testEndPoint); // make a GETand return a promise and a data object
with a config file having :
angular.module('app.constant', [])
.constant('CONF', {
baseUrl: 'http://localhost:8787',
testEndPoint: '/api/test'
});
I have this resource:
myModule.factory('MyResource', ['$resource', 'geoLocationService', function ($resource, geoLocationService ) {
return $resource('/blabla', {}, {
'getData': { method: 'GET', params: { city: geoLocationService.getMyCity() } }
});
}]);
The problem is that by the time of calling MyResource.getData(), geoLocationService haven't done to fetch the location.
geoLocationService has a promise which will allow me call
geoLocationService.promise.then(...)
But I don't know how I can integrate this promise with the resource. Any idea?
EDIT
I am looking for something like:
myModule.factory('MyResource', ['$resource', 'geoLocationService', function ($resource, geoLocationService ) {
return $resource('/blabla', {}, {
'getData': { method: 'GET', beforeFetchPromise: geoLocationService.promise, { city: geoLocationService.getMyCity() } }
});
}]);
So only when geoLocationService.promise is resolved or rejected, the ajax call with parameters will occur.
I think you should add a promise in your controller:
$scope.resultsFromResource = YourResourceName.query().$promise.then(function(result){
// code inside promise
})
I would also suggest that you either use query as in my example or remove single quotes around your name getData if you want to keep that.