简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Une brève introduction aux notes d'étude de base d'AngularJS_AngularJS

WBOY
Libérer： 2016-05-16 15:59:58
original
1172 Les gens l'ont consulté

AngularJS est un framework JavaScript. Il peut être ajouté aux pages HTML via la balise <script> </p> <p>AngularJS étend les attributs HTML via des directives, puis lie les données aux éléments HTML via des expressions. </p> <p><strong>AngularJS est un framework JavaScript<br> </strong></p> <p> AngularJS est un framework JavaScript, qui est une bibliothèque de classes écrite en langage JavaScript. </p> <p> AngularJS est publié sous forme de fichier JavaScript, que nous pouvons ajouter à la page Web via la balise script : <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="84745" class="copybut" id="copybut84745" onclick="doCopy('code84745')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code84745"><script src="http://cdn.bootcss.com /angular.js/1.3.14/angular.min.js"></script>


AngularJS étend le HTML

AngularJS étend le HTML via une série de directives ng.

La directive ng-app définit l'application AngularJS.

La directive ng-model lie la valeur du contrôle HTML au modèle de données.

La directive ng-bind lie les données du modèle à la vue HTML. 

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
Copier après la connexion

Exemple de description :

AngularJS démarre automatiquement l'exécution lorsque la page est chargée.

La directive ng-app indique à AngularJS que l'élément

dans lequel elle se trouve est l'élément racine de l'application AngularJS.

La directive ng-model lie la valeur de la balise d'entrée au nom de la variable.

La directive ng-bind lie la valeur du nom de la variable à l'attribut innerHTML de l'élément

Commandes AngularJS
Comme vous pouvez le constater, les directives AngularJS sont un ensemble d'attributs HTML commençant par ng.

Les variables d'application AngularJS peuvent être initialisées via la directive ng-init. 

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
Copier après la connexion

Code équivalent : 

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
Copier après la connexion

Remarque Vous pouvez utiliser le préfixe data-ng- au lieu de ng- pour garantir que le code HTML de la page est valide.
Vous en apprendrez davantage sur les directives AngularJS dans les chapitres suivants.

Expression AngularJS

Les expressions AngularJS sont écrites entre doubles accolades : {{ expression Statement }}.

AngularJS "affichera" avec précision l'expression comme résultat calculé, par exemple : 

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
Copier après la connexion

Les expressions AngularJS lient les données au HTML de la même manière que la directive ng-bind. 

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>

</body>
</html>
Copier après la connexion

Vous en apprendrez plus sur les expressions AngularJS dans les chapitres suivants.

Application AngularJS

Le module AngularJS définit les applications AngularJS.

Les contrôleurs AngularJS contrôlent le comportement des applications AngularJS.

La directive ng-app est utilisée pour spécifier l'application, et la directive ng-controller est utilisée pour spécifier le contrôleur. 

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>
Copier après la connexion

Applications de définition de modules AngularJS : 

var app = angular.module('myApp', []);
　　AngularJS控制器控制AngularJS Applications的行为：

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
Copier après la connexion

Vous en apprendrez plus sur les modules et les contrôleurs dans les chapitres suivants.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Étiquettes associées：
angularjs
source：php.cn
Article précédent：Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienne Article suivant：Comment remplacer dynamiquement le chemin de l'image de la bannière par les compétences JS tab_javascript
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1809
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1962
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1660
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1563
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1592
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！