Question

我正在使用AngularJS并使用ngRoute进行路由。我想知道这是否是Angular在路由到＆＃34时的正常行为;否则＆＃34;部分并激活所有控制器？

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' });
    }]);

我已经在每个控制器的顶部发出警报，甚至是我的工厂。在启动时，会显示所有警报。而不是去＆＃34; ExpenseOverview＆＃34;首先，它检查我的控制器，而不仅仅是绑定到＆＃34; / ExpenseOverview＆＃34;的那个。

这可能是什么原因？

编辑： 了解Angular在启动时访问所有控制器是正常的，主要问题尚未解决。这在StackOverflow上的another thread中进行了解释。我认为这与它有关，因为我不知道Angular执行此操作是正常的行为。

我可以说这个帖子已经关闭，因为我现在已经回答了我的问题。

Answer 1

Angular在启动时不会访问每个控制器，但ngRoute会这样做。在$ routeProvider中具有相应路由条目的控制器中的任何初始化代码都将在初始化时运行。

以下是一个例子：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>

AngularJS - 使用路由激活所有控制器

1 个答案: