在单页应用程序中使用 AngularJS 的多个控制器 [英] Multiple controllers with AngularJS in single page app

问题描述

我想知道的是如何为单页应用程序使用多个控制器.我试图弄清楚，我发现问题与我的非常相似，但只有大量不同的答案可以解决特定问题，而您最终不会为单页应用程序使用多个控制器.

这是因为在一个页面上使用多个控制器是不明智的吗?还是根本不可能?

假设我已经有一个在主页上工作的踢屁股图像轮播控制器，但后来我学习了如何(假设)使用模态，我也需要一个新的控制器(或任何其他我需要的东西)控制器).那我该怎么办?

我看到了一些其他问题的答案，他们问的问题与我几乎相同，人们回答*OMG.你为什么要那样做，就这样做……".

最好的方法是什么，或者你是怎么做的?

编辑

你们中的许多人回答只是声明两个控制器，然后使用 ng-controller 来调用它.我使用下面的这段代码，然后使用 ng-controller 调用 MainCtrl.

app.config(function($routeProvider, $locationProvider) {$routeProvider.什么时候('/'， {templateUrl: "templates/main.html",控制器:'MainCtrl'，}).除此以外({模板:'不存在'});});

如果不用 ng-controller 就可以使用，为什么还要在这里设置控制器?这就是让我困惑的地方.(而且你不能以这种方式添加两个控制器，我认为...)

解决方案

有什么问题?要使用多个控制器，只需使用多个 ngController 指令:

<p>这里的东西</p>
<div class="menu" ng-controller="menuController"><p>这里还有其他东西</p>

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

最基本的方法可以像这样声明控制器函数一样简单:

function widgetController($scope) {//这里的东西}功能菜单控制器($scope){//这里的东西}

I want to know is how to use multiple controllers for a single page application. I have tried to figure it out and I've found questions very similar to mine, but there is just a ton of different answers solving a specific problem where you end up not using multiple controllers for a single page app.

Is that because it would not be wise to use multiple controllers for a single page? Or is it just not possible?

Let's say I already have a kick-ass image carousel controller working the main page, but then I learn how to (let's say) use modals and I need a new controller for that as well (or any other thing I need a controller). What will I do then?

I have seen some answers to other questions where they ask about almost the same things as me and people answer "*OMG. Why would you even do that, just do this...".

What is the best way, or how do you do it?

Edit

Many of you are answering to just declare two controllers and then use ng-controller to call it. I use this bit of code below and then call MainCtrl with ng-controller.

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

Why do I even need to set a controller here if I can just use ng-controller without it? This is what confused me. (and you can't add two controllers this way, I think...)

解决方案

What is the problem? To use multiple controllers, just use multiple ngController directives:

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

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

You will need to have the controllers available in your application module, as usual.

The most basic way to do it could be as simple as declaring the controller functions like this:

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

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

这篇关于在单页应用程序中使用 AngularJS 的多个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！