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>Copier après la connexion
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='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</p>
Copier après la connexion
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='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</p>
Copier après la connexion
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>Copier après la connexion
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>Copier après la connexion
Application de définition de module AngularJS :
Module AngularJS
var app = angular.module('myApp', []);Copier après la connexion
Application de contrôle de contrôleur AngularJS :
Contrôleur AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
