WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS AJAX - $http


AngularJS $ http is a service for reading data from a web server.

$ http.get (url) is a function for reading server data.

Disclaimer (v1.5)

v1.5 $http success and error Method is deprecated. use then Method substitution.

AngularJS $http

The AngularJS $http administration makes a demand to the server, and restores a response.

Example

Make a straightforward demand to the server, and show the outcome in a header:

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>

Methods

AngularJS $ http is a service for reading data from a web server.

$ http.get (url) is a function for reading server data.

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

The techniques above are altogether alternate ways of calling the $http service:

Example

var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        technique : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

AngularJS $ http is a service for reading data from a web server.

$ http.get (url) is a function for reading server data.


Properties

The reaction from the server is an article with these properties:

  • .config the item used to produce the request.
  • .data a string, or an article, conveying the reaction from the server.
  • .headers a capacity to use to get header information.
  • .status a number characterizing the HTTP status.
  • .statusText a string characterizing the HTTP status.

Example

var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statustext;
    });
});

To handle mistakes, add one additional capacities to the .then method:

Example

var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        /First capacity handles success
        $scope.content = response.data;
    }, function(response) {
        /Second capacity handles error
        $scope.content = "Something went wrong";
    });
});

JSON

Example

The ng-repeat mandate is ideal for circling through an array:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function(response) {
        $scope.myData = response.data.records;
    });
});
</script>

Application analysis:

Note: The get request of the above code is the server of this site. You cannot directly copy it to your local server. There will be cross-domain problems.

AngularJS applications are defined by ng-app . used for <div> Medium execution.

ng-controller directive sets a controller Object .

The function customersController is a standard JavaScript Object constructor .

The controller object has one attribute: $scope.names

$http.get() Read static from web server JSON data

The server data file is: 

When loading JSON data from the server, $ scope.names becomes an array.



Welookups is optimized for learning. © 2018 -
All Right Reserved and you agree to have read
and accepted our term and condition.
welookups.com