Maison > interface Web > js tutoriel > Comment écrire Hello World à l'aide de la bibliothèque AngularJS de JavaScript_AngularJS

Comment écrire Hello World à l'aide de la bibliothèque AngularJS de JavaScript_AngularJS

WBOY
Libérer: 2016-05-16 15:53:26
original
1158 Les gens l'ont consulté

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.

  • Directives ng-app, ng-controller, ng-model
  • Gabarit avec deux accolades

Étape 1 : Inclure Angular Javascript

dans la section

Incluez 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>
Copier après la connexion

É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">
Copier après la connexion

É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">
Copier après la connexion
Étape 4 : Appliquer la directive ng-model à l'élément d'entrée

Vous pouvez utiliser la directive ng-model pour lier l'entrée au modèle.



<input type="text" name="name" ng-model="name"/>
Copier après la connexion
Étape 5 : Écrire le code du modèle

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&#63;
Copier après la connexion
Étape 6 : Créer le code du contrôleur dans
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal