Home » Angularjs » How to execute angular controller function on page load?

How to execute angular controller function on page load?

Posted by: admin November 2, 2017 Leave a comment

Questions:

Currently I have an Angular.js page that allows searching and displays results. User clicks on a search result, then clicks back button. I want the search results to be displayed again but I can’t work out how to trigger the search to execute. Here’s the detail:

  • My Angular.js page is a search page, with a search field and a search
    button. The user can manually type in a query and press a button and
    and ajax query is fired and the results are displayed. I update the URL with the search term. That all works fine.
  • User clicks on a result of the search and is taken to a different page – that works fine too.
  • User clicks back button, and goes back to my angular search page, and the correct URL is displayed, including the search term. All works fine.
  • I have bound the search field value to the search term in the URL, so it contains the expected search term. All works fine.

How do I get the search function to execute again without the user having to press the “search button”? If it was jquery then I would execute a function in the documentready function. I can’t see the Angular.js equivalent.

Answers:

On the one hand as @Mark-Rajcok said you can just get away with private inner function:

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

Also you can take a look at ng-init directive. Implementation will be much like:

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

But take care about it as angular documentation implies (since v1.2) to NOT use ng-init for that. However imo it depends on architecture of your app.

I used ng-init when I wanted to pass a value from back-end into angular app:

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

Questions:
Answers:

Try this?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

Questions:
Answers:

I could never get $viewContentLoaded to work for me, and ng-init should really only be used in an ng-repeat (according to the documentation), and also calling a function directly in a controller can cause errors if the code relies on an element that hasn’t been defined yet.

This is what I do and it works for me:

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

Unless you’re using ui-router. Then it’s:

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

Questions:
Answers:
angular.element(document).ready(function () {

    // your code here

});

Questions:
Answers:

Dimitri’s/Mark’s solution didn’t work for me but using the $timeout function seems to work well to ensure your code only runs after the markup is rendered.

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

Hope it helps.

Questions:
Answers:

You can do this if you want to watch the viewContentLoaded DOM object to change and then do something. using $scope.$on works too but differently especially when you have one page mode on your routing.

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });

Questions:
Answers:

You can use angular’s $window object:

$window.onload = function(e) {
  //your magic here
}

Questions:
Answers:

Another alternative:

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

(via https://stackoverflow.com/a/30258904/148412)

Questions:
Answers:

When using $routeProvider you can resolve on .state and bootstrap your service. This is to say, you are going to load Controller and View, only after resolve your Service:

ui-routes

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

Service

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

Questions:
Answers:

Found Dmitry Evseev answer quite useful.

Case 1 : Using angularJs alone:

To execute a method on page load, you can use ng-init in the view and declare init method in controller, having said that use of heavier function is not recommended, as per the angular Docs on ng-init:

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

HTML:

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

Controller:

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

Warning : Do not use this controller for another view meant for a different intention as it will cause the search method be executed there too.

Case 2 : Using Ionic:

The above code will work, just make sure the view cache is disabled in the route.js as:

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

Hope this helps

Questions:
Answers:

I had the same problem and only this solution worked for me (it runs a function after a complete DOM has been loaded). I use this for scroll to anchor after page has been loaded:

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

Questions:
Answers:

Yet another alternative if you have a controller just specific to that page:

(function(){
    //code to run
}());

Questions:
Answers:

You can save the search results in a common service which can use from anywhere and doesn’t clear when navigate to another page , And then you can set the search results with the saved data for the click of back button

function search(searchTerm){
//retrieve the data here;
RetievedData=CallService();
CommonFunctionalityService.saveSerachResults(RetievedData);
} 

For your backbutton

function Backbutton(){
RetievedData=CommonFunctionalityService.retrieveResults();
}