Maison > Article > interface Web > Une brève introduction aux notes d'étude de base d'AngularJS_AngularJS

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

WBOYoriginal: 2016-05-16 15:59:581188parcourir

AngularJS est un framework JavaScript. Il peut être ajouté aux pages HTML via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a

AngularJS étend les attributs HTML via des directives, puis lie les données aux éléments HTML via des expressions.

AngularJS est un framework JavaScript

AngularJS est un framework JavaScript, qui est une bibliothèque de classes écrite en langage JavaScript.

AngularJS est publié sous forme de fichier JavaScript, que nous pouvons ajouter à la page Web via la balise script :

Copier le code Le code est le suivant :

ff5cd64f1a10e2fb41bdb3fa4f0523c42cacc6d41bbb37262a98f745aa00fbf0

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>

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 dc6dce4a544fdca2df29d5ac0ea9906b 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 e388a4556c0f65e1904146cc1a846bee

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>

Code équivalent :

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

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

</div>

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>

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>

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>

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";
});

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.

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：Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienneArticle suivant：Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienne

Articles Liés

Voir plus