Cet article montre un exemple de code hello world implémenté par le framework AngularJS.
Voici quelques aspects sur lesquels vous devez vous concentrer lorsque vous examinez l'exemple Hello World et les exemples de code suivants.
Étape 1 : Inclure Angular Javascript
dans la sectionIncluez le code suivant dans
pour importer le fichier javascript Angularjs. Vous pouvez utiliser la méthode d'écriture suivante pour obtenir le dernier code de la bibliothèque gérée par Google.<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
Étape 2 : Appliquer la directive ng-app à l'élément
Appliquez la directive ng-app à l'élément comme suit. Donnez éventuellement un nom à l'application. Elle peut être simplement écrite comme . comme notre élément html de l'élément racine de l'application. Cela donne aux développeurs d'applications la liberté d'indiquer à Angular que la page HTML entière, ou seulement une partie de celle-ci, doit être traitée comme une application Angular
.
<html ng-app="helloApp">
Étape 3 : Appliquez la directive ng-controller à l'élément Appliquer la directive ng-controller à l'élément
La directive contrôleur peut être appliquée à n'importe quel élément, tel qu'un div. Dans le code ci-dessous, "HelloCtrl" est le nom du contrôleur et peut être référencé par le code du contrôleur placé dans l'élément <script></script>
<body ng-controller="HelloCtrl">
Vous pouvez utiliser la directive ng-model pour lier l'entrée au modèle.
<input type="text" name="name" ng-model="name"/>
Ce qui suit est le code du modèle qui affiche les valeurs du modèle nommé « nom ». Notez que le modèle nommé « nom » est lié à l'entrée de l'étape 4.
Hello {{name}}! How are you doing today?