Search code examples
javascriptangularjsurl-routing

AngularJS - activating all controllers with routing


I am working with AngularJS and using the ngRoute for routing. I was wondering if this is normal behavior for Angular when it routes to the "otherwise" part and activates all controllers?

var angularApp = angular.module('AngularApp', ['ngRoute']);
    angularApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/ExpenseOverview', {
                controller: 'ExpenseOverviewController',
                templateUrl: 'Angular/Views/ExpenseOverview.vbhtml'
            })
            .when('/AddExpense',
            {
                controller: 'AddExpenseController',
                templateUrl: 'Angular/Views/AddExpense.vbhtml'
            })
        .otherwise({ redirectTo: '/ExpenseOverview' });
    }]);

I have put an alert at the very top in each controller, even my factory. And on startup, all alerts are shown. Instead of going to "ExpenseOverview" at first, it checks both my controllers and not just the one that is bound to "/ExpenseOverview".

What could be the cause of this?

EDIT: Knowing it's normal for Angular to access all controllers on startup, the main problem isn't fixed yet. This is explained in another thread on StackOverflow. I thought this had something to do with it, because I had no idea that it was normal behavior for Angular to do this.

I could say that this thread is closed, because I have an answer to my question now.


Solution

  • Angular does not access every controller on start up, however, ngRoute does. Any initialization code in a controller that has a corresponding route entry in $routeProvider, will run at initialization.

    Here's an example of this at play: http://plnkr.co/edit/WsvbKhcR74yoX80bskdb?p=preview

    <!DOCTYPE html>
    <html ng-app="app">
    
      <head>
        <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
        <script data-require="ng-route@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>
      </head>
    
      <body ng-controller="main">
        <h1>Hello {{test}}!</h1>
        <div ng-view="">Hello?</div>
        <script>
          var app = angular.module('app', ['ngRoute']);
          app.config(function ($routeProvider) {
              $routeProvider
                  .when('/route1', {
                      controller: 'con1',
                      templateUrl: 'view1'
                  })
                  .when('/route2',
                  {
                      controller: 'con2',
                      templateUrl: 'view2'
                  })
              .otherwise({ redirectTo: '/route1' });
          });
    
          app.controller('main', function($scope){
            alert('1');
            $scope.test = 'Yo.';
          });
    
          app.controller('con1', function($scope){
            alert('2');
            $scope.value = 'value1';
          });
    
          app.controller('con2', function($scope){
            $scope.value = 'value2'
          });
    
        </script>
        <script type="text/ng-template" id="view1">
          View 1 {{value}}
        </script>
        <script type="text/ng-template" id="view2">
          View 2 {{value}}
        </script>
      </body>
    
    </html>