Introduction à AngularJS


AngularJS est un framework JavaScript. Il peut être ajouté aux pages HTML via la balise <script>

AngularJS étend le HTML via des Directives et lie les données au HTML via des Expressions.

AngularJS est un framework JavaScript

AngularJS est un framework JavaScript. C'est une bibliothèque écrite en JavaScript.

AngularJS est publié sous forme de fichier JavaScript, qui peut être ajouté aux pages Web via la balise script :

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>


NoteNous vous recommandons de placer le script au bas de l'élément <body>.
Note我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
Cela augmentera la vitesse de chargement des pages car le chargement HTML n'est pas soumis au chargement de script.

Téléchargez chaque version d'angular.js : https://github.com/angular/angular.js/releases

AngularJS étend le HTML

AngularJS étend le HTML via ng-directives. La directive

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

ng-model lie une valeur d'élément (telle que la valeur d'un champ de saisie) à l'application. La directive

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Explication avec exemples :

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

ng-app indique à AngularJS que l'élément <div> est le "propriétaire" de l'application AngularJS. La directive

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

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


NoteSi vous supprimez la directive
Note如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
ng-app<🎜>, 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 d'application AngularJS.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

NoteHTML5 autorise les attributs étendus (faits maison), commençant par
NoteHTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
data-<🎜>. <🎜>Les attributs AngularJS commencent par <🎜>ng-<🎜>, mais vous pouvez utiliser <🎜>data-ng-<🎜> pour rendre la page valide pour HTML5.

Avec HTML5 valide :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" Afficher exemples en ligne

Expressions 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 à JavaScript Expressions  : Elles peuvent contenir des littéraux, des opérateurs et des variables.

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="">
  <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Application AngularJS

AngularJS Module Application AngularJS définie.

AngularJS Controller est utilisé pour contrôler les applications AngularJS. La directive

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

Instance

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<p>尝试修改以下表单。</p>

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" Bouton pour afficher des exemples en ligne


Application de définition de module AngularJS :

Module AngularJS

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

Le contrôleur AngularJS contrôle l'application :

Contrôleur AngularJS

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

Dans les didacticiels suivants, vous en apprendrez davantage sur les applications et les modules.