Mehrere Controller auf einer Seite in AngularJS erstellen
- Erstellen Sie mehrere Controller auf einer Seite in AngularJS
- Vorteile der Verwendung mehrerer Controller auf einer Seite in AngularJS
AngularJS ist ein JavaScript-Framework, das für Webanwendungen verwendet wird. Es ist am bekanntesten für Single-Page-Anwendungen und bietet Funktionen wie Datenbindung, Templating, MVC, Abhängigkeitsinjektion usw.
AngularJS bietet eine Möglichkeit, den Code in Controller und Ansichten zu organisieren. Controller sind für die Eingabevalidierung, den Datenabruf und die Verarbeitung verantwortlich, während Views für die Anzeige von Daten in UI-Komponenten verantwortlich sind.
Es ermöglicht die Verwendung mehrerer Controller in einer Single-Page-App. Dies verbessert die Benutzererfahrung, indem es eine einfachere Navigation zwischen verschiedenen Seiten ermöglicht, ohne die Seite neu zu laden.
Mehrere Controller erleichtern Entwicklern das Verständnis des Umfangs jeder Vorlage und können die Leistung verbessern, indem unnötige DOM-Manipulationen vermieden werden.
Darüber hinaus sind mehrere Controller eine gute Lösung, wenn Sie mehr als eine Ansicht auf derselben Seite oder unterschiedliche Ansichten auf verschiedenen Teilen der Seite benötigen.
Erstellen Sie mehrere Controller auf einer Seite in AngularJS
Um mehrere Controller zu erstellen, verwenden Sie ng-controller-Direktiven. Es stellt eine Verbindung zwischen dem Scope und dem Controller her.
Lassen Sie uns einen Weg besprechen, zwei Controller zu erstellen. Der erste Schritt besteht darin, zwei Controller zu erstellen, einen Controller namens Home und einen anderen namens About. Der Home-Controller enthält die Home-Ansicht und der About-Controller die About-Ansicht.
Der zweite Schritt besteht darin, zwei Ansichten zu erstellen, eine Ansicht mit dem Namen home und eine andere mit dem Namen about. Wir platzieren die Home-Ansicht im Home-Controller und die About-Ansicht im About-Controller.
Sie können anstelle von ng-controller-Anweisungen auch Routing mit dem ngRoute-Modul verwenden, um diese Funktionalität zu erreichen.
Beispiel (JavaScript-Code):
var app = angular.module('myApp', []);
app.controller('HomeController', function ($scope) {
$scope.controllerName = "HomeController";
});
app.controller('AboutController', function ($scope) {
$scope.controllerName = "AboutController";
});
Beispiel (HTML-Code):
<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>
Klicken Sie hier, um die Demonstration des obigen Codes zu überprüfen.
Vorteile der Verwendung mehrerer Controller auf einer Seite in AngularJS
Die Verwendung mehrerer Controller in AngularJS ist aus folgenden Gründen vorteilhaft:
- Es reduziert die Anzahl der HTTP-Aufrufe an den Server.
- Es verbessert die Leistung durch Zwischenspeichern der Daten.
- Es erleichtert die Wiederverwendung von Code und Komponenten.
- Es bietet eine bessere Trennung von Bedenken.
- Es hilft beim Debuggen und Testen.
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