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

【问题标题】：AngularJS - activating all controllers with routingAngularJS - 使用路由激活所有控制器
【发布时间】：2017-06-28 15:59:17
【问题描述】：

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

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

我已经在每个控制器的最顶部设置了警报，甚至我的工厂也是如此。在启动时，会显示所有警报。它不是一开始就去“ExpenseOverview”，而是检查我的两个控制器，而不仅仅是绑定到“/ExpenseOverview”的那个。

这可能是什么原因？

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

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

【问题讨论】：

不，Angular 激活所有控制器是不正常的行为。向我们展示您的其余代码（包括模板）以找出问题所在。否则就是猜谜游戏……
您是否调用了主屏幕中的ExpenseOverviewController 脚本？
我不知道这是 Angular 的正常行为。主要问题在另一个线程中进行了解释，我认为这是困扰整个项目的问题。 @frhd 你的回答满足了我的要求，谢谢你。
没有。默认情况下，每个控制器在启动时都不会被访问。您应该重新检查导致您得出这个相当不寻常的结论的原因。

标签： javascript angularjs url-routing

【解决方案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>

【讨论】：