在 AngularJS 的一頁中建立多個控制器
AngularJS 是一個用於 Web 應用程式的 JavaScript 框架。它以單頁應用程式而聞名，並提供資料繫結、模板、MVC、依賴注入等功能。
AngularJS 提供了一種將程式碼組織成控制器和檢視的方法。控制器負責輸入驗證、資料檢索和處理，而檢視負責在 UI 元件中顯示資料。
它允許在單頁應用程式上使用多個控制器。這通過在不同頁面之間提供更直接的導航而無需重新載入頁面來增強使用者體驗。
多個控制器使開發人員更容易理解每個模板的範圍，並且可以通過避免不必要的 DOM 操作來提高效能。
此外，當你在同一頁面上需要多個檢視或在頁面的不同部分需要不同檢視時，多個控制器是一個很好的解決方案。
在 AngularJS 的一頁中建立多個控制器
要建立多個控制器，請使用 ng-controller 指令。它在示波器和控制器之間建立連線。
讓我們討論一種建立兩個控制器的方法。第一步是建立兩個控制器，一個控制器稱為 Home，另一個控制器稱為 About。Home 控制器將包含主頁檢視，而 About 控制器將包含關於檢視。
第二步是建立兩個檢視，一個名為 home 的檢視和另一個名為 about 的檢視。我們將把 home 檢視放在 Home 控制器中，將 about 檢視放在 About 控制器中。
你還可以使用帶有 ngRoute 模組的路由而不是 ng-controller 指令來實現此功能。
示例（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 中在一頁中使用多個控制器的優點
在 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