如何使用angularjs路由来调用javascript函数

Question

I'm trying to use the routing of angularjs to call a javascript function if a certain url is used.

The following code is not providing the expected result:

var app = angular.module('myApp', []);

app.config(function($routeProvider) {
    $routeProvider.when('/link1', {
         controller: 'PageController'
   })
   .when('/link2', {
        controller: 'PageController'
   })
   .otherwise({ 
        controller: 'PageController'
   });
});

app.controller('PageController', function($scope, $routeParams) {
   alert('1');
});

The alert(1); is not called if one of these URLs are requested...

Maybe someone knows how to solve this ?

Answer 1

Controller is not called until you specify template or templateUrl option in $routeProvider configuration. If there is no template needed, you could specify one-space char (but not empty string). Like so

$routeProvider.when('/link1', {
     controller: 'PageController',
     template: ' '
})

Answer 2

There is no way to associate the routing with a specific action in the controller. The routing in the AngularJS is not like the routing in other web frameworks to route to specific action of request. Instead, the routing in the AngularJS is primarily relating to handle the page flow and the controller defines the scope of the page.

However, if you put the alert in the controller like that, it should be triggered when the page is loaded. You need to check whether the URL you used is correct or not. To test, you can simply put $location.url('/link1') in your code.

Answer 3

If your controller is being used on a particular route, then you can call that function inside the controller. It will get executed once the route changes and your controller is called.

In this http://plnkr.co/edit/qUZ5Q7nKCRAS8dFvjRIg when you click on link1 it displays alert.

I can't quite catch why your code doesn't work as expected, but I created a similar app setup and it works:

var app = angular.module('myApp',[]).

config(['$routeProvider',function($routeProvider) {
      $routeProvider.
          when('/', {
            controller: 'PageController',
            template: '<br><br>this is page #/<br> {{data}}',
          }).
          when('/link1', {
            controller: 'SpecificPageController',
            template: '<br><br>this is page #/link1<br> {{data}}' 
          }).
          when('/link2', { 
            controller: 'PageController',
            template: '<br><br>this is page #/link2<br> {{data}}' 
          }).
          otherwise({redirectTo:'/'});
    }]).

controller('PageController', function($scope, $routeParams) {
    $scope.data = 'hello world';
}).

controller('SpecificPageController', function($scope, $routeParams) {

    $scope.data = 'hello specific';
    alert(1);    
});

Whenever SpecificPageController is assigned to a route, and that route opened, the alert function gets executed.