w3schools.

com

  HTML CSS MORE  

AngularJS AJAX - $http

❮ Previous Next ❯

$http is an AngularJS service for reading data from remote servers.

AngularJS $http
The AngularJS $http service makes a request to the server, and returns a
response.

Example
Make a simple request to the server, and display the result in a header:

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

We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and
<p>Today's advertising.
welcome message is:</p>
<h1>{{myWelcome}}</h1>
Manage choices

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

Try it Yourself »

Methods
The example above uses the .get method of the $http service.

The .get method is a shortcut method of the $http service. There are several
shortcut methods:

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

The methods above are all shortcuts of calling the $http service:

We use cookies to understand how you use our site and to improve your experience. This includes

Example
personalizing content and advertising.

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

Try it Yourself »

The example above executes the $http service with an object as an

argument. The object is specifying the HTTP method, the url, what to do on
success, and what to do on failure.

Angajam programator PHP/ SQ

Salariu intre 500- 2000 Eur

Properties
We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.

The response from the server is an object

Manage with these properties:
choices

.config the object used to generate

OK the request.
 .data a string, or an object, carrying the response from the server.
.headers a function to use to get header information.
.status a number defining the HTTP status.
.statusText a string defining the HTTP status.

Example

var app = 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;
});
});

Try it Yourself »

To handle errors, add one more functions to the .then method:

Example

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
// First function handles success
We use cookies to understand how=you
$scope.content use our site and to improve your experience. This includes
response.data;
personalizing content and advertising.
}, function(response) {
// Second function handles error
Manage choices
$scope.content = "Something went wrong";
OK
 });
});

Try it Yourself »

JSON
The data you get from the response is expected to be in JSON format.

JSON is a great way of transporting data, and it is easy to use within

AngularJS, or any other JavaScript.

Example: On the server we have a file that returns a JSON object containing
15 customers, all wrapped in array called records .

Click here to take a look at the JSON object.

Example
The ng-repeat directive is perfect for looping through an array:

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

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

</div>
We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.
<script>
Manage choices
var app = angular.module('myApp', []);
app.controller('customersCtrl',
OK function($scope, $http) {
 $http.get("customers.php").then(function(response) {
$scope.myData = response.data.records;
});
});
</script>

Try it Yourself »

Application explained:

The application defines the customersCtrl controller, with a $scope and

$http object.

$http is an XMLHttpRequest object for requesting external data.

$http.get() reads JSON data from

https://www.w3schools.com/angular/customers.php.

On success, the controller creates a property, myData , in the scope, with

JSON data from the server.

❮ Previous Next ❯

We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.

Manage choices

OK
We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.

Manage choices
COLOR PICKER
OK
 HOW TO

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 


We use cookies to understand how youCERTIFICATES

use our site and to improve your experience. This includes
personalizing content and advertising.
HTML
CSSchoices
Manage
JavaScript
SQL
OK
 Python
PHP
jQuery
Bootstrap
XML

Read More »

Panasonic Yasumi

Aflați mai multe

iRest SL A385
Robostic 2D Zero
Gravity cu încălzire

Aflați mai multe

iRest SL A39
Robostic cu
încălzire

Aflați mai multe

We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.

Manage choices

OK
 REPORT ERROR

PRINT PAGE

FORUM

ABOUT
We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.

Manage choices
Top Tutorials
OK
 HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP 5 Tutorial
PHP 7 Tutorial
jQuery Tutorial
Java Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
jQuery Reference
Angular Reference
Java Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
We use cookies to understand how you useXML Examples
our site and to improve your experience. This includes
personalizing content and advertising.
Web Certificates
Manage
HTML choices
Certificate
CSS Certificate
OK
JavaScript Certificate
 SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

W3Schools is optimized for learning, testing, and training. Examples might be simplified to
improve reading and basic understanding. Tutorials, references, and examples are constantly
reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this
site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright
1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

We use cookies to understand how you use our site and to improve your experience. This includes
personalizing content and advertising.

Manage choices

OK