I am facing a problem while calling a service using $http.
I am opening an .aspx page using iframe and on the page load i want to call a service which i written in the controller but $http is taking full path of the page and then path of the web api service as shown below.
http://localhost:50802/TST00111CFG/app/DispatchNotify/api/DispatchNotifyService/GetWorkOrders
and i want in the below manner
http://localhost:50802/TST00111CFG/api/DispatchNotifyService/GetWorkOrders
My controller code is like this
dbSrvc.getDatFromService('api/DispatchNotifyService/GetWorkOrders', $scope.workOrder).then(function (result) {
debugger;
});
Please help me out in this.
dnApp.service('dbSrvc', ["$http", "$q", function ($http, $q) {
var getDataService = function (url, val) {
debugger;
var deferObj = $q.defer();
$http({
url: url,
method: 'Get',
data: val
}).then(function (data) {
deferObj.resolve(data);
});
return deferObj.promise;
};
var postDataService = function (url, val) {
debugger;
var deferObj = $q.defer();
$http({
url: url,
method: 'Post',
data: val
}).then(function (data) {
deferObj.resolve(data);
});
return deferObj.promise;
};
return {
getDatFromService: getDataService, //To Get Data From Service
postDataToService: postDataService //To Send Data and Retrieve from Service
}
Related
I have a Web Page which has two controllers , First controller list the Ads
with Each Ad has AId which is display using {{x.AId}} . To Get the Ad Details in Next Div How to Pass {{x.AId}} to another controller on same Page ?
var app = angular.module("myModule", ['angularUtils.directives.dirPagination']);
//This Gets all the Classifieds
app.controller("GetClassifiedDetails", function ($scope, $http) {
$http({
url: "assets/services/MasterWebService.asmx/GetAdsList",
method: "GET"
}).then(function (response) {
console.log(response.data);
$scope.ListClassifieds = response.data;
$scope.TotalClassifieds = response.data.length;
});
});
app.controller("GetAdsVisitedStats", function ($scope, $http) {
$http({
url: "assets/services/MasterWebService.asmx/spAdsVisitStatis",
method: "GET",params: { AId }
}).then(function (response) {
console.log(response.data);
$scope.ListAdsVistedStats = response.data;
$scope.TotalAdsVisited = response.data.length;
});
});
I want to get a single object from json file using AngularJs params, but it give me all objects.
This is the code I've used,
(function () {
"user strict";
angular
.module("myApp")
.controller("indexCtrl", function ($scope, $http, $routeParams) {
var workId = $routeParams.id;
$http({
url: "data/work.json",
method: "GET",
params: {id: workId}
}).then(function(sitedata) {
$scope.workDetail = sitedata.data;
});
});
})();
Please help me. Thanks
If you're loading a json file it will just return the whole content, you'll have to filter in the then callback:
$http({
url: "data/work.json",
method: "GET"
}).then(function(sitedata) {
var match = sitedata.data.filter(function(item) {
return item.id == workId;
});
if (match.length) {
$scope.workDetail = match[0];
}
});
This question is related to another one.
Before I did added $ionicPlatform, my service working just fine, but now there is something wrong with $http.
Here is example of injectables:
(function () {
"use strict";
angular.module('service', ['ionic'])
.service('BBNService', ["$http", "$localStorage", "$ionicPlatform",
function ($http, $localStorage, $ionicPlatform) {
And using of $http and $ionicPlatform
this.tips = function () {
var url;
$ionicPlatform.ready(function () {
if (window.Connection) {
if (navigator.connection.type == Connection.CELL_4G || navigator.connection.type == Connection.WIFI) {
if (this.getDayId = 0)//If Sunday - retrieve updated tips
url = this.host + "/tips/";
else
url = "data/tips.json";//If not - use saved data
}
}
});
var request = $http({
method: "GET",
url: url
}).then(
function mySucces(response) {
return response.data;
},
function myError(response) {
return response.data;
});
return request;
};
You need to send back the promise, doing a return response.data is not gonna work.
var deferred = $q.defer();
var request = $http({
method: "GET",
url: url
}).then(
function mySucces(response) {
deferred.resolve(response.data);
},
function myError(response) {
deferred.reject(response.data);
});
return deferred.promise;
And at the place where you consume this service:
BBNService.tips().then(
function(data) { //success call back with data },
function(data) { //error call back with data }
);
Please let me know if you need more explanation on using $q; always happy to give more details.
I´m trying to create an angular function inside on Service to return acess data via $http and then return to a desired scope.
So my service it something like this;
app.service('agrService', function ($http) {
this.testinho = function(){
return "teste";
}
this.bannerSlides = function(){
var dataUrl = "data/banner-rotator.json";
// Simple GET request example :
$http({
method: 'GET',
dataType: "json",
url: dataUrl
})
.success( function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
//console.log(data);
return data;
}).error( function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
alert("Niente, Nada, Caput");
});
}
})
Then i want to associate the returned data to a scope inside of my main App controller... like this:
app.controller('AppCtrl', function($scope, $http, agrService) {
$scope.slides = agrService.bannerSlides();
})
Then in my template i want to loop the data like this:
<div ng-repeat="slide in slides">
<div class="box" style="background: url('{{ slide.url }}') no-repeat center;"></div>
</div>
The problem is that the data it´s only available on success and i don´t know how to pass it to my scope slides!!!!!
What i´m doing wrong?
Many thanks in advance
bannerSlides() doesn't return the values you need right away. It returns a promise that you can use to obtain the value at a later time.
In your service you can use the .then() method of the promise that $http() produces to do initial handling of the result:
return $http({
method: 'GET',
dataType: "json",
url: dataUrl
}).then(function (data) {
// inspect/modify the received data and pass it onward
return data.data;
}, function (error) {
// inspect/modify the data and throw a new error or return data
throw error;
});
and then you can do this in your controller:
app.controller('AppCtrl', function($scope, $http, agrService) {
agrService.bannerSlides().then(function (data) {
$scope.slides = data;
});
})
Use this in your service
....
this.bannerSlides = function(){
var dataUrl = "data/banner-rotator.json";
return $http({
method: 'GET',
dataType: "json",
url: dataUrl
});
};
...
And this in your controller
agrService.bannerSlides().then(function(data) {
$scope.slides = data;
}, function() {
//error
});
you don't need $q promise inside the service because the $http is returning a promise by default
The $http service is a function which takes a single argument — a configuration object — that is
used to generate an HTTP request and returns a promise with two $http specific methods: success and error
reference
here is a Fiddle Demo
You need to return a promise and update your scope in the callback:
app.service('agrService', function ($q, $http) {
this.bannerSlides = function(){
var ret = $q.defer();
var dataUrl = "data/banner-rotator.json";
// Simple GET request example :
$http({
method: 'GET',
dataType: "json",
url: dataUrl
})
.success( function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
ret.resolve(data);
}).error( function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
ret.reject("Niente, Nada, Caput");
});
return ret.promise;
}
})
app.controller('AppCtrl', function($scope, $http, agrService) {
$scope.slides = null;
agrService.bannerSlides().then(function(data){
$scope.slides = data;
}, function(error){
// do something else
});
})
You can't return a regular variable from an async call because by the time this success block is excuted the function already finished it's iteration.
You need to return a promise object (as a guide line, and preffered do it from a service).
Following angular's doc for $q and $http you can build yourself a template for async calls handling.
The template should be something like that:
angular.module('mymodule').factory('MyAsyncService', function($q, http) {
var service = {
getData: function() {
var params ={};
var deferObject = $q.defer();
params.nameId = 1;
$http.get('/data', params).success(function(data) {
deferObject.resolve(data)
}).error(function(error) {
deferObject.reject(error)
});
return $q.promise;
}
}
});
angular.module('mymodule').controller('MyGettingNameCtrl', ['$scope', 'MyAsyncService', function ($scope, MyAsyncService) {
$scope.getData= function() {
MyAsyncService.getData().then(function(data) {
//do something with data
}, function(error) {
//Error
})
}
}]);
I have some code in my controller that was directly calling $http to get data.
Now I would like to move this into a service. Here is what I have so far:
My service:
angular.module('adminApp', [])
.factory('TestAccount', function ($http) {
var TestAccount = {};
TestAccount.get = function (applicationId, callback) {
$http({
method: 'GET',
url: '/api/TestAccounts/GetSelect',
params: { applicationId: applicationId }
}).success(function (result) {
callback(result);
});
};
return TestAccount;
});
Inside the controller:
TestAccount.get(3, function (data) {
$scope.testAccounts = data;
})
How can I change this so rather than passing the result of success back it
passes back a promise that I can check to see if it succeeded or failed?
Make your service to return a promise and expose it to service clients. Change your service like so:
angular.module('adminApp', [])
.factory('TestAccount', function ($http) {
var TestAccount = {};
TestAccount.get = function (applicationId) {
return $http({
method: 'GET',
url: '/api/TestAccounts/GetSelect',
params: { applicationId: applicationId }
});
};
return TestAccount;
});
so in a controller you can do:
TestAccount.get(3).then(function(result) {
$scope.testAccounts = result.data;
}, function (result) {
//error callback here...
});