i have problem with ngResource.
here is my .factory
app.factory('sveKlupeServiceFactory', ['$resource',
function($resource){
return $resource('myURL/to/json', {},{
// { method: 'getKlupe', q: '*' },
query: { method: 'GET', params:{klupaId:'klupe'}, isArray:true}
});
and here is my controller
app.controller('klupeController', ['$scope', 'sveKlupeServiceFactory', function ($scope,sveKlupeServiceFactory){
$scope.klupe = sveKlupeServiceFactory.query();
}]);
and in html I have this
<tr ng-repeat="klupa in klupe">
<td>{{klupa.serial_number}}</td>
<td>{{klupa.location_id}}</td>
<td>{{klupa.type}}</td>
<td>{{klupa.last_report_dt}}</td></tr>
Problem:
in my browser I have table, but with empty row. There is no any error.
In my app I have
var app = angular.module('App', [
'ngRoute',
'ngResource']);
Can someone help me with any suggestion?
Thank you.
If you want entire table data, then there is no need to pass id as parameters in factory.Make the following changes in controller while calling factory method.
Check the response using console.log()
sveKlupeServiceFactory.query(function(res){
console.log(res);
$scope.klupe = res;
});
You should use promises to get the response.
$scope.klupe = sveKlupeServiceFactory.query();
$scope.klupe.$promise.then( function(result) { $scope.klupe = result });
Related
I am new to Angular JS
I am trying to make two API calls on page load but I want to do one after another once I got the response I want to call another Asynchronous calls. my service looks as below
can you please suggest me what should be the best way to achieve this.
(function(){
"use strict";
var APIservice = function($http,$base64,UtilService,$rootScope){
UtilService.setHeaders($rootScope.globals.currentUser.authdata);
var DataProvider = function(method,url,data){
return $http({
method: method,
url: url,
data:data
}).then(function(response){
console.log(response);
return response.data;
});
};
return {
DataProvider:DataProvider
}
}
var module = angular.module('expframework');
module.factory("APIservice",APIservice);
}());
Thanks in Advance
Just use promise chaining:
APIservice.DataProvider('GET', firstUrl).then(function(data1) {
return APIservice.DataProvider('GET', secondUrl);
}).then(function(data2) {
// ...
});
I am trying to make a POST request via $resource object in Angular.
I have something like
(function (angular) {
angular.module('myApp')
.factory('myService', [
'$resource',
function ($resource) {
var serviceObj = $resource('http://testProject/products/', {id: '#id'},{
'createItem' : {
url: 'http://testProject/item/:id',
method: 'POST',
params: {type: ‘#type'}
}
});
return serviceObj;
}
]);
})(angular);
in my controller
//omit the controller codes…
myService.type = ‘Detail’;
myService.createItem(function(data) {
console.log(data)
});
I see stuff back from the console.log but it has the wrong data because the type is shown as ‘Name’ instead of ‘Detail’. I know api supports that and I don’t see anything wrong with my service. Can someone help me out for it? Thanks a lot!
It looks like your are getting data back,
I would try:
console.log(data.data);
Since your are returning an object from your service.
I am pretty new to Angular JS technology.
I want to call following protected REST URL.
http://localhost/rest/bpm/wle/v1/search/query?condition=taskActivityName|Equals|Cashier Review&condition=taskStatus|Equals|Received&organization=byTask&run=true&shared=false&filterByCurrentUser=false
Following code is not working for me. It is taking only `http://localhost/rest/bpm/wle/v1/search/query .Please suggest.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
var URLBASE = "http://localhost/rest/bpm/wle/v1";
var userid = "harish.puli";
var password = "Password1";
// End of buildAuthorization
var options =$.param ({
query : {
organization : "byTask",
condition : [ "taskActivityName|Equals|Cashier Review", "taskStatus|Equals|Received" ]
},
handleAs : "json",
user: "harish.puli",
password: "Password1"
});
var url=URLBASE+"/search/query";
$http.post(url,options).success(function (response) {
console.log(response);
$scope.tasks = response.data.data;
});
});
I believe you're missing a '?' after query based on the URL you provided.
Try:
var url=URLBASE+"/search/query?";
Your code is only calling http://localhost/rest/bpm/wle/v1/search/query because you're using post instead of get. In get you transmit the parameters in the URL but in post they are transmitted in the body of the request.
Hi I'am trying a simple example of using a controller and a factory to get some data back to the view but for some reason I can't print it.
I managed to get the ajax call to work.
If I type the
$scope.sampleStyles = [{ sample: 'text here', text : 'dasdas'}
and don't use the ajax call it works
UPDATE: if I add an alert before assigning to my scope it works (ajax has time to do his thing)
anyone know how to overcome that?
CODE:
var packageApp = angular.module("packageApp", []);
packageApp.controller("MyController", function($scope, myFactory){
$scope.sampleStyles = [];
function init(){
$scope.sampleStyles = myFactory.getSampleStyles();
}
init();
});
packageApp.factory('myFactory', function($http, $log){
var factory = {};
var sampleStyles = [];
var tempData = {};
factory.update = function(){
$.ajax({
type: 'POST',
url: '/account/fetch-sample-styles',
data: {
source: 'ajax'
},
success: function(data, textStatus, XMLHttpRequest){
tempData = data;
}
});
alert(tempData);
sampleStyles = tempData;
}
factory.getSampleStyles = function(){
factory.update();
return sampleStyles;
};
return factory;
});
Are you using the AngularJs $http service? If so it will return a promise which you then operate on. Here is more on promises from the AngularJs docs.
My guess is, you are using an ajax.get(...) with a success callback defined inside. The problem is probably due to the success callback not belonging to the "AngularJs world."
To fix this, you need to tell AngularJs that its scope has changed. Use the $[Root]scope.$apply() function, and have the scope injected into your service as a dependency.
Something like this inside the factory:
$.ajax({
url: "/api/some/end/:point",
...
success: function(data) {
$scope.$apply(function() {
$scope.sampleStyles = data; // etc
});
}
});
I strongly recommend that you look into the $http service, it makes the above code much nicer, and is designed to play nice with the $scope.
$http.get("/api/end/point").then(function(response) {
// response.data points at the page data sent back, assuming that your
// api endpoint sends back JSON of the likes of
// { status: "SUCCESS", styles: [...] }
$scope.sampleStyles = response.data.styles;
});
EDIT:
Now that you posted some code, it seems like the root of your issue is based on the fact that the ajax get is an async call. Why are you even messing with using a temporary variable? Why not the following?
factory.update = function(){
$.ajax({
type: 'POST',
url: '/account/fetch-sample-styles',
data: {
source: 'ajax'
},
success: function(data, textStatus, XMLHttpRequest){
sampleStyles = data;
}
});
}
If you really wanted to make the $.ajax call blocking, you can set async: false in the $.ajax properties.
EDIT 2:
Fixed some broken links, sorry I am a SO newb :(
my service has to use a query string due to limitations on the server that runs classic ASP:
angular
.module('myServices', ['ng', 'ngResource'])
.factory('Item', ['$resource',
function ($resource) {
return $resource('/api/?p=item/:id');
}]);
and I want to add extra query string parameters to it:
Item.query({test: 123}, on_success, on_error);
but the resulting url is
/api/?p=item?test=123
apparently there is a bug, but how to get around it?
EDIT: filed this at https://github.com/angular/angular.js/issues/1511
You can use resource parameters. If you haven't specified placeholders in the path, they would automatically be converted into query string params. Like that:
angular
.module('myServices', ['ng', 'ngResource'])
.factory('Item', [
'$resource',
function ($resource) {
return $resource('/api');
}]);
Item.query({p: 'item/1'});
This would result in a request to /api?p=item/1.
P.S.
I suppose you already know that, but you don't like it. But I still think this is the correct way in your case. Considering the bad API design you are dealing with that back-end you could wrap the AngularJS resources with another service which does this for you.
var deferred = $q.defer();
api.api_name.query({
'param':param_value
},
function(response) {
deferred.resolve(response);
},
function(response) {
deferred.reject(response);
}
);
//
angular
.module('module_name')
.factory('api',function($resource){
var api_var={};
api_var.api_name = $resource('url?param_key=:param', {
param: '#param'
}, {
'query': {
method: 'get'
}
});
return api_var;
});