Aperçu
Le compilateur HTML d'AngularJS permet au navigateur de reconnaître la nouvelle syntaxe HTML. Il vous permet d'associer des comportements aux éléments ou attributs HTML, et vous permet même de créer de nouveaux éléments avec des comportements personnalisés. AngularJS appelle ce comportement étendu aux "instructions"
HTML a de nombreuses structures déclaratives pour contrôler le format lors de l'écriture de pages statiques. Par exemple, si vous souhaitez centrer un contenu, vous n'avez pas à dire au navigateur de «trouver le point médian de la fenêtre et de le combiner avec le milieu du contenu». Il vous suffit d'ajouter un attribut Align = "Center" à l'élément qui doit être centré. C'est le pouvoir du langage déclaratif.
Mais les langues déclaratives ont également quelque chose qui ne peut pas être réalisé, et l'une des raisons est que vous ne pouvez pas l'utiliser pour permettre aux navigateurs de reconnaître la nouvelle syntaxe. Par exemple, si vous ne centrez pas le contenu, mais à 1/3 de la gauche, il ne pourra pas le faire. Nous avons donc besoin d'un moyen de permettre au navigateur d'apprendre la nouvelle syntaxe HTML.
Les étudiants AngularJS proviennent de certaines instructions qui sont très utiles pour créer des applications. Nous espérons également que vous pourrez créer des instructions utiles pour vos propres applications. Ces instructions étendues sont le "langage spécifique au domaine" que vous créez l'application.
Le processus de compilation se produira du côté du navigateur; Le côté serveur ne participera à aucune étape, ni ne sera précompilé.
Complice
Le compilateur est un service fourni par AngularJS. Il recherche des propriétés qui y sont liées en traversant le DOM. L'ensemble du processus de compilation est divisé en deux étapes.
1. Compilation: traversez le DOM et collectez toutes les instructions pertinentes pour générer une fonction de liaison.
2. Lien: liez une portée à la directive et générez une vue dynamique. Toute modification du modèle de portée sera reflétée sur la vue, et toutes les actions de l'utilisateur sur la vue seront reflétées sur le modèle de portée. Cela fait du modèle de portée la seule chose dont vous devez vous soucier dans votre logique commerciale.
Il existe des instructions, telles que Ng-Repeat, qui clones chaque élément DOM de l'ensemble de données une fois. La pratique de la division de l'ensemble du processus de compilation en deux étapes: la compilation et la liaison améliorent les performances globales, car le modèle cloné doit être compilé une fois au total, puis lié à leurs instances de modèle respectives.
instruction
La directive indique "l'action qui doit être effectuée lorsque la structure HTML associée entre dans la phase de compilation". Les directives peuvent être écrites au nom de l'élément, dans l'attribut, dans le nom de la classe CSS et dans les commentaires. Vous trouverez ci-dessous plusieurs exemples d'utilisation de la directive NG-Bind avec la même fonction.
La copie de code est la suivante:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </ ng-bind>
<! - Directive: ng-bider exp ->
Les directives ne sont essentiellement que des fonctions qui doivent être exécutées lorsque le compilateur se compile avec le DOM pertinent. Vous pouvez trouver des informations plus détaillées sur les directives dans la documentation de l'API directive.
Vous trouverez ci-dessous une commande qui rend les éléments draggables. Remarquez l'attribut draggable dans l'élément <span>.
index.html:
La copie de code est la suivante:
<! doctype html>
<html ng-app = "glisser">
<adal>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </ script>
<script src = "script.js"> </ script>
</ head>
<body>
<span drawgable> glisser-moi </span>
</docy>
</html>
script.js:
La copie de code est la suivante:
angular.module ('drag', []).
directive ('draggable', fonction ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
fonction return (scope, élément, att) {
element.css ({
Position: «relative»,
Border: '1px Solid Red',
BackgroundColor: 'Lightgrey',
curseur: 'pointeur'
});
element.bind ('Mousedown', fonction (événement) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind («MouseMove», MouseMove);
$ document.bind ('MouseUp', MouseUp);
});
fonction mousmove (événement) {
y = event.screeny - starty;
x = event.screenx - startx;
element.css ({
en haut: y + 'px',
à gauche: x + 'px'
});
}
fonction sourisup () {
$ document.unbind («MouseMove», MouseMove);
$ document.unbind («MouseUp», MouseUp);
}
}
});
Ce nouveau comportement peut être réalisé en ajoutant l'attribut draggable. La beauté de notre amélioration est que nous donnons au navigateur de nouvelles capacités. Nous avons utilisé un moyen naturel d'élargir la capacité du navigateur à comprendre de nouveaux comportements et de nouvelles syntaxes tant que le développeur connaît les règles HTML.
Comprendre la vue
Il existe de nombreux systèmes de modèles en ligne. La plupart d'entre eux "lient des modèles de caractères statiques et des données, génèrent de nouveaux caractères et les insérent dans des éléments de page via innerhtml".
Cela signifie que tous les modifications des données entraîneront une recombination des données avec le modèle pour générer de nouveaux caractères, puis inséré dans le DOM. Les problèmes qui se posent comprennent: la saisie des utilisateurs doit être lue et combinée avec les données du modèle, la saisie des utilisateurs doit être écrasée, l'ensemble du processus de mise à jour doit être géré manuellement et le manque d'expressions riches.
AngularJS est différent. Le compilateur AngularJS utilise DOM avec des instructions, plutôt que des modèles de chaîne. Il renvoie une fonction de liaison, qui se combine avec le modèle de portée pour générer une vue dynamique. Le processus de liaison de cette vue et de ce modèle est "transparent". Le développeur n'a rien à faire pour mettre à jour la vue. Et l'application n'utilise pas d'innerhtml, nous n'avons donc pas à écraser l'entrée de l'utilisateur. Plus particulièrement, les directives d'Angular peuvent non seulement utiliser la liaison des cordes, mais également utiliser certaines structures qui indiquent le comportement.
La compilation AngularJS générera un "DOM stable". Cela signifie que les cas d'éléments DOM liés au modèle de données ne changeront pas pendant le cycle de vie de la liaison. Cela signifie également que le code peut obtenir des références d'instance d'éléments DOM et des événements d'enregistrement, sans craindre que cette référence soit perdue lorsque le modèle et les données sont combinés.