web-dev-qa-db-ja.com

複数のコントローラーのangularjsでのルーティング？

私はビューを作成しようとしています-練習する2つのコントローラーをセットアップしました.1つはHeaderCtrlで、その中にいくつかのデータ（サイトタイトル、ヘッダーの背景など）があり、もう1つはページのメインコンテンツである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で複数のコントローラーを指定できますか？または、このビューを構築する正しい方法は何でしょうか？

angularjsangularjs-routing
11
skxc

この問題への私のアプローチは、対応するテンプレートを参照するヘッダーとメインの2つのディレクティブを持つことです。

例えば：

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

次に、ディレクティブ（index.html）を含むページを作成できます。

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

次にoneコントローラを使用して、index.htmlにルーティングします

個別に処理する場合は、ヘッダーとメインを別々のヘッダーとメインコントローラーにカプセル化することもできます。

例えば.

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

またはテンプレート自体

16
jeh

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 これにより、複数の「ビュー」を持ち、それらをルートにマップします。

2
Brian Lewis

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" }
      }
    })
});
2
Julien Ricard

複数のコントローラーを指定できるとは思いません。あなたが探しているのは、ヘッダーとダッシュボードを参照する「index.html」テンプレートのようなものだと思います：

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

実際に適切なテンプレートを入力するには、ディレクティブを使用します。これは角度の最も強力な部分の1つだと思います。すべてのページで再利用できるヘッダーディレクティブを作成できます。

0
John Tseng