在单页面应用程序中使用AngularJS的多个控制器

Question

我想知道如何为单个页面应用程序使用多个控制器.我试图解决这个问题并且我发现了与我的问题非常相似的问题,但是解决特定问题的答案很多,最终你没有为单个页面应用程序使用多个控制器.

那是因为对一个页面使用多个控制器是不明智的吗？或者它是不可能的？

假设我已经有一个kick-ass图像轮播控制器在主页面上工作,但后来我学会了如何(让我们说)使用模态,我也需要一个新的控制器(或者我需要一个控制器的任何其他东西).那我该怎么办？

我已经看到了其他问题的一些答案,他们问我几乎和我一样的事情,人们回答"*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
}

Answer 2

我认为你错过了"单页应用"的含义.

这并不意味着你将有一个.html,而是你将有一个主要index.html和几个NESTED .html文件.那么为什么单页应用呢？因为这样您不会以标准方式加载页面(即完全刷新整页的浏览器调用),而只是使用Angular/Ajax加载内容部分.由于您没有看到页面更改之间的闪烁,因此您会觉得您没有从页面移动.因此,您觉得您只是呆在一个页面上.

现在,我假设您想为您的SINGLE PAGE应用程序提供多个内容:(例如)家庭,联系人,投资组合和商店.您的单页/多内容应用(角度方式)将以这种方式组织:

• index.html:包含页眉<ng-view>和页脚
• contacts.html:包含联系表单(没有页眉,没有页脚)
• portfolio.html:包含投资组合数据(没有页眉没有页脚)
• store.html:包含商店,没有标题没有页脚.

你在索引中,点击名为"联系人"的菜单,会发生什么？Angular用代码替换<ng-view>标记contacts.html

你是如何实现这一目标的？和ngRoute你一样,你会有类似的东西:

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

这将调用正确的html将正确的控制器传递给它(请注意:如果使用路由,请不要指定ng-controller指令contacts.html)

然后,当然,您可以在contacts.html页面中声明尽可能多的ng-controller指令.那些将是子控制器ContactCtrl(因此继承它).但是对于单个路径,在内部routeProvider,您可以声明一个Controller,它将充当"部分视图的父控制器".

编辑想象一下以下模板/ contacts.html

<div>
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

以上routeProvider将把控制器注入你的包含div.基本上上面的html自动变成:

<div ng-controller="ContactsCtrl">
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

当我说你可以拥有其他控制器时,意味着你可以将控制器插入内部DOM元素,如下所示:

<div>
    <h3>Contacts</h3>
    <p ng-controller="anotherCtrl">Hello {{name}}! This is contacts page...     
    </p>
</div>

我希望这会澄清一些事情.

一个

Answer 3

我目前正在构建单页面应用程序.到目前为止,我认为这将是回答你的问题.我有一个基本模板(base.html),其中包含带有ng-view指令的div .这个指令告诉angular将新内容放在哪里.注意我自己是angularjs的新手,所以我绝不是说这是最好的方法.

app = angular.module('myApp', []);                                                                             

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

app.controller('homeController', [              
    '$scope',                              
    function homeController($scope,) {        
        $scope.message = 'HOME PAGE';                  
    }                                                
]);                                                  

app.controller('aboutController', [                  
    '$scope',                               
    function aboutController($scope) {        
        $scope.about = 'WE LOVE CODE';                       
    }                                                
]); 

base.html文件

<html>
<body>

    <div id="sideMenu">
        <!-- MENU CONTENT -->
    </div>

    <div id="content" ng-view="">
        <!-- Angular view would show here -->
    </div>

<body>
</html>

Answer 4

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

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


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

menuController可以访问菜单div.并且widgetController可以访问这两者.