在angularjs中为多个控制器路由？
Posted
技术标签:
【中文标题】在angularjs中为多个控制器路由？【英文标题】：Routing in angularjs for multiple controllers? 【发布时间】：2013-06-25 15:05:05 【问题描述】：我正在尝试构建一个视图——我设置了两个控制器来练习，一个是 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 中指定多个控制器吗？或者构建这个视图的正确方法是什么？
【问题讨论】：
【参考方案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控制器中。
例如
<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'
);
);
【讨论】：
以上是关于在angularjs中为多个控制器路由？的主要内容，如果未能解决你的问题，请参考以下文章
视图中的布尔值为true，但在控制器中为false angularJS
AngularJS - 如何在多个目录中自动加载js控制器以在主模块中注册？