AJAX is the short form of Asynchronous JavaScript and XML. AJAX was primarily designed for updating parts of a web page, without reloading the whole page.
The reason for designing this technology was to reduce the number of round trips which were made between the client and the server and the number of entire page refresh which used to take place whenever a user required certain information.
AJAX allowed web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This meant that it was possible to update parts of a web page, without reloading the whole page.
Many modern-day web applications actually follow this technique for refreshing the page or getting data from the server.
In this tutorial, you will learn-
Angular provides two different APIs to handle Ajax requests. They are
We will look at the "$resource" property in Angular, which is used to interact with servers at a high level.
When we talk about interacting at a higher level, it means that we will only be bothered about what the server has to offer regarding functionality and not about what exactly the server does in detail with regards to this functionality.
For example, if the server was hosting an application which maintains the employee information of a certain company, the server might expose functionality to clients such as GetEmployeeDetails, SetEmployeeDetails, etc.
So at a high level, we know what these two functions can do, and we can invoke them using the $resource property. But then we don't know exactly the details of the "GetEmployeeDetails" and the "SetEmployeeDetails functions", and how it is implemented.
The above explanation explains what is known as a REST-based architecture.
So let's assume, we have a web application that maintains a list of Events.
If we wanted to get to the list of all of the events,
So for example, if there was an Event with an ID of 1, then we can get the details of this event via the URL. http://example/events/1
What is the $resource object
The $resource object in Angular helps in working with servers that serve applications on a REST based architecture.
The basic syntax of the @resource statement along with the various functions are given below
Syntax of @resource statement
var resource Object = $resource(url);
Once you have the resourceObject at hand, you can use the below functions to make the required REST calls.
1. get([params], [success], [error]) – This can be used to make the standard GET call.
2. save([params], postData, [success], [error]) - This can be used to make the standard POST call.
3. query([params], [success], [error]) - This can be used to make the standard GET call, but an array is returned as part of the response.
4. remove([params], postData, [success], [error]) - This can be used to make the standard DELETE call.
In all of the functions given below the 'params' parameter can be used to provide the required parameters, which need to be passed in the URL.
For example,
How to use $resource property
In order to use the $resource property, the following steps need to be followed:
Step 1) The file "angular-resource.js" needs to be downloaded from the Angular.JS site and has to place in the application.
Step 2) The application module should declare a dependency on the "ngResource" module in order to use the $resource.
In the following example, we are calling the "ngResource" module from our 'DemoApp' application.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Step 3) Calling the $resource() function with your REST endpoint, as shown in the following example.
If you do this, then the $resource object will have the ability to invoke the necessary functionality exposed by the REST endpoints.
The following example calls the endpoint URL: http://example/events/1
angular.module('DemoApp.services').factory('Entry', function($resource)
{
return $resource('/example/Event/:1); // Note the full endpoint address
});
In the example above the following things are being done
When defining the Angular application, a service is being created by using the statement 'DemoApp.services' where DemoApp is the name given to our Angular application.
The .factory method is used to create the details of this new service.
'Entry' is the name we are giving to our service which can be any name you want to provide.
In this service, we are creating a function which is going to call the $resource API
$resource('/example/Event/:1).
The $resource function is a service which is used to call a REST endpoint. The REST endpoint is normally a URL. In the above function, we are using the URL (/example /Event/:1) as our REST endpoint. Our REST endpoint(/example /Event/:1) denotes that there is an Event application sitting on our main site "example". This Event application is developed by using a REST-based architecture.
The result of the function call is a resource class object. The resource object will now have the functions ( get() , query() , save() , remove(), delete() ) which can be invoked.
Step 4) We can now use the methods which were returned in the above step( which are the get() , query() , save() , remove(), delete() ) in our controller.
In the below code snippet, we are using the get() function as an example
Let's look at the code which can make use of the get() function.
angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
var obj = MyFunction.get({ 1: $scope.id }, function() {
console.log(obj);
});
In the above step,
An example of what can be returned is shown below
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}
}
The $http is another Angular JS service which is used to read data from remote servers. The most popular form of data which is read from servers is data in the JSON format.
Let's assume, that we have a PHP page ( http://example/angular/getTopics.PHP ) that returns the following JSON data
"Topics": [
{
"Name" : "Controllers",
"Description" : "Controllers in action"
},
{
"Name" : "Models",
"Description" : "Binding data using Models"
},
{
"Name" : "Directives",
"Description" : "Using directives in Angular"
}
]
Let's look at the AngularJS code using $http, which can be used to get the above data from the server
<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
$http.get("http://example/angular/getTopics.PHP")
.then(function(response)
{
$scope.names = response.data.records;});
});
</script>
In the above example
Angular can also be used to fetch data from a server running MySQL or SQL.
The idea is that if you have a PHP page connecting to a MySQL database or an Asp.Net page connecting to an MS SQL server database, then you need to ensure both the PHP and the ASP.Net page renders the data in JSON format.
Let's assume, we have a PHP site (http://example /angular/getTopics.PHP) serving data from either a MySQL or SQL database.
Step 1) The first step is to ensure that the PHP page takes the data from a MySQL database and serves the data in JSON format.
Step 2) Write the similar code shown above to use the $http service to get the JSON data.
Let's look at the AngularJS code using $http which can be used to get the above data from the server
<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
$http.get("http://example /angular/getTopics.PHP")
.then(function(response)
{
$scope.topics = response.data.records;});
});
</script>
Step 3) Render the data in your view using the ng-repeat directive.
Below we are using the ng-repeat directive to go through each of the key-value pairs in the JSON objects returned by the "get" method of the $http service.
For each JSON object, we are displaying the key which is "Name" and the value is "Description".
<div ng-app="myApp" ng-controller="AngularCtrl">
<table>
<tr ng-repeat="x in topics">
<td>{{ x.Name }}</td>
<td>{{ x.Description }}</td>
</tr>
</table>
</div>
Summary: