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

WBOY

Libérer： 2016-05-16 15:59:58

original

1209 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