在angularjs中为多个控制器路由?

I'm trying to build a view - I've set up two controllers to practice, one's HeaderCtrl, with some data in it (site title, header background, etc), the other should have the main content of the page - MainCtrl.

我正在尝试构建一个视图——我已经设置了两个要练习的控制器，一个是HeaderCtrl，其中包含一些数据(站点标题、标题背景等等)，另一个应该包含页面的主要内容——MainCtrl。

When defining the route, I'm doing like so:

当定义路线时，我是这样做的:

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

This works perfectly fine, but what I would want is to specify multiple parameters to this, something like this:

这很好，但是我想要为它指定多个参数，像这样:

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

This doesn't work so I'm guessing it's not the way to do it. What I'm actually asking - can you specify multiple controllers in $routeProvider ? Or what would be the correct way to build this view ?

这行不通，所以我猜这不是解决问题的方法。我想问的是，你能在$routeProvider中指定多个控制器吗?或者构建这个视图的正确方法是什么?

5 个解决方案

#1

My approach to this problem would be to have two directives - header and main which reference the corresponding templates.

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

For Example:

例如:

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

Then you can have a page that contains the directives - index.html.

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

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

Then have one controller that routes to your index.html

然后有一个控制器可以路由到index.html

You can also encapsulate the header and main in separate header and main controllers if you want to deal with them separately.

如果您想分别处理它们，还可以将header和main封装在单独的header和main控制器中。

e.g.

如。

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

or with the templates themselves

或者是模板本身。

#2

What you might want to do is place your HeaderCtrl outside of ng-view and then have MainCtrl mapped to your index route (ie. '/'). If you needed to have multple controllers mapped to your index route, you can assign them within the template that you have mapped to that route. Here is what that would look like:

你要做的就是把你的HeaderCtrl放在ng-view之外，然后用MainCtrl映射到你的索引路径。“/”)。如果需要将multitple控制器映射到索引路由，可以在映射到该路由的模板中分配它们。这是它的样子:

index.html

index . html

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

app.js

app.js

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

dashboard.html

dashboard.html

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

...or, if you really wanted to get creative, you could include ui-router from the AngularUI folks https://github.com/angular-ui/ui-router This would allow you to have multiple "views" and map them to your routes.

…或者，如果你真的想要有创意，你可以加入来自AngularUI的ui路由器https://github.com/angular-ui/ui-router，这样可以让你有多个“视图”，并将它们映射到你的路由上。

#3

You should use angular's ui-router : https://github.com/angular-ui/ui-router, you can specify a controller and template for each "element" of your page :

您应该使用angle的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

I don't think you can specify multiple controllers. I think what you're looking for is something like an 'index.html' template that refers to your header and dashboard:

我认为你不能指定多个控制器。我认为你要找的是像索引这样的东西。指你的头和仪表板的html模板:

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

To actually fill in with the right templates, I would use a directive. I think this is one of the most powerful parts of angular. You can create a header directive that you can reuse on all your pages.

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

#5

-1

Try this it should work

试试这个，应该有用

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'
   });
});

#1