Here in this blog I am going to show some advanced and common functionalities of Angular JS which can be used to web applications development.
Before we start if you want to learn more basics of Angular JS, please visit Introduction to Angular JS
Angular Services and making AJAX calls using Angular JS.
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
Services
AngularJS has about 30 built-in services. Here I’m going to explain most common used and advanced.
The service factory function generates the single object or function that represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive) that specifies a dependency on the service
Location
· The $location
service has methods which return information about the location of the current web page:
Example:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.mydataUrl();
});
HTTP
· The $http
service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response.
Example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("Employess/{EmployeeId}").then(function (response) {
$scope.myApp = response.data;
});
});
Timeout
· The $timeout
service is AngularJS' version of the window.setTimeout
function.
Example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
})
AJAX and Service Calls
You can create your own customized Service to make AJAX calls.
Example:
app.service(employee, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
The Controller :
module.controller('MyCtrl', function($scope, myService) {
myService.getEmployees().then(function(employees) {
$scope.employees = employees;
});
});
The Service:
module.factory('myService', function($http) {
return {
getEmployees: function() {
//return the promise directly.
return $http.get('/employees)
.then(function(result) {
//resolve the promise as the data
return result.data;
});
}
}
});
In the above example you can see that Controller “MyCtrl” is calling the service “myService” with the function call “getEmployees()”, as a result the service is calling the API or Service End point using HTTP request($http) with the required Parameters.
AJAX call using POST method.
In the previous example how to get the data from the api using $http.get method has been shown. Now let us see how to send/post data using $http.post method to backend.
Example:
The controller:
UserService.createUser(userObj).then(
function (response) {
uc.addUsersWindow.data(StringValues.KENDO_WINDOW).close();
SweetAlert.swal({ title: StringValues.EMPTY, text: StringValues.USER_ADDED_SUCCESSFULLY, type: StringValues.SUCCESS, timer: 1000 });
uc.usersGrid.dataSource.read();
},
function (error) {
SweetAlert.swal({ title: '', text: error.errorMessage, type: Application.ERROR, timer: 2500 });
});
The Service:
CMSApp.factory('UserService', ['$http', '$q', 'ApiServerSettings', 'StringValues', function ($http, $q, ApiServerSettings, StringValues) {
UserFactory.createUser = function (userObj) {
var methodUrl = ApiServerSettings.ApiServerPath + 'Account/Register';
var deferred = $q.defer();
$http.post(methodUrl, userObj)
.success(function (response) {
deferred.resolve(response);
})
.error(function (response) {
deferred.reject(response);
});
return deferred.promise;
}
In the above example you can see that method create user in controller is calling the service userfactory.create user with api url in it.
There are several methods that can be used with $http service to make AJAX calls.
- .delete()
- .get()
- .head()
- .jsonp()
- .patch()
- .post()
- .put()