Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

REST Web Service with AngularJS

In this post I will cover with example how to create a JSON based WCF Rest Web Service and use this with angular web application.

Rest Web Service

RESTful Web Services are web services that follws REST architecture. In REST Architecture everything is a resource.

Following are core advantages using rest web services

Light weight
Scalable
Maintainable

Example:

In this example with the assumption that REST based service is already in place to retrieve the doctors and add doctor’s data, we will write the angular application using this WCF web service.

Angular Service created using Factory

var DoctorService = angular.module('DoctorService', [])
DoctorService.factory('DoctorsDataOp', ['$http', function ($http) {
 
    var urlBase = 'http://localhost:54393/Service1.svc';
    var DoctorDataOp = {};
 
    DoctorDataOp.getDoctors = function () {
        return $http.get(urlBase + '/GetallDoctors');
    };
 
    DoctorDataOp.addDoctors = function (doct) {
        return $http.post(urlBase + '/AddDoctors', doct);
    };
    return DoctorDataOp;
 
}]);

 

There are two methods first method “getDoctors” retrieves all doctors data using the $http.get and Second method add doctors using the $http.post. In the service we are using other inbuilt angular service $http to make the call to the service.

 

Angular Controller

var myApp = angular.module('myDoctorApp', ['DoctorService']);
 
myApp.controller('DoctorController', function ($scope, DoctorDataOp) {
    $scope.status;
    $scope.doctors;
    getDoctors();
 
    function getDoctors() {
        DoctorDataOp.getDoctors()
            .success(function (dcts) {
                $scope.doctors = dcts;
            })
            .error(function (error) {
                $scope.status = 'Unable to load doctors data: ' + error.message;
            });
    }
 
    $scope.addDoctor = function () {
 
        var doct = {
            ID: 1,
            Name: $scope.Name,
            Phone: $scope.Phone,
            Address: $scope.Address
        };
        DoctorDataOp.addDoctor(doct)
            .success(function () {
                $scope.status = 'Inserted Doctor Suceessfully!';
                $scope.doctors.push(doct);
            }).
            error(function (error) {
                $scope.status = 'Unable to insert Doctor: ' + error.message;
            });
    };
});

 

In the controller we are using “getDoctors” and “addDoctors” functions to scope. As it is clear from the name that these functions are used to fetch doctors and add doctors data respectively. As a dependency DoctorSevice module is passed in the module and in the controller we are passing the DoctorDataOp service as the dependency.

 

Angular View

In following view there are two sections first section used add new doctors data and second section simply displays doctors data using ng-repeat directive.

In the input form we are setting Name, Phone and Address properties on the $scope object and then calling addDoctor () function of the controller to add a doctors data to the database.

<html>
<head>
    <title></title>
     <script src="~/Content/js/angular.min.js"></script>
    <script src="Content/js/AngularRestService.js"></script>
    <script src="Content/js/DoctorController.js"></script>
</head>
<body>
    <div ng-app="myDoctorApp" ng-controller="DoctorController">
            <form class="well">              
                <input type="text" name="name" ng-model="Name" placeholder="doctor name" /> <br/>      
                <input type="text" name="phone" ng-model="Phone" placeholder="doctor phone" /> 
                 <input type="text" name="address" ng-model="Address" placeholder="doctor address" />           
                <br /><br/>              
                <input type="button" value="add doctor" ng-click="addDoctor()" />
            </form>
            <br/>
            <table class="table">
                <tr ng-repeat="d in doctors">
                    <td>{{ d.Name }}</td>
                    <td>{{ d.Phone }}</td>
                    <td>{{ d.Address }}</td>
                </tr>
            </table>
        </div>
</body>
</html>

धन्यवाद मित्रानो !! Thanks Friends !!


Invalid entry,please enter valid data.

Loading