Qu'est-ce qu'un module AngularJS?
Un module définit la fonctionnalité de l'application qui est appliquée à l'ensemble de la page HTML à l'aide de la directive ng-app. Il définit les fonctionnalités, telles que les services, les directives et les filtres, de manière à faciliter leur réutilisation dans différentes applications.
Dans tous nos tutoriels précédents, vous auriez remarqué la directive ng-app utilisée pour définir votre application Angular principale. C'est l'un des concepts clés des modules dans Angular.JS.
Dans ce didacticiel, vous apprendrez-
- Comment créer un module dans AngularJS
- Modules et contrôleurs
Comment créer un module dans AngularJS
Avant de commencer avec ce qu'est un module, examinons un exemple d'application AngularJS sans module, puis comprenons la nécessité d'avoir des modules dans votre application.
Considérons la création d'un fichier appelé "DemoController.js" et l'ajout du code ci-dessous au fichier
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Dans le code ci-dessus, nous avons créé une fonction appelée "DemoController" qui va jouer le rôle de contrôleur au sein de notre application.
Dans ce contrôleur, nous effectuons simplement l'ajout de 2 variables a et b et affectons l'ajout de ces variables à une nouvelle variable, c, et la réattribuons à l'objet scope.
Créons maintenant notre Sample.html principal, qui sera notre application principale. Insérons l'extrait de code ci-dessous dans notre page HTML.
Événement mondial Guru99
{{c}}Dans le code ci-dessus, nous incluons notre DemoController, puis nous invoquons la valeur de la variable $ scope.c via une expression.
Mais notez notre directive ng-app, elle a une valeur vide.
- Cela signifie essentiellement que tous les contrôleurs appelés dans le contexte de la directive ng-app sont accessibles globalement. Il n'y a pas de frontière qui sépare plusieurs contrôleurs les uns des autres.
- Maintenant, dans la programmation moderne, c'est une mauvaise pratique de n'avoir des contrôleurs attachés à aucun module et de les rendre accessibles à l'échelle mondiale. Il doit y avoir une limite logique définie pour les contrôleurs.
Et c'est là que les modules entrent en jeu. Les modules sont utilisés pour créer cette séparation des frontières et aider à séparer les contrôleurs en fonction de la fonctionnalité.
Modifions le code ci-dessus pour implémenter des modules et attacher notre contrôleur à ce module
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Notons les principales différences dans le code écrit ci-dessus
var sampleApp = angular.module('sampleApp',[]);Nous créons spécifiquement un module AngularJS appelé «sampleApp». Cela formera une limite logique pour la fonctionnalité que ce module contiendra. Donc, dans notre exemple ci-dessus, nous avons un module qui contient un contrôleur qui remplit le rôle d'ajout de 2 objets de portée. Par conséquent, nous pouvons avoir un module avec une limite logique qui indique que ce module n'effectuera que la fonctionnalité de calculs mathématiques pour l'application.
sampleApp.controller('DemoController', function($scope)Nous attachons maintenant le contrôleur à notre module AngularJS "SampleApp". Cela signifie que si nous ne référencons pas le module 'sampleApp' dans notre code HTML principal, nous ne pourrons pas référencer la fonctionnalité de notre contrôleur.
Notre code HTML principal ne ressemblera pas à celui ci-dessous
Guru99 Global Event
{{c}}Notons les principales différences entre le code écrit ci-dessus et notre code précédent
Dans notre étiquette corporelle,
- Au lieu d'avoir une directive ng-app vide, nous appelons maintenant le module sampleApp.
- En appelant ce module d'application, nous pouvons maintenant accéder au contrôleur 'DemoController' et aux fonctionnalités présentes dans le contrôleur de démonstration.
Modules et contrôleurs
Dans Angular.JS, le modèle utilisé pour développer des applications Web modernes consiste à créer plusieurs modules et contrôleurs pour séparer logiquement plusieurs niveaux de fonctionnalités.
Normalement, les modules seront stockés dans des fichiers Javascript séparés, qui seraient différents du fichier d'application principal.
Regardons un exemple de la façon dont cela peut être réalisé.
Dans l'exemple ci-dessous,
- Nous allons créer un fichier appelé Utilities.js qui contiendra 2 modules, l'un pour effectuer la fonctionnalité d'addition et l'autre pour effectuer la fonctionnalité de soustraction.
- Nous allons ensuite créer 2 fichiers d'application distincts et accéder au fichier utilitaire à partir de chaque fichier d'application.
- Dans un fichier d'application, nous accèderons au module pour l'addition et dans l'autre, nous accèderons au module pour la soustraction.
Étape 1) Définissez le code pour les multiples modules et contrôleurs.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Notons les points clés du code écrit ci-dessus
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Il y a 2 modules angulaires séparés créés, l'un qui porte le nom «AdditionApp» et le second le nom «SubtractionApp».
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Il y a 2 contrôleurs séparés définis pour chaque module, l'un est appelé DemoAddController et l'autre est DemoSubtractController. Chaque contrôleur a une logique distincte pour l'addition et la soustraction de nombres.
Étape 2) Créez vos principaux fichiers d'application. Créons un fichier appelé ApplicationAddition.html et ajoutons le code ci-dessous
Addition Addition :{{c}}Notons les points clés du code écrit ci-dessus
Nous référençons notre fichier Utilities.js dans notre fichier d'application principal. Cela nous permet de référencer tous les modules AngularJS définis dans ce fichier.
Nous accédons au module 'AdditionApp' et à DemoAddController en utilisant respectivement la directive ng-app et le ng-controller.
{{c}}Puisque nous référençons le module et le contrôleur mentionnés ci-dessus, nous pouvons référencer la variable $ scope.c via une expression. L'expression sera le résultat de l'ajout des 2 variables de portée a et b qui a été effectué dans le contrôleur 'DemoAddController'
De la même manière que nous ferons pour la fonction de soustraction.
Étape 3) Créez vos principaux fichiers d'application. Créons un fichier appelé "ApplicationSubtraction.html" et ajoutons le code ci-dessous
Addition Subtraction :{{d}}Notons les points clés du code écrit ci-dessus
Nous référençons notre fichier Utilities.js dans notre fichier d'application principal. Cela nous permet de référencer tous les modules définis dans ce fichier.
Nous accédons au module 'SubtractionApp et DemoSubtractController en utilisant respectivement la directive ng-app et le ng-controller.
{{d}}Puisque nous référençons le module et le contrôleur mentionnés ci-dessus, nous pouvons référencer la variable $ scope.d via une expression. L'expression sera le résultat de la soustraction des 2 variables de portée a et b qui a été effectuée dans le contrôleur 'DemoSubtractController'
Résumé
- Sans l'utilisation de modules AngularJS, les contrôleurs commencent à avoir une portée globale qui conduit à de mauvaises pratiques de programmation.
- Les modules sont utilisés pour séparer la logique métier. Plusieurs modules peuvent être créés pour se séparer logiquement au sein de ces différents modules.
- Chaque module AngularJS peut avoir son propre ensemble de contrôleurs définis et affectés à celui-ci.
- Lors de la définition des modules et des contrôleurs, ils sont normalement définis dans des fichiers JavaScript distincts. Ces fichiers JavaScript sont ensuite référencés dans le fichier principal de l'application.