单页应用程序中带有AngularJS的多个控制器

Question

我想知道如何在单个页面应用程序中使用多个控制器。我试图找出答案，但发现的问题与我的非常相似，但是有很多不同的答案可以解决一个特定的问题，最终您不会在单个页面应用程序中使用多个控制器。

那是因为在单个页面上使用多个控制器并不明智吗？还是只是不可能？

假设我已经在主页上有一个踢屁股图像轮播控制器，但是随后我学习了如何（比如说）使用模态，为此我还需要一个新的控制器（或者其他我需要控制器的东西）。那我该怎么办？

我看到了其他问题的一些答案，他们问的几乎和我差不多，而人们回答“ * OMG。为什么还要这么做，只要这样做…”。

最好的方法是什么，或者您怎么做？

编辑

你们中的许多人都回答只是声明两个控制器，然后使用ng-controller对其进行调用。我在下面使用这段代码，然后使用ng-
controller调用MainCtrl。

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/main.html",                                               
         controller:'MainCtrl',                                
        })                                                                      
        .otherwise({                      
            template: 'does not exists'   
        });      
});

如果不使用ng-controller，为什么还要在这里设置控制器？这就是让我困惑的地方。（我想您不能以这种方式添加两个控制器…）

Answer 1

问题是什么？要使用多个控制器，只需使用多个ngController指令：

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

像往常一样，您将需要在应用程序模块中提供控制器。

做到这一点的最基本的方法可能像声明这样的控制器功能一样简单：

function widgetController($scope) {
   // stuff here
}

function menuController($scope) {
   // stuff here
}