Maison >interface Web >js tutoriel >Une brève introduction au tutoriel de base d'AngularJS_AngularJS

Une brève introduction au tutoriel de base d'AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:37:521245parcourir

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 :

de85def78bf4e5e73c3b76e0cbf117a2e41766e13484456de30e3c90d0e39b57df15d2bd3a0797a114d79c25e114807b

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="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.

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：Collection de menus d'imitation du centre commercial de Tokyo, de menus contextuels d'imitation Win et d'effets spéciaux d'imitation Taobao TAB implémentés par les compétences JS_javascriptArticle suivant：Collection de menus d'imitation du centre commercial de Tokyo, de menus contextuels d'imitation Win et d'effets spéciaux d'imitation Taobao TAB implémentés par les compétences JS_javascript

Articles Liés

Voir plus