Running Angular Script on page Load

Question

I have trouble with calling a function when the page loads. I'm not sure what tag I should use within html to run Angular application.

I am trying to pull user data from a database and display it in a table. It works when I use a button to call the function but I would like it to be more automated. I've done some research and it always leads me to using the controller but I am sure there has to be a simpler solution.

<tbody>
    <Button ng-click="fetchEveryone();">click</Button>
        <tr ng-repeat="user in all_users">
            <td>
                <img src="/images/{{user.pic}}" style="height: 50px; width: 50px; border-radius: 100px;"/>
            </td>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
            <td>
                <select ng-change="" ng-model="selectedMeeting">
                        <option value="">Select Meeting Type...</option>
                        <option ng-repeat="meeting in meetings">{{meeting}}</option>
                </select>   
            </td>
            <td>
                <button>request</button>
            </td>
        </tr>
</tbody>

Here is the Angular code. It makes a request to python server.

$scope.fetchEveryone = function(){
        var req = {
            verb: 'getPeople',
            names: $scope.Allusers 
        }

        $scope.callAPI(req, function(response){
            $scope.all_users = response;
            $scope.view = 'viewPerson'
        });
}

There is an answer right here - http://stackoverflow.com/questions/15458609/how-to-execute-angular-controller-function-on-page-load - Did you try that? — haakon.io, Jan 04 '17 at 21:57

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You can call it using ng-init as haakon319 suggested in this post. Otherwise, you can call it in your controller after the function definition and it will run when the controller loads:

function myController($scope){
    $scope.callAPI = function(req, callback){
       //some function
    };

    $scope.fetchEveryone = function(){
        var req = {
            verb: 'getPeople',
            names: $scope.Allusers 
        }

        $scope.callAPI(req, function(response){
            $scope.all_users = response;
            $scope.view = 'viewPerson'
        });
    };

    $scope.fetchEveryone();

}

If you have more than one thing that needs to happen, better practice might be to have a dedicated init function to call all needed functions:

function myController($scope){
    $scope.callAPI = function(req, callback){
        //some function
    };

    $scope.fetchEveryone = function(){
        var req = {
            verb: 'getPeople',
            names: $scope.Allusers 
        }

        $scope.callAPI(req, function(response){
            $scope.all_users = response;
            $scope.view = 'viewPerson'
        });
    };

    function moreBackendCalls(){
        //more backend calls
    };

    function init(){

        $scope.fetchEveryone();
        moreBackendCalls();

        //init some variables
        $scope.test1 = 'new test';
        $scope.test2 = 73;

    }

    init();

}

Alternatively, you can add the init to scope with:

$scope.init = function(){
   .....
}

and add to your HTML in the following way:

<tbody ng-init="init()">
    .......
</tbody>

It will then run when the route with that html is loaded.

Running Angular Script on page Load

1 Answers1