InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

AngularJS

  • Hello world
  • ng-init
  • ng-model
  • Controller to increment value
  • Controller - basic clock
  • Controller - ajax
  • date filter
  • include template (url)
  • include template (inline)
  • tabs using ng-switch
  • conditional style using ng-style
  • animation with ng-class
  • ng-if vs ng-hide/ng-show

AngularJS Directives

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-blur
  • ng-change
  • ng-checked
  • ng-class
  • ng-class-even and ng-class-odd
  • ng-click
  • ng-cloak
  • ng-dblclick
  • ng-disabled
  • ng-focus
  • ng-hide
  • ng-href
  • ng-if
  • ng-list
 
  • Home
  • > Tutorials
  • > Javascript
  • > AngularJS

AngularJS controller ajax examples

on Feb 24, 2016

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 done
try it online

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 done
try it online

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 done
try it online

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 done
try it online

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 done
try it online

Related links

  • Angular Js $http API

Suggested posts:

  1. jQuery post form data using ajax
  2. jQuery jsonp and cross domain ajax
  3. jquery ajax – post form having file uploads
  4. AngularJS controller basic clock example
  5. React component ajax example
  6. jQuery how to load a url into an element
  7. AngularJS simple controller tutorial to increment a value
  8. How to include angularjs javascript in wordpress post
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged AngularJS, Javascript, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress