How to execute AngularJS controller function on page load?

Question

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.

Answer 1

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>

Answer 2

Try this?

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

Answer 3

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
});

Answer 4

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

    // your code here

});

Answer 5

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.

Answer 6

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
 });

Answer 7

You can use angular's $window object:

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

Answer 8

Another alternative:

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

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

Answer 9

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
 }
}

Answer 10

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

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

Answer 11

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

Answer 12

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

                    });

Answer 13

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;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

For your backbutton

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

Answer 14

call initial methods inside self initialize function.

(function initController() {

    // do your initialize here

})();