1. ホーム
  2. javascript

[解決済み] AngularJSによる単一ページアプリの複数コントローラ

2022-12-01 15:46:16

質問

1ページのアプリケーションで複数のコントローラを使用する方法を知りたいのです。私はそれを理解しようとし、私は私の非常に似た質問を見つけたが、あなたが単一のページアプリに複数のコントローラを使用しないことを終了する特定の問題を解決するための異なる回答のトンがあるだけです。

それは、1 つのページに複数のコントローラを使用するのは賢明ではないからでしょうか。それとも、単に不可能なのでしょうか?

例えば、すでにメインページで動作する素晴らしい画像カルーセルコントローラーを持っていて、その後(例えば)モーダルの使い方を学び、そのための新しいコントローラーも必要になったとします(あるいは、コントローラーが必要な他のどんなものでも)。そのとき、私はどうすればいいのでしょうか?

私は、他の質問に対して、私とほとんど同じことを尋ねて、人々が "*OMGと答えているいくつかの回答を見たことがあります。なぜそんなことをするのか、これをすればいいじゃないか..."。

一番良い方法、あるいはやり方は何でしょうか?

編集

多くの方は、2つのコントローラを宣言し、ng-controllerで呼び出すと答えています。 私は以下のようなコードで、MainCtrlをng-controllerで呼び出しています。

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/main.html",                                               
         controller:'MainCtrl',                                
        })                                                                      
        .otherwise({                      
            template: 'does not exists'   
        });      
});

コントローラを設定しなくてもng-controllerで済むのに、なぜここでコントローラを設定する必要があるのでしょうか?これが私を混乱させた原因です。(この方法では2つのコントローラを追加することはできないと思います...)

どのように解決するのですか?

何が問題なのでしょうか?複数のコントローラを使用するには、複数のngControllerディレクティブを使用するだけです。

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

通常通り、アプリケーションモジュールでコントローラを利用できるようにする必要があります。

最も基本的な方法は、次のようにコントローラの関数を宣言することです。

function widgetController($scope) {
   // stuff here
}

function menuController($scope) {
   // stuff here
}