Modules AngularJS

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 aurez 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.

Comment créer un module dans AngularJS

Avant de commencer par ce qu'est un module, regardons un exemple d'application AngularJS sans module, puis comprenons la nécessité d'avoir des modules dans votre application.

Envisageons de créer un fichier appelé « DemoController.js » et en ajoutant le 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 agir comme un contrôleur au sein de notre application.

Dans ce contrôleur, nous effectuons simplement l'ajout de 2 variables a et b et attribuons 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.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

Dans le code ci-dessus, nous incluons notre DemoController puis invoquons la valeur de la variable $scope.c via une expression.

Mais remarquez 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 aucune frontière qui sépare plusieurs contrôleurs les uns des autres.
Désormais, dans la programmation moderne, c'est une mauvaise pratique d'avoir des contrôleurs non connectés à des modules 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 leurs fonctionnalités.

Modifions le code ci-dessus pour implémenter des modules et attachons 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 les fonctionnalités que ce module contiendra. Ainsi, dans notre exemple ci-dessus, nous avons un module qui contient un contrôleur qui joue 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 effectuera uniquement 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érençons pas le module 'sampleApp' dans notre code HTML principal, nous ne pourrons pas référencer les fonctionnalités de notre contrôleur.

Notre code HTML principal ne ressemblera pas à celui indiqué ci-dessous

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Notons les principales différences entre le code écrit ci-dessus et notre code précédent

<body ng-app="'sampleApp'">

Dans notre balise body,

Au lieu d'avoir une directive ng-app vide, nous appelons maintenant le module sampleApp.
En appelant ce module applicatif, nous pouvons désormais accéder au contrôleur 'DemoController' et aux fonctionnalités présentes dans le contrôleur de démonstration.

Modules et contrôleurs dans AngularJS

In Angulaire.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 compartiments séparés Javascript fichiers, qui seraient différents du fichier principal de l'application.

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 exécuter la fonctionnalité d'addition et l'autre pour exécuter la fonctionnalité de soustraction.
Nous allons ensuite créer 2 fichiers d'application distincts et accéder au fichier Utilitaire depuis chaque fichier d'application.
Dans un dossier de candidature, nous accéderons au module d'addition et dans l'autre, nous accéderons au module de soustraction.

Étape 1) Définissez le code des 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 distincts créés, l'un qui reçoit le nom « AdditionApp » et le second reçoit le nom « SubtractionApp ».
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
Il existe 2 contrôleurs distincts définis pour chaque module, l'un s'appelle DemoAddController et l'autre est DemoSubtractController. Chaque contrôleur dispose d'une logique distincte pour l'addition et la soustraction de nombres.

Étape 2) Créez vos principaux fichiers de candidature. Créons un fichier appelé ApplicationAddition.html et ajoutons le code ci-dessous

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

Notons les points clés du code écrit ci-dessus

```
<script src="/lib/Utilities.js"></script>
```
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.
```
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
```
Nous accédons au module 'AdditionApp' et à DemoAddController en utilisant la directive ng-app et le ng-contrôleur respectivement.
```
{{c}}
```
Puisque nous faisons référence au module et au 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 de candidature. Créons un fichier appelé « ApplicationSubtraction.html » et ajoutons le code ci-dessous

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Notons les points clés du code écrit ci-dessus

```
<script src="/lib/Utilities.js"></script>
```
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.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Nous accédons au module 'SubtractionApp et DemoSubtractController en utilisant respectivement la directive ng-app et le ng-controller.
```
{{d}}
```
Puisque nous faisons référence au module et au 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 'DémoSubtractController'

Résumé

Sans l'utilisation de modules AngularJS, les contrôleurs commencent à avoir une portée globale, ce 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 être logiquement séparés au sein de ces différents modules.
Chaque module AngularJS peut avoir son propre ensemble de contrôleurs définis et attribués.
Lors de la définition de modules et de contrôleurs, ils sont normalement définis dans des Javascénario des dossiers. Ces JavaLes fichiers de script sont ensuite référencés dans le fichier d'application principal.

Tu pourrais aimer: