Angularjs_Services_Ajax_http_resolves

To get the data from the server end or to calculate the data from input data or to get data from some value objects we can use the service, factory or providers.

 

Using factory to make ajax call to server to get data

So here in factory

The value that is returned by invoking the function reference passed to module.factory

 

So the when a factory is defined then the value returned by a factory is the return form a function whose reference is passed to factory module

Here we have defined a factory module with required dependencies.

 

 

 

$http – This is used to make the ajax calls.

$q – Asynchronous calls are cases where you cant guarantee the response i.e. the calls which are delayed. When creating a deferred i.e. a ajax xhr call, it’s state is pending and it doesn’t have any result (An http request is made but not aware of response now). And we its aware it will call a callback function.

When we resolve() or reject() the deferred, it changes it’s state to resolved or rejected. But in the mean time, we can get the associated promise (objects with some apis) immediately after creating a deferred (async ajax xhr call) and even assign interactions with it’s future result i.e. using the data in callbacks where result can be success (200) or can be failure (401, 400, 500) but those interactions will occur only after the deferred rejected or resolved.

So by using promise object we can create an operation before even decide what’s going to happen after the resolve.

An async call doesn’t have to know how it continues, it only has to signal when it is ready and thats why ajax used ready state change callback.

While deferred has methods for changing the state of an operation, a promise exposes only methods needed to handle and figure out the state, but not methods that can change the state.

Returning a promise and not a deferred is a good practice in a function. This prevents from external code to interfere the progress or the state of an operation.

 

So here we are returning the promise objects.

 

 

$rootscope is the object having the application scope and we can store or access any params from this object at any point in the application.

 

Now to make calls using $http and defer the call we write the code below.

 

 

Use these factories in Controllers.

Inject the factory dependency.

 

 

For pagination to get employees in that page range

 

 

So in above code if some click the button to change the page number, pageChanged will get called which use some $scope variables such as current page and page number etc and make call to

 

and passes reference to success and failure callbacks

 

In success

call back it assigns response data to Employees in scope.

 

 

 

While in failure

 

It show the error using $translate (internationalisation in angularjs) and shows error as NETWORK_ERROR

 

 

So the entire code will look like

 

 

Thats all

 

Download Code

 

 

AngularJs ajax call from factory.
Tagged on:         

3 thoughts on “AngularJs ajax call from factory.

  • June 29, 2016 at 7:50 am
    Permalink

    Really this is an amazing post which i had ever see. Thanks lot for providing this unique information which will be helpful for me to generalize the factors

    Reply
    • July 11, 2016 at 4:01 am
      Permalink

      Welcome Haritha…

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *