多個控制器在angularjs中路由？

我想建立一個視圖 - 我已經設置了兩個控制器來練習，一個人的HeaderCtrl，其中有一些數據（網站標題，標題背景等），另一個應該有頁面的主要內容 - MainCtrl。多個控制器在angularjs中路由？

當定義路線，我在做，像這樣：

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中指定多個控制器嗎？或者建立這種觀點的正確方法是什麼？

來源

2013-06-27 greedz

我對這個問題的解決方法是有兩個指令 - 標頭和主參考相應的模板。

例如：

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

然後你就可以有一個頁面，包含指令 - 的index.html。

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

然後有一個控制器，路線您的index.html

您還可以，如果要單獨處理它們封裝在單獨的頭和主控制器的標題和主。

例如

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

或模板本身

來源

2013-06-28 01:03:45 jeh

我不得不使用'transclude：true'來讓這個方法起作用 – ZimSystem

我不認爲你可以指定多個控制器。我想，你要尋找的是一樣的東西是index.html，模板是指你的頭和儀表板：

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

要真正用正確的模板填寫，我會用一個指令。我認爲這是角度最強大的部分之一。您可以創建一個可以在所有頁面上重複使用的標題指令。

來源

2013-06-27 23:15:19

什麼你可能想要做的就是把你的HeaderCtrl外ng-view，然後有MainCtrl映射到索引的路線（即「/」）。如果您需要將multple控制器映射到您的索引路由，您可以在映射到該路由的模板中分配它們。這裏是什麼樣子：

的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-routerhttps://github.com/angular-ui/ui-router這將允許你有多個「視圖」並將它們映射到你的路線。

來源

2013-06-27 23:48:29

-1

試試這個它應該工作

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

來源

2013-09-20 10:56:21 rohit

您應該使用角度的UI路由器：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" } 
 
     } 
 
    }) 
 
});

來源

2015-08-28 18:33:15

多個控制器在angularjs中路由？

回答

相關問題