I would like to attach a function that gets executed whenever Angular is making an $http request. What I'm trying to do is essentially show a loading spinner whenever any Ajax Requests are being made by any App. In jQuery I have done this in the past by:
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
});
Any insight into how I can attach a function that shows and hides a loading div whenever any controller throughout the application performs an Ajax Request?
Maybe there is a better way (directives?)
Thanks!
Alessandro Ferrucci
the only thing that monitors all traffic in the app are the httpInterceptors youll have to write an inteceptor as a service that shows your div, when a request is detected and hides it when a response is detected.
interceptor are creaeted as services and passed to the $HttpProvider at config time.
you can read about it here
https://docs.angularjs.org/api/ng/service/$http
Related
I am new to Angular. I am trying to change the location of the URL only when a jquery ajax response is successful. But the issue is the only way I know how to use the $location service is through the controller.
I only want to run the $location.path('/'); when an ajax response is complete.
This is what I have for now..
app.controller("myCtrl",function($scope,$location){
$location.path('/basemenu');
})
But I can't run it only on success because it will give me an error, and I can't run on the page load either.
Does anyone know how I can do this?
$location service is a wrapper built around window.location.
in browser's context window object is exposed to all js snippet ( controller,service,factory etc..)
use
window.location.pathname = '<new path>';
I'm having trouble getting a response from server side NodeJS code after checking out using PayPal In-Context via the paypal-rest-sdk.
I have a PayPal form defined in html, and purposefully did not define the action. I only defined the id and method (get). In my Angular code, I define the action when the PayPal button is clicked:
var payPalForm = document.getElementById('payPalForm');
payPalForm.addEventListener("click", function(e) {
payPalForm.setAttribute('action', "https://10.0.0.25:8001/checkout/" +
$scope.user._id + "/" + $scope.viewEvent._id.valueOf() + "/" +
$scope.viewEvent.eventName + "/" + $scope.viewEvent.price);
});
By doing this, I am able to successfully checkout via PayPal In-Context.
In my NodeJS code, after successful checkout, instead of return res.end(); if successful or res.sendStatus(400, 'bad paypal payment'); if failure, I would like to pass the status back to the Angular, and handle it there.
To reiterate: I do not want to define the post PayPal In-Context route in NodeJS, I would like to do it in Angular.
I need to do this being I am using Onsen UI, and am using a splitter to navigate between pages.
Has anyone successfully done this?
UPDATE AFTER ATTEMPTING THE FIRST ANSWER
I have tried this before, but after attempting to implement Ilia Sky's Answer, the result is the PayPal In-Context checkout does not execute correctly. The script runs correctly (as determined by output in the terminal), but the In-Context window loads with "?" as a parameter and then immediately closes itself. Here are screenshots on how I updated my code. The commented out code is what I had when I was able to successfully checkout, but unable to redirect properly:
I think this is an issue with PayPal, and I'm not sure how to solve it.
This is why I'm wondering if I can listen for a redirect in Angular, and then load a different page when a certain redirect is identified.
I tried this in my Angular controllers, but it only ever executed when the initial page loaded:
I may be wrong, but from what I understand what you want to do is:
Send data to the server (to https://10.0.0.25:8001/checkout/...)
Do something on the server and give a response (res.send etc)
Handle the response on the client
Right?
To do this the easiest solution would be just to send an ajax request to the server and then handle the response.
This means instead of changing the action attribute you can directly make the request via js. With angular that would be done using the $http service.
$http.post('https://10.0...').then(successCallback, errorCallback);
And in success|errorCallback you can do whatever you want such as load a page in the splitter or whatever you want :)
To change what happens when you try to submit the form you can check out ng-submit.
And to get $http you can just add it to your list of arguments for your controller.
Example
app.controller('ExampleController', function($scope, $http) {
$scope.submit = function() {
$http.post('your/long/url').then(function(response) {
mySplitter.content.load('success-page.html');
}, function(response) {
mySplitter.content.load('error-page.html');
});
};
}]);
<form ng-submit="submit()" ng-controller="ExampleController">
...
</form>
I encourage everyone to check out this link.
One of the PayPal developers has posted a sample Kraken with Angular example of the PayPal In-Context Checkout.
In my application , there is a need to check for the authentication of the user which we usually store in the cookies (whether user is logged in or not). So, whenever a user hit a page (by navigating the url directly in address bar), we need to check first whether the cookie value is present or not. For that, we need to access one of our service which reads value from the cookie. But, where and how exactly I can inject my own services during bootstrap application.
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
//Where to inject the dependencies of my own services here??
});
Have you tried using the injector directly?
angular.element(document).ready(function () {
var yourServie = angular.injector(["app"]).get('yourService');
// Do something here with your service before bootstrapping
angular.bootstrap(document, ["app"]);
//Where to inject the dependencies of my own services here??
});
I don't have my code base in front of me but we do this with $http to make a request to the server to get configuration before we bootstrap.
I need to perform a $http request before any of my application loads up, so no UI, controllers, services, etc.
The purpose of the request is to check if the user has a valid session on the server based on the presence of a named cookie in the header.
So using a promise I can process the response and if not a valid session, or none exists, then redirect the user to my login page.
So my question, is where should the initial session check request live, my initial thoughts are to use the run block when setting up the application module.
Does this make sense or should I take a different approach?
The problem when doing this in the run config, you cannot put the intialisation of your application on hold. This means, that the first page will get loaded and the dependencies (controllers, services) will get initialized. If you want to do this check before everything gets initialized you will have to do the request before angular bootstraps.
You can bootstrap Angular manually if you remove the ng-app from your html element and load at the end of your index.html a script with:
angular.bootstrap(document, ["myAppModule"]);
You can also make a $http request before you bootstrap angular. In your case this will look something like this:
var initInjector = angular.injector(["ng"]);
var $http = initInjector.get("$http");
return $http.get("config.json").then(function (response) {
//this is to load the config to a constant
angular.module("myAppModule").constant("config", response.data);
angular.bootstrap(document, ["myAppModule"]);
}, function (errorResponse) {
console.error("config not found!");
});
I've browsed through the documentation but couldn't find anything mentioning this. I'm using Angular's $http service and want to run code before every ajax event, and after every ajax event (to display a loading message while waiting for the server to respond).
I have jQuery included and tried doing:
$(document).ready(function() {
$('body').ajaxSend(function(event, jqXHR) {
console.log('in jquery send');
}) ;
});
But couldn't get the message logged to the console. Any help is appreciated.
Please check out the docs on $http service: http://docs.angularjs.org/api/ng.$http
You will see that there are two options that you can use:
httpInterceptor (see Response interceptors section in the docs) - it allows you to wrap every response and do whatever you want before it completes the request. It uses promises so it's really easy to even do some async stuff after each request.
request/response transformations (see Transforming Requests and Responses) - it allows you to process every request and response that goes through $http - so that would be my choice as it allows you to hook before and after the request.