Angularjs: How To Call Controller Function After Routing

Question

I'm learning angularjs and there is one aspect of it that I'm struggling to understand.

My desired/expected behavior of the code below is:

User clicks the Paris link (anchor tag)
The routeProvider intercepts the request, loads the paris.html page into the ng-view.
The 'getCity' function in the controller gets the data and sets the scope variables, which are displayed in the london.html expressions.

However, I can't figure out how to config angularjs to use the 'getCity' function when the html page is loaded into the ng-view. The closest I can get is calling the 'getCity' function from within the CityController itself, bit this seems to have the undesired effect of calling the function when the whole app (index.html) is loaded instead of only when the link is clicked. The controller will have a number of different functions.

I also know you can use ng-click to call a controller's function, but I'm unsure how this would work with loading a html page into an ng-view through the route provider.

Any help would be appreciated. Please see code below from a small app built for learning purposes:

index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>


</head>
<body>


        <ol>

            <li><a href="#/cities/paris">Paris</a></li>

        </ol>


        <div class="content-wrapper" ng-controller="CityController">
            <div ng-view></div>
        </div>


        <script src="resources/js/app.js"></script>

        <script src="resources/js/CityController.js"></script>

</body>
</html>

app.js

var app = angular.module("mainApp", [ 'ngRoute' ]);

app.config([ '$routeProvider', function($routeProvider) {

    $routeProvider.

    when('/cities/paris', {
        templateUrl : 'resources/paris.html',
        controller : 'CityController'
    }).


    otherwise({
        redirectTo : ''

    });


} ]);

CityController.js

app.controller('CityController', function($scope, $http) {

    $scope.getCity = function() {

        $http.get('city')
        .success(function(response) {
            $scope.name = response.name;
            $scope.country = response.country;
        }).error(function() {
            //Output error to console 
        });

    };

     //$scope.getCity();

});

I don't want to call getCity here because it means the http get request to the 'city' endpoint is called when index.html is loaded

paris.html

This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>

Bhabishya Kumar · Accepted Answer · 2016-04-22 20:40:44Z

1

I think what you are looking for is the router resolve option.

A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

Check the explanation and usage here

edited Apr 22, 2016 at 20:40

answered Apr 22, 2016 at 18:43

Bhabishya Kumar

7313 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

misss-popcorn · Accepted Answer · 2016-04-22 17:52:53Z

0

You can call getCity() from paris.html using ,ng-init=getCity() ,ng-init will call your function as soon as paris.html is loaded into your ng-view . For Eg.

This is Paris.
<br><br><br>
 <div ng-init=getCity() >
  Name: {{name}}<br>
  Country: {{country}}
 </div>
<br><br><br>

answered Apr 22, 2016 at 17:52

misss-popcorn

6103 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angularjs: How To Call Controller Function After Routing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related