AgularJS HTTP Get Method ($http.get) with Example

  Total Views : 1678
  Comments : 0
 
  Keywords : What is http get method in angularjs, Angularjs $http.get service example, Angularjs use http get method to get data from api url example, Angularjs pass / send data using http get method

Here we will learn angularjs http get method / service ($http.get) with example, use of http get method in angularjs and how to use http get ($http.get method) in angularjs applications with example.

AngularJS $http.get Method

In angularjs $http service is used to send or get data from remote http servers using browsers XMLHttpRequest object. 

 

In angularjs $http service is having many shortcut methods available like $http.get, $http.post, $http.put, etc. based on our requirement we will use those methods in our angularjs applications.

 

In angularjs get ($http.get()) service or method is used to get data from remote HTTP servers. In angularjs get is a one of the shortcut method in $http service.

 

In other ways, we can say that $http.get service or method in $http service is used to get data from the given URI.

Syntax of AngularJS $http.get Method

Following is the syntax of using $http.get method in angularjs applications.

 

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

app.controller('getserviceCtrl', function ($scope, $http) {

// Simple GET request example:

$http({

method: 'GET',

url: '/sampleUrl',

data: 'parameters'

}).then(function success(response) {

// this function will be called when the request is success

}, function error(response) {

// this function will be called when the request returned error status

});

});

If you observe syntax of angularjs $http.get method we have different properties like method, url, data and then success and error functions. We will learn each property in detail.

 

method - This property is used to define required operator like get or send data. In angularjs we have different methods available.

 

url - We need to send url of http server to perform required operations.

 

data - If we have any parameters to send and get data from request url we will pass it using this parameter.

 

then - In then property we will do our coding based on response status either success or failure. If it is success it will execute first method or in case if we get error second method will execute. 

 

Note: In above syntax we passed $http as argument to the controller. To use service in controller we need to pass $http as parameter.

 

The response object which we will get in $http.get method has following properties

 

config  - The configuration object is used to generate the request.

 

data - It’s string or an object which is used to carry response from the server.

 

headers - This function is used to get header information.

 

status - This property is used to get HTTP status code of the response.

 

statusText - This property is used to get HTTP status text of the response.

 

We will see how to use $http.get service in angularjs with example.

Example of AngularJS $http.get() Service 

Following is the example of using angularjs $http.get service in application.

 

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $http.get() Service Response Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

app.controller('serviceCtrl', function ($scope, $http) {

$http({

method: 'GET',

url: 'sample.html'

}).then(function success(response) {

$scope.myWelcome = response.data;

$scope.statusval = response.status;

$scope.statustext = response.statusText;

$scope.headers = response.headers();

}, function error(response) {

});

});

</script>

</head>

<body>

<div ng-app="serviceApp" ng-controller="serviceCtrl">

<p>Hi, Guest</p>

<h1>{{myWelcome}}</h1>

<p>StatusCode: {{statusval}}</p>

<p>Status: {{statustext}}</p>

<p>Response Headers: {{headers}}</p>

</div>

</body>

</html>

If you observe above code we mentioned url as ‘sample.html’ in $http.get service. For that create one new html file in your application and give name as ‘sample.html’.

 

Now open ‘sample.html’ file and remove complete default code from the file and write the code like as shown below

 

Welcome to Tutlane.com

Now we will run and see the output of above angularjs $http.get method that would be like as shown following.

Output of AngularJS $http.get Service Example

Following is the result of using $http.get service in angularjs application.

 

Angularjs $http get Service example output or result

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User