Question

我开始使用AngularJS开发我的第一个大项目，当我在考虑应用程序的设计时，我发现了一些我不理解的东西。

我在单页应用程序中思考，因此我使用ng-view和routeProvider将每个查询路由到正确的模板和控制器。但是，我的一些模板有点复杂，我首先想到使用不同的控制器来管理每个模板。也就是说，同一模板的不同部分将由不同的控制器管理。问题（或者至少，我认为是问题）是routeProvider只允许将一个模板关联到一个控制器。这让我觉得除了使用routeProvider在路由配置中指定的模板之外，我不能使用另一个控制器作为模板。

然后我开始弄清楚如何重构未来的项目，这样我就可以在同一个模板中维护每个不同的功能，由单个控制器管理，并且仍然允许它们之间的交互控制器。

经过一番头痛之后，我决定尝试实施我的第一种方法，看看它是如何失败的......真是太可怕了！它工作得很好！但是，我不确切知道为什么。

让我告诉你这个简单的例子：

的script.js

angular.module('myApp', [
  'ngRoute'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'MainCtrl' 
      });

    $locationProvider.html5Mode(true);
  });

angular.module('myApp')
  .controller('MainCtrl', function ($scope) {
    // whatever...
    });
  });

angular.module('myApp')
  .controller('FirstCtrl', function ($scope) {
      $scope.first = function(){
           alert("First");
      };
    });
  });

angular.module('myApp')
  .controller('SecondCtrl', function ($scope) {
      $scope.second= function(){
           alert("Second");
      };
    });
  });

main.html中

<div ng-controller="FirstCtrl">
    <button ng-click="first()">First!</button>
</div>

<div ng-controller="SecondCtrl">
    <button ng-click="second()">Second!</button>
</div>

的index.html

<body ng-app="myApp">
    <div ng-view=""></div>
</body>

我想如果你配置路由将“main”模板与“MainCtrl”控制器关联起来，那将是唯一与模板交互的控制器，但事实并非如此。

我首先想到的是找不到“第一”和“第二”函数，因为路由配置中没有声明“FirstCtrl”和“SecondCtrl”。我想也许routeProvider会“包装”（或类似的东西）“主”模板和“MainCtrl”控制器，而“主”模板将无法访问其余的控制器。

但这不正确，来自不同控制器的“第一”和“第二”功能正常工作。那么，在路由配置中为模板指定控制器有什么意义？您可以设置一个模板来呈现指定的查询，该模板可以使用该模块的任何控制器。

也许这不是一个好的设计，我不知道。

你能帮助我更好地理解这一点吗？

谢谢！

Answer 1

在您说明时使用$ route提供程序时：

.config(function ($routeProvider, $locationProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'main',
    controller: 'MainCtrl' 
  });

$locationProvider.html5Mode(true);  });

您实际上使用 MainCrtl 将'./'路线中的所有内容包装好。

因此，当您在<div ng-view=></div>中注入Main.html视图时，您将获得以下呈现：

 <body ng-app="myApp">
    <div ng-controller='MainCtrl'>    
       <div ng-controller="FirstCtrl">
       <button ng-click="first()">First!</button>
       </div>

       <div ng-controller="SecondCtrl">
       <button ng-click="second()">Second!</button>
       </div>
    </div>

 </body>

Answer 2

真的，关键是你不必在视图中做<div ng-controller="MyCtrl">。这可能有一些优点，例如可能为不同的上下文保存不同数据但仍然是相同的html的视图。

使用routeProvider的模板的多个控制器

2 个答案: