Introduction To AngularJS – Day Eighteen

In the 18th day of AngularJS article series, we are going to be learning the next key players/concept of AngularJS, and understanding the concept of Built in Services of AngularJS. Before moving on to key players/concepts of AngularJS, please read my previous articles:

1. Introduction to AngularJS – Day 1
2. Introduction to AngularJS – Day 2
3. Introduction to AngularJS – Day 3
4. Introduction to AngularJS – Day 4
5. Introduction to AngularJS – Day 5
6. Introduction to AngularJS – Day 6
7. Introduction to AngularJS – Day 7
8. Introduction to AngularJS – Day 8
9. Introduction to AngularJS – Day 9
10. Introduction to AngularJS – Day 10
11. Introduction to AngularJS – Day 11
12. Introduction to AngularJS – Day 12
13. Introduction to AngularJS – Day 13
14. Introduction To AngularJS – Day 14
15. Introduction To AngularJS – Day 15
16. Introduction To AngularJS – Day 16
17. Introduction to AngularJS – Day 17

AngularJS provides many built in services. For example:

$http Service

The $http service is used to make Ajax call to get the server data.

1. $http service provides Ajax functionality.
2. Uses the browser's XmlHttpRequest object.
3. Makes asynchronous requests.
4. Supports multiple HTTP verbs:
   
   • $http.get
   • $http.post
   • $http.put
   • $http.delete
   • $http.jsonp
   • $http.head

Using this $http service you can access data from any .json file, you can call PHP, Web Api etc.

Syntax:

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);

//Creating controller & injecteing $http service in controller
app.controller("myController", function ($scope, $http) {

In the above we inject the ‘$http’ service and how to use it see following code:
$scope.init = function () {
        $http({
            method: "GET",
            url: "http://localhost:62039/api/Employees",
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).
        success(function (data, status, headers, config) {
            $scope.employees = data;
        }).
        error(function (data, status, headers, config) {

        });
    };

Accessing $http Response Data:

$http makes asynchronous calls: 

1. Relies on $q service's deferred/promise APIs
2. Access data by calling then() or success()/error()
   
   
   

The above screen shot you can see colored, to access data using success/then.

Example:

In the below demo example we are going to see how we can you ‘$http’ service for CRUD operations. Here we use Web Api to access or save data to database.

app.js

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);

//Creating controller & injecteing $http service in controller
app.controller("myController", function ($scope, $http) {

    $scope.update = false;

    //Initialize data
    $scope.init = function () {
        $http({
            method: "GET",
            url: "http://localhost:62039/api/Employees",
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).
        success(function (data, status, headers, config) {
            $scope.employees = data;
        }).
        error(function (data, status, headers, config) {

        });
    };

    //Add Employee
    $scope.addEmployee = function () {
        $scope.para = {
            Id: $scope.temp.id,
            Name: $scope.temp.name,
            Designation: $scope.temp.desg,
            City: $scope.temp.city
        };

        $http.post('http://localhost:62039/api/Employees/PostEmployee', $scope.para).
        success(function (data, status, headers, config) {
            if (data) {
                $scope.temp = {
                    id: '',
                    name: '',
                    desg: '',
                    city: ''
                };
                if (!$scope.update) {
                    $scope.employees.push(data);
                }
            }
        }).
        error(function (data, status, headers, config) {

        });

    };

    //Update Employee
    $scope.editEmployee = function (emp) {
        $scope.temp = {
            id: emp.Id,
            name: emp.Name,
            desg: emp.Designation,
            city: emp.City
        };
        $scope.index = $scope.employees.indexOf(emp);
    };

    //Delete Employee
    $scope.delEmployee = function (emp) {
        var r = confirm("Are you sure want to delete this employee!");
        if (r == true) {
            $http({
                method: "DELETE",
                url: "http://localhost:62039/api/Employees/" + emp.Id,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).
            success(function (data, status, headers, config) {
                if (data.success) {
                    var index = $scope.employees.indexOf(emp);
                    $scope.employees.splice(index, 1);
                }
            }).
            error(function (data, status, headers, config) {

            });
        }
    };

    //Update Employee
    $scope.updateEmployee = function () {
        $scope.update = true;
        $scope.addEmployee();
    };

});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Welcome to C# Corner</title>
    <meta charset="utf-8" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="app/app.js"></script>

</head>
<body ng-controller="myController" ng-init="init()">

    <div class="container">
        <!--<h1 class="text-center">Welcome to C# Corner</h1>-->
        <h3 class="text-center">AngularJS CRUD Operations using $http Services</h3>

        <div class="row mt80">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 animated fadeInDown">

                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" placeholder="Name" data-ng-model='temp.name'>
                    </div>
                    <div class="form-group">
                        <label>Designation</label>
                        <input type="text" class="form-control" placeholder="Designation" data-ng-model='temp.desg'>
                    </div>
                    <div class="form-group">
                        <label>City</label>
                        <input type="text" class="form-control"placeholder="City" data-ng-model='temp.city'>
                    </div>
                    <div class="text-center">
                        <input ng-hide="temp.id" type="button" class="btn btn-save" ng-click="addEmployee()" value="Add"/>
                        <input ng-hide="!temp.id" type="button" class="btn btn-save" ng-click="updateEmployee()" value="Update"/>
                    </div>

            </div>

            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 animated fadeInUp">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th width="5%">ID</th>
                                <th width="20%">Name</th>
                                <th width="20%">Designation</th>
                                <th width="20%">City</th>
                                <th width="20%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="emp in employees | orderBy : '-id'">
                                <th scope="row">{{emp.Id}}</th>
                                <td> {{emp.Name}} </td>
                                <td> {{emp.Designation}} </td>
                                <td> {{emp.City}} </td>
                                <td> <span data-ng-click="editEmployee(emp)"> Edit</span> | <span data-ng-click="delEmployee(emp)">Delete</span> </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Before running the html file run your Web Api application and then open the html file. After opening html file you can see output as follows in browser:



Next, I am going to add employee record in that see below screen shot:



Click on ‘Add’ button, record is added. See side table the added record:



Now, next click on side table last column on ‘Edit’:



After click on ‘Edit’, it will populate data in left side for see. I am going to change the ‘Designation’:



Next, click on ‘Update’ button.



See above screen shot the ‘Designation’ field is updated. Now, click on ‘Delete’ action of ‘ID’ is 9, it will prompt message ‘Are you sure want to delete the employee!’ as follows:



Here, I click on ‘OK’ button and record ‘ID-9’ is deleted see below screen shot:



Great, $http service in AngularJS with example created successfully!

Summary

I hope that beginners as well as students can understand the concept of $http service in AngularJS with exampls. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!

Read more articles on AngularJS:

• Basic CRUD Operations Using AngularJS
• CRUD In Kendo Gird Using AngularJS And ASP.NET Web API