AngularJS controller ajax examples

Angularjs basic ajax example to display value returned from ajax server call. We’ll use controller, template and $http for this tutorial.

Angularjs Ajax GET example using $http.get()

$http.get is a shortcut for ajax call in service $http. The data returned from server gets automatically sanitised using html entities conversion. So the tags in the data literally appear as tags in this example.

<div ng-app="myApp" ng-controller='MyCtrl'>
  <p>{{ajaxHtmlData}}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http) {
  $http.get("/api/get-hello-world-with-tags.php")
    .then(function(response) {
      $scope.ajaxHtmlData = response.data;
    });
});
</script>
refresh

Angularjs Ajax GET example using $http.get() with error handling

<div ng-app="myApp" ng-controller='MyCtrl'>
  <p>{{ajaxHtmlData}}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http) {
  $http.get("/api/test-404.php")
    .then(function(response) {
      $scope.ajaxHtmlData = response.data;
    }, function(response) {
      // handle error
      $scope.ajaxHtmlData = "Error. status: " + response.status + " statusText: " + response.statusText;
    });
});
</script>
refresh

Angularjs Ajax GET example with params using $http()

Here request params are getting appended to url and hence the requested url is /api/get-dump-raw.php?name1=value1.

<div ng-app="myApp" ng-controller='MyCtrl'>
  <pre>{{ajaxHtmlData}}</pre>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http) {
  var req = {
    method: 'GET',
    url: '/api/get-dump-raw.php', 
    params: {name1:"value1"},
  }
  $http(req)
    .then(function(response) {
      $scope.ajaxHtmlData = response.data;
    });
});
</script>
refresh

Angularjs Ajax POST example using $http()

Here we need to use $httpParamSerializerJQLike to serialize params.

<div ng-app="myApp" ng-controller='MyCtrl'>
  <pre>{{ajaxHtmlData}}</pre>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http, $httpParamSerializerJQLike) {
  var data = {name1:"value1"}
  var req = {
    method: 'POST',
    url: '/api/post-dump-raw.php', 
    data: $httpParamSerializerJQLike(data),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
  $http(req)
    .then(function(response) {
      $scope.ajaxHtmlData = response.data;
    }, function(response) {
      // handle error
      $scope.ajaxHtmlData = "Error. status: " + response.status + " statusText: " + response.statusText;
    });
});
</script>
refresh

Angularjs Ajax POST example using $http.post()

<div ng-app="myApp" ng-controller='MyCtrl'>
  <pre>{{ajaxHtmlData}}</pre>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope, $http, $httpParamSerializerJQLike) {
  var headers = {headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
  $http.post('/api/post-dump-raw.php', $httpParamSerializerJQLike({name1:"value1"}), headers)
    .then(function(response) {
      $scope.ajaxHtmlData = response.data;
    }, function(response) {
      // handle error
      $scope.ajaxHtmlData = "Error. status: " + response.status + " statusText: " + response.statusText;
    });
});
</script>
refresh

Related links

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments