how to maintain list of service calls in angular js? - angularjs

I need one help for Angular js.
I need make the 400 service calls when click on button, but it is taking too much time in iPad hybrid application. can any one suggest me how to maintain the service calls.
Now i am using
forEach.array(function(){
here i am making service call.
});
Is there any other way to do this one like main thread or child thread in angular js?
Can you please help me any one.

There is something called as angular interceptors. You can just track the outgoing request from the interceptor to capture the service call being made.
Here is a tutorial that will explain it to you.
What you do is essentially in you app.js file push the interceptor service.
$httpProvider.interceptors.push(yourservice);
This service will contain your logic to capture the request and responses being made. The service is a simple angular service which qul contain the request variable.
var _request = function (config) {
config.headers = config.headers || {};
//the header should contain your request URL's. Identify the ones which are serivce requests and add them to a queue
return config;
}

Related

Appending some info to each requset in REST API

I have an angular application. From frontend I can set some value. This value is something like config, which can be changed.
It is simple string variable. How to attach this config to each REST request ?
I ask mainly about approach.
Maybe pass it via headers is good idea ?
For angular 1.x, write an Interceptor:
For purposes of global error handling, authentication, or any kind of
synchronous or asynchronous pre-processing of request or
postprocessing of responses, it is desirable to be able to intercept
requests before they are handed to the server and responses before
they are handed over to the application code that initiated these
requests
For angular 2.x / 4.x, RequestOptions should be the key to solve your problem. Set base url for angular 2 http requests
I'm using angular2, my solution is create a Service and inject "Http" dependency, then write two methods "get", "post", these methods add an entry to header before calling "Http", in other component / service, I just inject this Service class, then call its "get" or "post".
Your code should be somewhat like this If your working in angular 1.3 or less
The data should be sent as body data to server
var basecall = Restangular.all('url');
bascall.post($scope.config).then(function(data){
})

Detecting when a user's click goes to the server and when it does not in AngularJS web app

Is there a way to detect when a user's click somewhere in our web app accesses to the server and when it does not? We need this knowledge for a simple keep alive mechanism we want to add to the app. I have already implemented the functionality to detect user clicks anywahere in page, using help from this post: Click everywhere but here event. And now we need to add functionality to detect when the click causes an access to server and when it doesn't (because we use two timers in our keep alive, one for server session and one for client session).
The backend is implemented in ASP.NET Core Web API.
Thanks,
ashilon
The least invasive solution I can think of would be to add a request or response interceptor to the $http service that would track the time of the last event. It might look something like this, but obviously would have to be modified for the particulars of your angularjs app.
angular.module('yourAppName').
service('SessionInterceptor',
['$q', '$rootScope',
function($q, $rootScope) {
'use strict';
return {
response: function(response) {
$rootScope.lastServerActivity = response.headers().date;
return response;
},
responseError: function(rejection) {
$rootScope.lastServerActivity = rejection.headers().date;
return $q.reject(rejection);
}
};
}]);
Then you can use the lastServerActivity to calculate an idle time on their next click or via a timer and kill the session if appropriate. You could just as easily implement the request side rather than the response side. You could also use javascript to get the date rather than from the http headers. Whatever you choose will be influenced by how you are doing the client side session timeouts.

How to communicate AngularJS's $http routes and APIs developed in C Programming

I have made web application GUI using AngularJS, Bootstrap, HTML, CSS.
Backend team are developing APIs in C Programing.
So how my routes in $http request (sending from factory) will communicate to C Programing API (Controller) to get data or to perform related operations.
Thanks!
You would just need the URI and the Async request would look like this:
$http.get('URI goes here').then(
function (response) {
//success
vm.data = response;
},
function (response) {
//fail
console.log("error");
}
);
I think you need to learn the concepts of Web API's. Basically the server (C written in your case?) responds to various HTTP requests (GET, POST, PUT, etc..). By defining a Web API you simply state that for some http request for a specific path - there's gonna be a meaningful response.
For example here's a Web API:
GET /api/users - list users
GET /api/users/{id} - get a specific user
POST /api/users/{id} - update specific user
To consume this endpoint (/api/users) you can use $resource or $http like so:
var UserFactory = $resource('/api/users/:id');
var userlist = UserFactory.query();
var user = UserFactory.get({id: 123});
user.$promise.then(function(){
user.balance = 100000000;
user.$save();
});
Basically in the background angular translates $resource calls to HTTP requests.

How to use two separate $http service instances in AngularJS?

I am implementing an angularjs service, which saves the data sent by an $http call in localStorage. In order to do that, I am using the request interceptor, so that whenever an http request is sent via $http, the data is saved in localStorage. Below is my code for the interceptor,
var OfflinkJs = angular.module('OfflinkJs', []);
OfflinkJs.factory('cacheInterceptor', function () {
var cacheInterceptor = {
request: function (config) {
// Here I am saving the config as a string in localstorage
return config;
}
};
return cacheInterceptor;
});
For above interceptor to work, I have to register it in the interceptors array of $httpProvider. I have done this to achieve that,
OfflinkJs.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('cacheInterceptor');
}]);
PROBLEM
Now, when I use OfflinkJS module in another module, all the $http calls go through my interceptor. But I would like to make some requests sent by $http service use my interceptor while some other requests NOT.
Since $http service is a singleton, I cannot figure out how to use two instances of it in separate places of my application. Is there any way to achieve this?
I went through this question, but seems it really addresses the issue of Circular dependency
I need two instances of AngularJS $http service or what?
I check the URL in the interceptor and use that to filter out requests to other services. I set the base url for my service as a constant in my module, and then check against that. If the request isn't to the relevant service, it just passes through with no action.
But perhaps a better way would be to set up a data service instead of an interceptor. There are plenty of tutorials out there on data services.

Angular basic authentication and token

I'm getting crazy to understand how to handle a basic authentication with an API.
Basically what I need to do is to request a token from an API sending a module-username and module-password (not a user login). The server should return a token that I will need to use for all other request I will make to the server.
Looking on internet I've found solution that involves user logins and angular routing.
I'm not using any routing, the routing is managed server side and I need to consume the API on few pages, before consuming I need to attach the token to every request.
I don't understand exactly how to start properly.
I should need to create an ajax request for the first authentication, save the token somewhere and use it for all other requestes. Keeping in mind that if the token is not valid I should request it again.
I'm quite confused on how to do it, I can not find any good tutorial.
Any help?
I'm still learning Angular myself, but hopefully this basic example helps you. You can use $cookies to save and retrieve a token that is sent back from your server. Then, assuming you are using $http or $resource, you can use an $httpProvider interceptors to add the current token value (retrieved from $cookies) to the header of every outgoing request your app makes.
Here's a simple example of how you might create an $httpProvider interceptor:
authServices.factory('sendTokenInHeader', ['$cookies', function($cookies) {
return {
request: function(config) {
var token = $cookies.getObject('x-my-token');
if(token) {
var updateHeaders = config.headers || {};
updateHeaders['x-my-token'] = token;
config.headers = updateHeaders;
}
return config;
}
};
}]);
Then in your app.config you need to just push this interceptor and now any outgoing $http/$resource request will include the current token!
myApp.config(['$httpProvider', function($httpProvider) {
// do other stuff...
$httpProvider.interceptors.push('sendTokenInHeaders');
}]);

Resources