MEAN.JS - Composants angulaires dans l'application

Dans ce chapitre, nous allons ajouter des composants angulaires à une application. Il s'agit d'une infrastructure JavaScript Web frontale, qui permet de créer des applications dynamiques d'une seule page à l'aide du modèle MVC (Model View Controller). Dans le chapitre sur l' architecture MEAN.JS , vous avez vu comment AngularJS traitera la demande du client et obtiendra le résultat de la base de données.

Apprendre à connaître AngularJS

AngularJS est un framework d'application Web open source qui utilise HTML comme langage de modèle et étend la syntaxe du HTML pour exprimer clairement les composants de votre application. AngularJS fournit certaines fonctionnalités de base telles que la liaison de données, le modèle, les vues, les contrôleurs, les services, etc. Pour plus d'informations sur AngularJS, reportez-vous à ce lien .

Vous pouvez faire de la page une application angulaire en ajoutant Angular dans la page. Il peut être ajouté simplement en utilisant un fichier JavaScript externe, qui peut être téléchargé ou référencé directement avec une version CDN.

Considérez que nous avons téléchargé le fichier et l'avons référencé localement en l'ajoutant à la page comme suit -

<script src="angular.min.js"></script>

Maintenant, nous devons dire à Angular que cette page est une application Angular. Par conséquent, nous pouvons le faire en ajoutant un attribut, ng-app à la balise <html> ou <body> comme indiqué ci-dessous -

<html ng-app>
or
<body ng-app>

Le ng-app peut être ajouté à n'importe quel élément de la page, mais il est souvent placé dans la balise <html> ou <body> afin qu'Angular puisse fonctionner n'importe où dans la page.

Application angulaire en tant que module

Pour travailler avec une application Angular, nous devons définir un module. C'est un endroit où vous pouvez regrouper les composants, directives, services, etc., qui sont liés à l'application. Le nom du module est référencé par l'attribut ng-app dans le HTML. Par exemple, nous dirons le nom du module d'application Angular comme myApp et nous pouvons le spécifier dans la balise <html> comme indiqué ci-dessous -

<html ng-app="myApp">

Nous pouvons créer une définition pour l'application en utilisant l'instruction ci-dessous dans un fichier JavaScript externe -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Définition du contrôleur

L'application AngularJS s'appuie sur des contrôleurs pour contrôler le flux de données dans l'application. Un contrôleur est défini à l'aide de la directive ng-controller .

Par exemple, nous attacherons le contrôleur au corps en utilisant la directive ng-controller, ainsi que le nom du contrôleur que vous souhaitez utiliser. Dans la ligne ci-dessous, nous utilisons le nom du contrôleur comme "myController".

<body ng-controller="myController">

Vous pouvez attacher un contrôleur (myController) à un module angulaire (myApp) comme indiqué ci-dessous -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

Il est préférable d'utiliser une fonction nommée au lieu d'une fonction anonyme pour la lisibilité, la réutilisation et la testabilité. Dans le code ci-dessous, nous utilisons la nouvelle fonction nommée "myController" pour contenir le code du contrôleur -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Pour plus d'informations sur les contrôleurs, reportez-vous à ce lien .

Définition de la portée

Scope est un objet JavaScript spécial qui connecte le contrôleur aux vues et contient des données de modèle. Dans les contrôleurs, les données du modèle sont accessibles via l'objet $ scope. La fonction de contrôleur prend le paramètre $ scope qui a été créé par Angular et donne un accès direct au modèle.

L'extrait de code ci-dessous spécifie comment mettre à jour la fonction du contrôleur pour recevoir le paramètre $ scope et définit la valeur par défaut -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Pour plus d'informations sur les contrôleurs, reportez-vous à ce lien . Dans le chapitre suivant, nous commencerons à créer une application à page unique en utilisant Angular.