Angularjs call ajax function on page load

/ / 0 Comments

Call ajax function on page load: Here in this article will learn how to call controller function when our webpage gets loaded. While developing project many time we need to call some javascript functions directly after the page gets loaded. For example, we want to display some popup message on page load in AngularJS or show some notification message as soon as the HTML rendered.
Sometimes we also need to call some API or ajax call, so here we were going to see how to call ajax method whenever the page gets loaded i.e onload in angularjs application.

With these 2 ways, we can execute ajax function after page load.

  1. Using ng-init() directive.
  2. Call method on $window.onload.

Step to call ajax method onload in AngularJS.

  1. Add ng-app directive and the Angularjs script.
  2. Create and define controller with $http service.
  3. CODE: Calling controller function which we want to get called when the page gets renders.

# Add ng-app directive and the Angularjs script

Before writing any code first, we want to download and import Angularjs script file on our webpage. We can download AngularJS files from angularjs.org, or we can include Google hosted files cdn. After importing Angularjs file, add Directive ng-app & ng-controller to the body tag.
 <body ng-app="myapp" ng-controller="myController">
 <h2>Github JSON Data </h2><br/>
 <p> {{myData}} <p>
</body>

# Create and define controller with $http service.

In our HTML body tag, we already added an attribute ng-controller with having value myController i.e. the name of our controller. Also as we want to make an ajax call, we need to add $http service . $http is an AngularJS service which is used to transfer data from remote server.

If you from jQuery background then you must familiar with the $.ajax() method, which is used to make ajax call, but in angularjs, we use $http service. Here we make an ajax call by calling GitHub API, which gives JSON response.
Our final code looks like as written below.

<script type="text/javascript">

 var app = angular.module("myapp", []);
 app.controller("myController", ['$scope','$http', function ($scope,$http) {

    $http.get("welcome.htm")
    .then(function(response) {
       $scope.myData = response.data;
     });
 }]);
</script>

Also Read: How to Delete Table Row on button click in AngularJs

# On page load (render) call controller function.

As we are ready with HTML markup and our ajax function, now we want to call ajax function on page load. Check below given 2 example.

Example 1: Using ng-init()
Here using ng-init directive we able to call ajax method on page load. We call init() function which consumes ajax request, and in response, it gives JSON result.

<body ng-app="myapp" ng-controller="myController" ng-init='init()' >
<h2>GitHub JSON Data </h2><br/>
<p>{{myData}}<p>

<script type="text/javascript">
 var app = angular.module("myapp", []);
 app.controller("myController", ['$scope','$http', function ($scope,$http) {
    $scope.init = function () {
       $http.get("https://api.github.com/users/isatindersingh/repos")
       .then(function(response) {
          $scope.myData = response.data;
      });
   }
}]);
</script>
</body> 
View Demo

Example 2: Using $window.onload

Another way to do it by using $window.onload, for that first we need to add $window in our controller. Then by putting an Ajax function on $window.onload, will execute the ajax request whenever the page gets loaded.
The code looks like as written below.
<body ng-app="myapp" ng-controller="myController" >
<h2>GitHub JSON Data </h2><br/>
<p>{{myData}}<p>

<script type="text/javascript">
 var app = angular.module("myapp", []);
 app.controller("myController", ['$scope','$http','$window', function ($scope,$http,$window) {
    $window.onload = function () {
         $http.get("https://api.github.com/users/isatindersingh/repos")
         .then(function(response) {
            $scope.myData = response.data;
         });
     }
 }]);
</script>
</body>
View Demo 

Conclusion: In this article, we learned two ways to call ajax function in AngularJS application. Using ng-init and $window.onload we consume ajax request on page load.

You must also like this:

  1. How to Bind JSON data to HTML Table [AngularJs]
  2. How to Delete Table Row tr on button click in AngularJS
  3. How to create serial number using ng-repeat in AngularJS

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments