AngularJs Http post services

The $http.POST() services are used to send the data to a specific URI and expects the resource at that URI to handle the request that means we can say that POST is used to Insert the new data's to the given URLs.

The examples as,

//The AngularJs code-sample
var app = angular.module('myServiceApp', []);
app.controller('myServiceCtrl', function ($scope) {
  $scope.name = null; //default
  $scope.age = null; //default
  $scope.adress = null; //default
  $scope.lblMsg = null; //default

  $scope.postdata = function (name, age, adress) {
        var data = {
                    name: name,
                    age: age,
                    adress: adress
    };
               
       //Call the services
       $http.post('htpp://localhost:8080/api/users/post', JSON.stringify(data)).then(function (rest, status) {
          if (status) {
                 if (rest.data)
                     $scope.lblMsg = "post data submit successfully!";
                  } else {
                        $scope.lblMsg = "faild!";
              }
           });
        };
});

//The HTML code-sample
<div ng-app="myServiceApp">
    <div ng-controller="myServiceCtrl">
        <div>
            Name :
            <input ng-model="name" />
            <br> Age :
            <input ng-model="age" />
            <br> Adress :
            <input ng-model="adress" />
            <br>
            <a href="#" ng-click="postdata(name, age, adress)">Send</a>
            <br> Output Message : {{ $scope.lblMsg}}
        </div>
    </div>
</div>

//The Full Live demo code-sample(HTML + Angular)
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Processing $http.post() response in service</title>
    <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script>
        var app = angular.module('myServiceApp', []);

        app.controller('myServiceCtrl', function ($scope) {
            $scope.name = null; //default
            $scope.age = null; //default
            $scope.adress = null; //default

            $scope.lblMsg = null; //default

            $scope.postdata = function (name, age, adress) {
                var data = {
                    name: name,
                    age: age,
                    adress: adress
                };
                alert(JSON.stringify(data));
                //Call the services
                $http.post('htpp://localhost:8080/api/users/post', JSON.stringify(data)).then(function (rest, status) {
                    if (status) {
                        if (rest.data)
                            $scope.lblMsg = "post data submit successfully!";
                    } else {
                        $scope.lblMsg = "faild!";
                    }
                });
            };

        });
    </script>
</head>
<body ng-app="myServiceApp">
    <div ng-controller="myServiceCtrl">
        <div>
            Name :
            <input ng-model="name" />
            <br> Age :
            <input ng-model="age" />
            <br> Adress :
            <input ng-model="adress" />
            <br>
            <a href="#" ng-click="postdata(name, age, adress)">Send</a>
            <br> Output Message : {{ $scope.lblMsg}}
        </div>
    </div>
</body>
</html>

The live output,

About Blogger

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