Application AngularJS Hello World : votre premier exemple de programme
James Hartmann
La meilleure façon de voir la puissance d'une application AngularJS est de créer votre première application de programme de base « Hello World » dans Angular.JS.
Il existe de nombreux environnements de développement intégrés que vous pouvez utiliser pour le développement AngularJS, certains des plus populaires sont mentionnés ci-dessous. Dans notre exemple, nous utilisons Webstorm comme notre IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Bonjour tout le monde, AngularJS
L'exemple ci-dessous montre le moyen le plus simple de créer votre première application « Hello world » dans AngularJS.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Explication du code :
- L'ng-appLe mot-clé " est utilisé pour indiquer que cette application doit être considérée comme une application angulaire js. N'importe quel nom peut être donné à cette application.
- Le contrôleur est ce qui est utilisé pour contenir la logique métier. Dans la balise h1, nous voulons accéder au contrôleur, qui aura la logique d'afficher « HelloWorld », nous pouvons donc dire, dans cette balise, nous voulons accéder au contrôleur nommé « HelloWorldCtrl ».
- Nous utilisons une variable membre appelée « message » qui n'est rien d'autre qu'un espace réservé pour afficher le message « Hello World ».
- La « balise script » est utilisée pour référencer le script angulaire.js qui possède toutes les fonctionnalités nécessaires pour angulaire js. Sans cette référence, si nous essayons d'utiliser des fonctions AngularJS, elles ne fonctionneront pas.
- « Contrôleur » est l'endroit où nous créons réellement notre logique métier, qui est notre contrôleur. Les spécificités de chaque mot-clé seront expliquées dans les chapitres suivants. Il est important de noter que nous définissons une méthode de contrôleur appelée « HelloWorldCtrl » qui est référencée à l'étape 2.
- Nous créons une « fonction » qui sera appelée lorsque notre code appellera ce contrôleur. L'objet $scope est un objet spécial dans AngularJS qui est un objet global utilisé dans Angular.js. L'objet $scope est utilisé pour gérer les données entre le contrôleur et la vue.
- Nous créons une variable membre appelée « message », en lui attribuant la valeur « HelloWorld » et en attachant la variable membre à l'objet scope.
REMARQUE: La directive ng-controller est un mot-clé défini dans AngularJS (étape n°2) et est utilisé pour définir des contrôleurs dans votre application. Ici, dans notre application, nous avons utilisé le mot-clé ng-controller pour définir un contrôleur nommé « HelloWorldCtrl ». La logique réelle du contrôleur sera créée à l'étape 5.
Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
Le message « Hello World » s'affichera.
