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
- Texte sublime
- AngularJS Eclipse
- Visual Studio
Bonjour tout le monde, AngularJS
L'exemple ci-dessous montre la manière la plus simple de créer votre première application "Hello world" dans AngularJS.
Guru99 {{message}}
Explication du code:
- Le mot-clé " ng-app " est utilisé pour indiquer que cette application doit être considérée comme une application angular 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", donc nous pouvons 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 angular.js qui a toutes les fonctionnalités nécessaires pour angular js. Sans cette référence, si nous essayons d'utiliser des fonctions AngularJS, elles ne fonctionneront pas.
- «Controller» est le lieu 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 # 2) et est utilisée pour définir les 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 à (étape 5).
Si la commande est exécutée avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Le message «Hello World» s'affiche.
