Maison > Article > interface Web > Tutoriel AngularJS et exemple d'analyse de code

Tutoriel AngularJS et exemple d'analyse de code

小云云original: 2018-01-04 09:32:231276parcourir

Cet article vous présente principalement les connaissances pertinentes d'angularjs. Les amis intéressés devraient y jeter un œil. AngularJS étend HTML avec de nouvelles propriétés et expressions. AngularJS peut créer une application à page unique (SPA : Single Page Applications).

Introduction à angulairejs

AngularJS est un framework JavaScript. Il peut être ajouté aux pages HTML via la balise <script> </p> <p>AngularJS étend le HTML via des directives et lie les données au HTML via des expressions. </p> <p>AngularJS est un framework JavaScript </p> <p>AngularJS est un framework JavaScript. C'est une bibliothèque écrite en JavaScript. </p> <p>AngularJS est publié sous forme de fichier JavaScript, qui peut être ajouté aux pages Web via la balise script : </p> <p><script src="http://cdn.static.runoob.com/ libs /angular.js/1.4.6/angular.min.js"></script>

Remarque Nous vous recommandons de placer le script au bas de l'élément .

Cela augmentera la vitesse de chargement des pages car le chargement HTML n'est pas soumis au chargement de script.

Téléchargez différentes versions d'angular.js : https://github.com/angular/angular.js/releases

AngularJS étend le HTML

AngularJS s'étend via ng-directives HTML . La directive

ng-app définit une application AngularJS. La directive

ng-model lie les valeurs des éléments (telles que la valeur d'un champ de saisie) à l'application.

La directive ng-bind lie les données de l'application à une vue HTML.

Exemple AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> 
<p ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</p>
</body>
</html>

Explication d'exemple :

Lorsque la page Web est chargée, AngularJS démarre automatiquement. La directive

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

est le "propriétaire" de l'application AngularJS.

La directive ng-model lie la valeur du champ de saisie au nom de la variable d'application. La directive

ng-bind lie le nom de la variable d'application au innerHTML d'un paragraphe.

Remarque Si vous supprimez la directive ng-app, le HTML affichera l'expression directement sans calculer le résultat de l'expression.

Qu'est-ce qu'AngularJS ?

AngularJS facilite le développement d'applications modernes à page unique (SPA : Single Page Applications).

AngularJS lie les données de l'application aux éléments HTML.
AngularJS peut cloner et répéter des éléments HTML.
AngularJS peut masquer et afficher des éléments HTML.
AngularJS peut ajouter du code "derrière" des éléments HTML.
AngularJS prend en charge la validation des entrées.

Directives AngularJS

Comme vous pouvez le constater, les directives AngularJS sont des attributs HTML préfixés par ng.

La directive ng-init initialise les variables de l'application AngularJS.

Exemple AngularJS

<p ng-app="" ng-init="firstName=&#39;John&#39;">
<p>姓名为 <span ng-bind="firstName"></span></p>
</p>

Remarque HTML5 autorise les attributs étendus (faits maison), en commençant par data-.

Les attributs AngularJS commencent par ng-, mais vous pouvez utiliser data-ng- pour rendre la page valide pour HTML5.

Avec HTML5 valide :

Instance AngularJS

<p data-ng-app="" data-ng-init="firstName=&#39;John&#39;">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</p>

Expression AngularJS

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

Les expressions AngularJS lient les données au HTML, ce qui est similaire à la directive ng-bind.

AngularJS « produira » les données là où l'expression est écrite.

Les expressions AngularJS ressemblent beaucoup aux expressions JavaScript : elles peuvent contenir des littéraux, des opérateurs et des variables.

Instance {{ 5 + 5 }} ou {{ firstName + " " + lastName }}

Instance AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<p ng-app="">
  <p>我的第一个表达式： {{ 5 + 5 }}</p>
</p>
</body>
</html>

Application AngularJS

Les modules AngularJS définissent les applications AngularJS.

Le contrôleur AngularJS (Controller) est utilisé pour contrôler les applications AngularJS.

La directive ng-app définit l'application et ng-controller définit le contrôleur.

Instance AngularJS

<p ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

Application de définition de module AngularJS :

Module AngularJS

var app = angular.module('myApp', []);

Application de contrôle de contrôleur AngularJS :

Contrôleur AngularJS

app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

Recommandations associées :

Code d'implémentation de la fonction de requête floue AngularJS

AngularJS implémente la sélection du panier et le partage de sélection inversée exemples fonctionnels

AngularJS implémente la fonction de rappel de limite de mots dans la zone de saisie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Explication détaillée de la façon d'accéder directement aux pages JSP dans le répertoire WEB-INFArticle suivant：Explication détaillée de la façon d'accéder directement aux pages JSP dans le répertoire WEB-INF

Articles Liés

Voir plus