recherche

Maison >interface Web >js tutoriel >Comment créer votre première application AngularJS_AngularJS

Comment créer votre première application AngularJS_AngularJS

WBOY
WBOYoriginal
2016-05-16 15:54:441149parcourir

Suivez les étapes ci-dessous pour créer une application AngularJS
Étape 1 : Charger le cadre

En tant que framework JavaScript pur, il peut être ajouté à l'aide de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

Étape 2 : Définir l'application AngularJS à l'aide de la directive ng-app

<div ng-app="">
...
</div>

Étape 3 : Nom du modèle défini avec la directive ng-model

<p>Enter your Name: <input type="text" ng-model="name"></p>

Étape 4 : Utilisez la directive ng-bind pour définir la liaison de valeur dans le modèle ci-dessus 

<p>Hello <span ng-bind="name"></span>!</p>

Suivez les étapes suivantes pour exécuter l'application AngularJS

Utilisez les trois étapes mentionnées ci-dessus dans votre page HTML.
testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Sortie

Ouvrez textAngularJS.html dans votre navigateur Web. Veuillez entrer votre nom et voir les résultats.

2015616114947849.png (611×329)

Comment intégrer AngularJS avec HTML

  • La directive ng-app indique le démarrage d'une application AngularJS.
  • La directive ng-model crée une variable de modèle nommée "name" dans la page HTML, et la directive ng-app est utilisée dans le div.
  • ng-bind utilise le nom du modèle pour s'afficher dans la balise HTML span chaque fois que l'utilisateur saisit quelque chose dans la zone de texte.
  • La balise de fermeture 16b28748ea4df4d9c2150843fecfba68 indique la fin de l'application AngularJS.

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：Introduction au support HTML DOM d'AngularJS_AngularJSArticle suivant：Introduction au support HTML DOM d'AngularJS_AngularJS

Articles Liés

Voir plus