在angularjs中为多个控制器路由？答案

【问题标题】：Routing in angularjs for multiple controllers?在angularjs中为多个控制器路由？
【发布时间】：2013-06-27 22:54:58
【问题描述】：

我正在尝试构建一个视图——我设置了两个控制器来练习，一个是 HeaderCtrl，里面有一些数据（站点标题、标题背景等），另一个应该是页面的主要内容- MainCtrl.

在定义路线时，我是这样做的：

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

这工作得很好，但我想要的是为此指定多个参数，如下所示：

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   },
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

这不起作用，所以我猜这不是这样做的方法。我实际上要问的是-您可以在 $routeProvider 中指定多个控制器吗？或者构建这个视图的正确方法是什么？

【问题讨论】：

标签： angularjs angularjs-routing

【解决方案1】：

我解决这个问题的方法是使用两个指令 - header 和 main，它们引用相应的模板。

例如：

app.directive('header', function () {
  return {
    restrict: 'A',
    replace: true,
    templateUrl:'templates/header.html'
  }
})

然后你可以有一个包含指令的页面 - index.html。

<div header></div>
<div main></div>

然后有一个控制器来路由到您的 index.html

如果你想单独处理header和main，你也可以将header和main封装在单独的header和main控制器中。

例如

<div ng-controller="HeaderCtrl">
    <div header></div>
</div>
<div ng-controller="MainCtrl">
    <div main></div>
</div>

或使用模板本身

【讨论】：

【解决方案2】：

您可能想要做的是将HeaderCtrl 放在ng-view 之外，然后将MainCtrl 映射到您的索引路由（即'/'）。如果您需要将多个控制器映射到您的索引路由，您可以在已映射到该路由的模板中分配它们。这就是它的样子：

index.html

<html>
<body ng-app='yourApp'>
    <div id="header" ng-controller="HeaderCtrl"></div>
    <div ng-view></div>
</body>
</html>

app.js

angular.module('mainApp', []).
config(function ($routeProvider) {
    $routeProvider.when('/', {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
});

dashboard.html

<div ng-controller="SomeCtrl"></div>
<div ng-controller="SomeOtherCtrl"></div>

...或者，如果您真的想发挥创意，您可以包含来自 AngularUI 人员的ui-router https://github.com/angular-ui/ui-router 这将允许您拥有多个“视图”并将它们映射到您的路线。

【讨论】：

【解决方案3】：

您应该使用 Angular 的 ui-router：https://github.com/angular-ui/ui-router，您可以为页面的每个“元素”指定控制器和模板：

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

【讨论】：

【解决方案4】：

我认为您不能指定多个控制器。我认为您正在寻找的是类似于“index.html”模板的东西，它指的是您的标题和仪表板：

<div id='header' ng:controller='HeaderCtrl' />
<div id='main' ng:controller='MainCtrl' />

要真正填写正确的模板，我会使用指令。我认为这是 Angular 最强大的部分之一。您可以创建一个可以在所有页面上重复使用的标题指令。

【讨论】：

【解决方案5】：

试试这个应该可以的

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   }).when('',  //route here in the empty quotes
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   });
});

【讨论】：