X
02Dec

How to use AngularJS Services and Controllers

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()

Related

Introduction to AngularJS

                         In this bl...

Read More >

Telerik RAD (Rapid Application Development) Controls for ASP.NET AJAX

Introduction:Telerik provides a ultimate toolbox for developers which includes Web UI Controls, Desk...

Read More >

Populate data as Facebook feeds in ASP.NET

Want to load the data dynamically as Facebook feeds?Need to populate the data when scrollbar comes d...

Read More >

Share

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Text/HTML
Contact Us
  • *
  • *