What is services in AngularJs? and How to create and use of services?

What is services in AngularJs?

AngularJs services are function which use to handle the server communication over the browser with help of XMLHttpRequest object and $http.

Also used to share the data and its behaviors in the controller, directive, filters and other services over the your apps.

It create the singleton instance over the angular apps and call the services using the service name in the controller.

How to create services?

There are different way to create the services. The services methods are creating using this keyword and the angular module for more detail you can seen the below example.

    var app = angular.module('appServices', []);

    app.service('angularServices', function ($http) {
        this.getUser = function () {
            return $http({
                method: 'GET',
                url: baseURL
            });
        }
    });
OR
app.service('angularServices', getUser);

var getUser = function (baseURL) {
    return $http({
        method: 'GET',
        url: baseURL
    });
};

How to use it?

I am going to use the services over the services name in the controller as given below
   app.controller ("angularController", function ($scope, angularServices) {
        $scope.users = null;

        //Call the services using the services name "angularServices".
        angularServices.getUser(baseURL).then(function (data) {
            if (data !== undefined) {
                console.log(data);
                $scope.users = data;
            }
        });
    });

The above we can seen the "angularServices" is the name of angular services and call in "angularController". After success the call, we get the response and assign in the users collection.

The example in detail over the creating and using the services as give below.

The AngularJs code sample

var app = angular.module('appServices', []);
        app.service('angularServices', function ($http) {
            this.getUser = function (baseURL) {
                return $http({
                    method: 'GET',
                    url: baseURL
                });
            }
        });

        app.controller("angularController", function ($scope, angularServices) {
            var baseURL = "http://localhost:9669/";
            $scope.users = [{
                UserID: 1,
                UserName: 'Anil Singh',
                UserEmailID: '[email protected]',
                UserAddress: 'Noida, India'
            }, {
                UserID: 2,
                UserName: 'Sunil Singh',
                UserEmailID: '[email protected]',
                UserAddress: 'Noida, India'
            }, {
                UserID: 3,
                UserName: 'Sushil Singh',
                UserEmailID: '[email protected]',
                UserAddress: 'Noida, India'
            }];


            //Call the services using the services name "angularServices".
            angularServices.getUser(baseURL).then(function (data) {
                if (data !== undefined) {
                    console.log(data);
                    $scope.users = JSON.stringfy(data);
                }
            });
        });
       
The HTML Code sample as given below.

<div ng-app="appServices">
    <div ng-controller="angularController">
        <div>
            <h1>Users Detail</h1>
        </div>
        <div ng-repeat="user in users">
            <div>UserID : {{user.UserID}}</div>
            <div>UserName: {{user.UserName}}</div>
            <div>UserEmail: {{user.UserEmailID}}</div>
            <div>UserAddress: {{user.UserAddress}}</div>
            <ul></ul>
        </div>
    </div>
</div >

The Full Live (Angular +HTML) code as given below.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script>
        var app = angular.module('appServices', []);
        app.service('angularServices', function ($http) {
            this.getUser = function (baseURL) {
                return $http({
                    method: 'GET',
                    url: baseURL
                });
            }
        });

        app.controller("angularController", function ($scope, angularServices) {
            var baseURL = "http://localhost:9669/";
            $scope.users = [{
                UserID: 1,
                UserName: 'Anil Singh',
                UserEmailID: '[email protected]',
                UserAddress: 'Noida, India'
            }, {
                UserID: 2,
                UserName: 'Sunil Singh',
                UserEmailID: '[email protected]',
                UserAddress: 'Noida, India'
            }, {
                UserID: 3,
                UserName: 'Sushil Singh',
                UserEmailID: '[email protected]',
                UserAddress: 'Noida, India'
            }];


            //Call the services using the services name "angularServices".
            angularServices.getUser(baseURL).then(function (data) {
                if (data !== undefined) {
                    console.log(data);
                    $scope.users = JSON.stringfy(data);
                }
            });
        });
    </script>
</head>
<body ng-app="appServices">
    <div ng-controller="angularController">
        <div>
            <h1>Users Detail</h1>
        </div>
        <div ng-repeat="user in users">
            <div>UserID : {{user.UserID}}</div>
            <div>UserName: {{user.UserName}}</div>
            <div>UserEmail: {{user.UserEmailID}}</div>
            <div>UserAddress: {{user.UserAddress}}</div>
            <ul></ul>
        </div>
    </div>
</body>
</html>


Here is an example for wring a services that handles GET, PUT, POST, and DELETE calls to API service as given below.

    var app = angular.module('appServices', []);

    app.service('angularServices', function ($http) {
       //get user API call
       this.getUser = function (baseurl, id) {
            return $http.get(baseurl + '/' + id);
        };

       //Add user API call
        this.insertUser = function (baseurl, user) {
            return $http.post(baseurl, user);
        };

       //Update user API call
        this.updateUser = function (baseurl, user) {
            return $http.put(baseurl, user);
        };

       //Delete user API call
        this.deleteUser = function (baseurl, id) {
            return $http.delete(baseurl + '/' + id);
        };
    });

    app.controller("angularController", function ($scope, angularServices) {
        var baseURL = "http://localhost:9669/";

        //Call the services using the services name "angularServices".

        //Call the get user services.
        angularServices.getUser(baseURL +'api/GetUser', '001').then(function (data) {
            if (data !== undefined) {
                console.log(data);
                //TODO
            }
        });

        var user ={id:1, name:'anil', age:29};
       //Call the update user services.
        angularServices.updateUser(baseURL +'api/UpdateUser', user).then(function (data) {
            if (data !== undefined) {
                console.log(data);
                //TODO
            }
        });

    //Call the add user services.
        angularServices.insertUser(baseURL +'api/AddUser', user).then(function (data) {
            if (data !== undefined) {
                console.log(data);
                //TODO
            }
        });

     //Call the delete user services.
        angularServices.deleteUser(baseURL +'api/DeleteUser', '001').then(function (data) {
            if (data !== undefined) {
                console.log(data);
                //TODO
            }
        });

    });

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book