How to fill an AngularJS form loading data via XMLHttpRequest?

Today, We want to share with you xmlhttprequest cannot load angularjs.In this post we will show you angularjs components demo, hear for angular.min.js XMLHttpRequest cannot load file we will give you demo and example for implement.In this post, we will learn about AngularJS GET Data In Ajax Example Using $Http with an example.

xmlhttprequest angular Example

page.html

<div id="PersonalAppID" data-ng-controller="PersonalAppCtrl as profileController">
<form action="/" method="post" novalidate> 
<div class="input-group">
<div class="form-group col-md-5">
<label>First name: </label>
<input name="fname" type="text" data-ng-model="profileController.fname" placeholder="first name">
</div>
</div>

page.js

angular.controller('PersonalAppCtrl',function() { var profileController = this;

        profileController.$onInit= function(){
            var req=XMLHttpRequest();

            req.onreadystatechange = function(){
                if (req.status == 200&req.readyState==4){
                    var ret = convertJSON(req.responseText);
                    $scope.$apply(function () {
                       profileController.fname = ret.FirstName;
                    });
                    return (true);
                }
           }
           req.open();
           req.send();
        }

Example

function Ctrl($scope) {
  $scope.message = "Waiting 2000ms for update";

    setTimeout(function () {
        $scope.message = "Timeout called!";
        // AngularJS unaware of update to $scope
    }, 2000);
}

using $scope.$apply()

function Ctrl($scope) {
  $scope.message = "Waiting 2000ms for update";

    setTimeout(function () {
        $scope.$apply(function () {
            $scope.message = "Timeout called!";
        });
    }, 2000);
}

$HTTP – XMLHTTPREQUEST OBJECT & JSON

Methods

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body>
  <div ng-app="pakainfoApplication" ng-controller="productController"> 
    <ul>
      [name], [earth-sun=1], [capacity speed]
      <li ng-repeat="x in names">
        {{ x.name + ', ' + x.mileage + ', ' + x.capacity }}
      </li>
    </ul>
  </div>

  <script>

  var app = angular.module('pakainfoApplication', []);
  app.controller('productController', function($scope, $http) {
    $http.get("http://www.yourdomainname.com/api/files/httpRequest/products.json")
    .success(function(response) {$scope.names = response;});
  });
  </script>

</body>
</html>

With products.json:

[
  {"name":"Mobile", "mileage":30.087, "capacity":"4 hours"},
  {"name":"Laptop", "mileage":19.208, "capacity":"2 hours 40 minutes"},
  {"name":"Computer", "mileage":9.523, "capacity":"1 hour 20 minutes"}, 
  {"name":"Dasktop", "mileage":5.203, "capacity":"43 minutes"}, 
  {"name":"LCD", "mileage":1.524, "capacity":"12.6 minutes"}, 
  {"name":"LED", "mileage":1.0, "capacity":"0"}, 
  {"name":"IPhone", "mileage":0.723, "capacity":"6 minutes"}, 
  {"name":"TV", "mileage":0.387, "capacity":"3 minutes"}, 
  {"name":"VCD", "mileage":0.003, "capacity":"1.5sec"}
]

I hope you get an idea about AngularJS AJAX – $http.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.