AngularJS の 1 ページに複数のコントローラーを作成する
AngularJS は、Web アプリケーションに使用される JavaScript フレームワークです。シングルページアプリケーションで最も有名であり、データバインディング、テンプレート、MVC、依存性注入などの機能を提供します。
AngularJS は、コードをコントローラーとビューに整理する方法を提供します。コントローラは入力の検証、データの取得、および処理を担当し、ビューは UI コンポーネントでのデータの表示を担当します。
1 ページのアプリで複数のコントローラーを使用できます。これにより、ページをリロードせずに異なるページ間をより簡単にナビゲートできるため、ユーザーエクスペリエンスが向上します。
複数のコントローラーを使用すると、開発者は各テンプレートの範囲を理解しやすくなり、不要な DOM 操作を回避してパフォーマンスを向上させることができます。
さらに、複数のコントローラーは、同じページに複数のビューが必要な場合、またはページの異なる部分に異なるビューが必要な場合に適したソリューションです。
AngularJS の 1 ページに複数のコントローラーを作成する
複数のコントローラーを作成するには、ng-controller ディレクティブを使用します。スコープとコントローラー間の接続を確立します。
ここでは、2つのコントローラを作成する方法について説明します。まず、Home というコントローラと About というコントローラの 2つを作成します。Home コントローラにはホームビューを、About コントローラにはアバウトビューを配置する。
2 番目のステップは、2つのビューを作成することです。1つは Home と呼ばれるビューで、もう 1つは about と呼ばれるビューです。Home ビューを Home コントローラーに配置し、about ビューを About コントローラーに配置します。
この機能を実現するために、ng-controller ディレクティブの代わりに ngRoute モジュールでルーティングを使用することもできます。
例（JavaScript コード）：
var app = angular.module('myApp', []);
app.controller('HomeController', function ($scope) {
$scope.controllerName = "HomeController";
});
app.controller('AboutController', function ($scope) {
$scope.controllerName = "AboutController";
});
例（HTML コード）：
<body ng-app="myApp">
<h1>Example of Multiple Controllers</h1>
<div ng-controller="HomeController"> Controller Name: {{controllerName}}
<br>
<input type="text" ng-model="message"/>
</div>
<br>
<div ng-controller="AboutController"> Controller Name: {{controllerName}}
<br> <br>
<input type="text" ng-model="message"/>
</div>
</body>
ここをクリックして、上記のコードのデモンストレーションを確認してください。
AngularJS の 1 ページで複数のコントローラーを使用する利点
AngularJS で複数のコントローラーを使用すると、次の理由でメリットがあります。
- サーバーへの HTTP 呼び出しの数を減らします。
- データをキャッシュすることでパフォーマンスが向上します。
- コードとコンポーネントの再利用が容易になります。
- 関心の分離を改善します。
- デバッグとテストに役立ちます。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook