How to use a angularjs route to call a javascript function

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 ?

How are you navigating to the url /link1 for example? You do realize this is a hashtag for whichever page you are using for your single page app. For example if your base file is index.html, then you have to navigate to /index.html#/link1 — thalisk
– thalisk, Commented Aug 27, 2013 at 15:22

acidron · Accepted Answer · 2013-08-27 17:12:07Z

6

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: ' '
})

answered Aug 27, 2013 at 17:12

acidron

4174 silver badges8 bronze badges

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

1 Comment

Oliver13 Over a year ago

Many Thanks to all of you for the answers !! Particularly this answers solves my problem.

zs2020 · Accepted Answer · 2013-08-27 15:36:16Z

1

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.

answered Aug 27, 2013 at 15:36

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Comments

Harijs Deksnis · Accepted Answer · 2013-08-27 15:35:48Z

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.

Collectives™ on Stack Overflow

How to use a angularjs route to call a javascript function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related