Créer plusieurs contrôleurs sur une seule page dans AngularJS
- Créer plusieurs contrôleurs sur une seule page dans AngularJS
- Avantages de l’utilisation de plusieurs contrôleurs sur une seule page dans AngularJS
AngularJS est un framework JavaScript utilisé pour les applications Web. Il est surtout connu pour les applications d’une seule page et fournit des fonctionnalités telles que la liaison de données, la modélisation, MVC, l’injection de dépendances, etc.
AngularJS fournit un moyen d’organiser le code en contrôleurs et en vues. Les contrôleurs sont responsables de la validation des entrées, de la récupération et du traitement des données, tandis que les vues sont responsables de l’affichage des données dans les composants de l’interface utilisateur.
Il permet l’utilisation de plusieurs contrôleurs sur une application d’une seule page. Cela améliore l’expérience utilisateur en offrant une navigation plus simple entre les différentes pages sans recharger la page.
Plusieurs contrôleurs permettent aux développeurs de comprendre plus facilement la portée de chaque modèle et peuvent améliorer les performances en évitant les manipulations inutiles du DOM.
De plus, plusieurs contrôleurs sont une bonne solution lorsque vous avez besoin de plusieurs vues sur la même page ou lorsque vous avez besoin de différentes vues sur différentes parties de la page.
Créer plusieurs contrôleurs sur une seule page dans AngularJS
Pour créer plusieurs contrôleurs, utilisez les directives ng-controller. Il établit une connexion entre l’oscilloscope et le contrôleur.
Discutons d’un moyen de créer deux contrôleurs. La première étape consiste à créer deux contrôleurs, un contrôleur appelé Home et un autre appelé About. Le contrôleur Accueil contiendra la vue d’accueil et le contrôleur À propos aura la vue À propos.
La deuxième étape consiste à créer deux vues, une vue appelée home et une autre vue appelée about. Nous placerons la vue home dans le contrôleur Home et la vue about dans le contrôleur About.
Vous pouvez également utiliser le routage avec le module ngRoute au lieu des directives ng-controller pour obtenir cette fonctionnalité.
Exemple (code JavaScript) :
var app = angular.module('myApp', []);
app.controller('HomeController', function ($scope) {
$scope.controllerName = "HomeController";
});
app.controller('AboutController', function ($scope) {
$scope.controllerName = "AboutController";
});
Exemple (code 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>
Cliquez ici pour vérifier la démonstration du code ci-dessus.
Avantages de l’utilisation de plusieurs contrôleurs sur une seule page dans AngularJS
L’utilisation de plusieurs contrôleurs dans AngularJS est bénéfique pour les raisons suivantes :
- Il réduit le nombre d’appels HTTP au serveur.
- Il améliore les performances en mettant en cache les données.
- Il facilite la réutilisation du code et des composants.
- Il permet une meilleure séparation des préoccupations.
- Il aide au débogage et aux tests.
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