$http with Angular JS

by Rajdeep Chandra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" ng-controller="myCtrl">

    <label>Name: {{hello.name}}</label>
     <label>Password: {{hello.pass}}</label>
    <label>Email: {{hello.Email}}</label>
  <form ng-submit="sendPost()" novalidate name="userForm">
    <div class="form-group">
      <input ng-model="newName" class="form-control" required/>
    </div>
    <div class="form-group">
      <input ng-model="newPassword" type="password" required ng-minlength="3" ng-maxlength="8" class="form-control"/>
    </div>
    <div class="form-group">
      <input ng-model="newEmail" required type="text" class="form-control"/>
    </div>
    <button class="btn btn-primary" type="submit" ng-disabled="userForm.$invalid">Send</button>
  </form>

</div>

JavaScript

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $http) {
    $scope.hello = {
      name: ""
    };
    $scope.newName = "";
  $scope.newPassword = "";
   $scope.newEmail = "";
    $scope.sendPost = function() {
      var data = $.param({
        json: JSON.stringify({
          name: $scope.newName,
        pass: $scope.newPassword,
          Email: $scope.newEmail
        })
      });
      $http.post("/echo/json/", data).success(function(data, status) {
        $scope.hello = data;
      })

    }
  })