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

WBOYoriginal: 2016-05-16 15:53:261198parcourir

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 e0d5b055b128e8aa6d694e7a88aabe96

Incluez le code suivant dans 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 d90fcdb535d6081491edebb07224a674

Appliquez la directive ng-app à l'élément 100db36a723c770d327fc0aef2ce13b1 comme suit. Donnez éventuellement un nom à l'application. Elle peut être simplement écrite comme ab620c2ce5dd4d9766434fb51c51baab. 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 9c5594a5fc8d2e506f1a8147102c836b Appliquer la directive ng-controller à l'élément 9c5594a5fc8d2e506f1a8147102c836b 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0

<body ng-controller="HelloCtrl">

É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"/>

É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;

Étape 6 : Créer le code du contrôleur dans 2934a685527f5cd6bcb20a3dc28499e1

Créez le code du contrôleur dans l'élément de script comme indiqué ci-dessous. Dans le code ci-dessous, "helloApp" est le nom du module défini à l'aide de la directive ng-app dans l'élément 100db36a723c770d327fc0aef2ce13b1 Créez un contrôleur avec le nom "HelloCtrl" défini à l'aide de la directive ng-controller dans l'élément 6c04bd5ca3fcae76e30b72ad730ca86d. Le contrôleur "HelloCtrl" est enregistré avec ce module - "helloApp". Les objets $scope sont liés

Veuillez consulter le code complet

<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>

ici

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Js php implémente les compétences de téléchargement de fichiers_javascript par glisser-déposer asynchroneArticle suivant：Js php implémente les compétences de téléchargement de fichiers_javascript par glisser-déposer asynchrone

Articles Liés

Voir plus