module.controller('HomeController', function($scope, $http) {
$http.get('http://104.155.209.198/list/json')
.success(function (data) {
$scope.home_items = data;
console.log('call HomeController');
})
.error(function (error) {
$scope.error = "error";
});
$scope.ClickHome = function (url) {
$http.get('http://104.155.209.198'+url+'/json')
.success(function (data) {
$scope.list_items = data;
console.log($scope.list_items);
console.log('call ListItems');
});
};
$scope.ClickList = function (url) {
$http.get('http://104.155.209.198'+'/list'+url+'/json')
.success(function (data) {
$scope.viewObject = data;
console.log($scope.viewObject);
console.log('call ViewItems');
})
};
});
This is my Angular code. This work in WebBrowers but not working in ios-emulate. what is a problem? not working $http in onsen-ui?
The problem might be loading of external content.
You can inspect the problem with Safari. If that's the case, this might help: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
Add this to platforms/ios/<appname>/<appname>-Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
new version of onsen ui not supported $http in emulate android
$http({
method: 'POST',
data: 'Username=' + $scope.user.email + '&Password=' + $scope.user.password + '&is_varified='+$scope.user.is_varified+'&gcm_reg_id='+gcm_reg_id,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: myService.ajax_base_url+'/login/validate_mobile_user'
}).
success(function(data, status, headers, config) {
//console.log(data);
alert('in success');
modal.hide();
}).
error(function(data, status, headers, config) {
modal.hide();
alert('in error');
});
Related
.controller("HttpPostController", function ($scope, $http)
{
console.log('SendHttpPostData login', $scope.loginData);
$scope.SendHttpPostData = function ()
{
var data =
{
name:$scope.loginData.username,
pwd:$scope.loginData.password
}
var config =
{
headers : {
'Content-Type': 'application/json;charset=utf-8;'
}
}
$http.post('demo url', data, config)
.success(function (data, status, headers, config)
{
console.log(" success"+status);
})
.error(function (data, status, header, config)
{
console.log(" error"+status);
});
};
This is my code , I have called function SendHttpPostData() on
ng-submit="SendHttpPostData()" in html file and added ng-controller in div properly than to i am getting 404 error whenever SendHttpPostData() is called,Please help me.
Try this if it may help you. But you haven't defined demo_url.
var demo_url = 'http://facebook.com:8081';//whatever your url is
$http({
method: 'POST', url: demo_url, data: { name:$scope.loginData.username, password: pwd:$scope.loginData.password },
transformRequest: function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
}).success(function (data, status, headers, config)
{
console.log(" success"+status);
})
.error(function (data, status, header, config)
{
console.log(" error"+status);
});
I have the following angular service:
angular.module('app.services.api_login', [])
.factory('loginApi', function($http, $q, CONFIG) {
return function(email, password) {
var promise = $http({
method: 'POST',
url: CONFIG.login_url,
data: {
username: email,
password: password
},
headers: {'Content-Type': 'application/json'}
}).
then(function(response){
if (typeof response.data === 'object') {
return response;
} else {
return $q.reject(response);
}
}, function(error){
return $q.reject(error);
});
return promise;
}
});
In the controller, I am able to invoke the service. However, inspecting the Network requests made by the browser, it does an HTTP GET.
Any possible ideas why?
Remove the '/' at the end of your CONFIG.login_url
I am using this post method in angularjs.
$http.post('url', data).
success(function(data, status, headers, config) {
console.log(data);
}).
error(function(data, status, headers, config) {
alert("error");
});
I am using angularjs and cordova tool for creating application.
I have created service, which contains code for calling APIs. and in that I want to return response to my angular controller.
My code is,
Service,
JodoModule.factory('commonServices', function ($http, $q, $rootScope) {
return {
getServiceData: function (url) {
$rootScope.loading = true;
var deferred = $q.defer();
var req = {
method: 'GET',
url: url
}
$http(req).success(function (data) {
alert("data in service = " + JSON.stringify(data.Data));
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
};
});
My controller is,
commonServices.getServiceData("My url").
success(function (data, status, headers, config) {
alert(data);
}).
error(function (data, status, headers, config) {
alert("Got error");
});
In above code, in service, its showing elert message for JSON.stringify(data.Data)); in success block, so data is comming, but its not executing deferred.resolve(data); properly...
in Web tool bar its giving me error,
ie. TypeError: undefined is not a function
My o/p is :
{"status":"SUCCESS","Message":"success","Token":"","Data":[{"Id":17,"UserId":"477f1919-6b80-4804-a325-ac0cb05bcd3e","UserName":"honey","FirstName":"honey","LastName":null,"ProfilePic":false,"Status":2}]}
How can I solve this error. ?
Ordinary $q promises don't have a .success() or .error() method, but you shouldn't be using the deferred antipattern anyway. Instead, do this:
JodoModule.factory('commonServices', function ($http, $rootScope) {
return {
getServiceData: function (url) {
$rootScope.loading = true;
var req = {
method: 'GET',
url: url
};
return $http(req).then(function (result) {
alert("data in service = " + JSON.stringify(result.data.Data));
return result.data;
});
}
};
});
Controller:
commonServices.getServiceData("My url").
then(function (data) {
alert(data);
}).
catch(function (result) {
alert("Got error");
});
Quite a bit cleaner, ay?
I am trying to access the http headers in my angular controller but I am getting undefined. Also, I am able to see the header response in my angular service which is not reflecting in my controller. Can someone please tell me what I am missing? Please see the code below:
Service:
cmApp.service('supplierService', function ($http, $q) {
this.getSuppliers = function (orderByColumn, skipRows, takeRows) {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'api/supplier',
params: { orderBy: orderByColumn, skip: skipRows, take: takeRows },
timeout: 30000,
cache: false
}).
success(function (data, status, headers, config) {
// any required additional processing here
deferred.resolve(data, status, headers, config);
}).
error(function (data, status) {
deferred.reject(data, status, headers, config);
});
return deferred.promise;
}
Controller:
supplierService.getSuppliers($scope.orderby, $scope.skip, $scope.take)
.then(function (data, status, headers, config) {
**//getting undefined here.**
$scope.totalRecords = parseInt(headers('X-TotalRowCount'));
$scope.suppliers = data;
}, function (error) {
// error handling here
});
I have found the solution by myself. All I have to do is create an array and add all those values to the same & return it to the controller. Please see the updated code below:
Service:
cmApp.service('supplierService', function ($http, $q) {
this.getSuppliers = function (orderByColumn, skipRows, takeRows) {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'api/supplier',
params: { orderBy: orderByColumn, skip: skipRows, take: takeRows },
timeout: 30000,
cache: false
}).
success(function (data, status, headers, config) {
// any required additional processing here
var results = [];
results.data = data;
results.headers = headers();
results.status = status;
results.config = config;
deferred.resolve(results);
}).
error(function (data, status) {
deferred.reject(data, status, headers, config);
});
return deferred.promise;
}
Controller:
supplierService.getSuppliers($scope.orderby, $scope.skip, $scope.take)
.then(function (response) {
$scope.suppliers = response.data;
$scope.totalRecords = parseInt(response.headers["x-totalrowcount"]);
}, function (error) {
// error handling here
});
This question is old, but $http() returns a promise itself. you can just return that from your service, no need to create a new promise. You can do this even after using .success() and .error(), or for that matter even after using a .then(), they keep chaining.
I had to access Token and TokenExpiry time from response headers of my Rest Service,then store it in my $rootScope.
Here is the code I used:
$scope.Authenticate=function(){
var EncDecUserPass=decodeURIComponent(encodeURIComponent($scope.LoggedUserName+':'+$scope.LoggedUserPassword)) ;
$http(
{method: 'GET',
url: 'http://localhost:53256/api/Products/Authenticate',
cache: false,
headers:{'Authorization':'Basic '+window.btoa(EncDecUserPass)}
}
).success(function(data, status, headers, config) {
//Here it goes
$rootScope.token=headers().token;
$rootScope.tokenExpirySec=headers().tokenexpiry;
}).error(function(data, status, headers, config) {
alert('Invalid User');
});
}
I have a loading icon set up on my page that looks like this:
<div class="loading-mask"
data-ng-show="action != null">
<span>{{action}} ...</span>
</div>
When I set $scope.action to a message appears in the loading box.
When loading my page I have a number of different async processes that get data. For example I have:
getUserProfiles: function ($scope) {
var url = '/api/UserProfile/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
});
},
and:
getSubjects: function ($scope) {
var url = '/api/Subject/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.subjects = data;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
});
},
How can I make it so that the first of these async processes causes a "Loading" message to appear and the last of the async process causes the loading box to not show any more. Note at this time I am not concerned about error messages. I just want the loading to not show when everything is completed.
To expand on what devmiles has said, but to handle the multiple asynchronous functions, you will want to set a loading flag on your first function to be called. I.e.:
getUserProfiles: function ($scope) {
$scope.loading = true;
var url = '/api/UserProfile/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
});
},
And then you will want to wrap each of your asynchronous functions in a promise, like so:
getUserProfiles: function ($scope) {
var deferred = $q.defer();
$scope.loading = true;
var url = '/api/UserProfile/GetSelect';
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.userProfiles = data;
deferred.resolve();
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
deferred.reject();
});
return deferred;
},
You can then call $q.all on all of your asynchronous functions, and the success callback of this will occur once all asynchronous functions have resolved:
$q.all([getUserProfiles, getSubjects]).then(function() {
$scope.loading = false;
}
This means once all of your functions have resolved, loading will be set to false.
NB: If you want to access the data of your callbacks, you can pass it in as a parameter of "deferred.resolve(x)", and then in your $q.all callback, it will be available as function(x) { do something with x }.
Hope this helps!
EDIT: Don't forget to pass in angular's promise service, $q, to the controller where your functions are.
Just set some boolean flag on when your controller is being instantiated and reset this flag in your success/error functions.
.controller('MyCtrl', function ( $scope ) {
$scope.isLoading = true;
$http({ method: 'GET', url: url })
.success(function (data, status, headers, config) {
$scope.option.subjects = data;
$scope.isLoading = false;
})
.error(function (data, status, headers, config) {
alert("Error: No data returned from " + url);
$scope.isLoading = false;
});
});
Use ng-show with this flag to show your loading thingy.