Le texte original se poursuit et le livre continue de durer. . . Reportez-vous toujours à http://code.angularjs.org/1.0.2/docs/guide/compiler
1. Résumé
Le compilateur HTML d'Angular permet aux développeurs de personnaliser la nouvelle syntaxe HTML. Le compilateur nous permet d'attacher un comportement à n'importe quel élément ou attribut HTML, ou même de nouvelles balises HTML, des attributs (tels que <belle fille = "CF"> </ Beautiful>). Angular appelle ces directives de comportement supplémentaires.
HTML possède de nombreuses structures de style HTML prédéfinies qui forment spécifiquement des documents statiques (qui peuvent dire au navigateur comment afficher le contenu tagué). Supposons que quelque chose soit centré, et nous n'avons pas besoin d'enseigner au navigateur comment le faire (n mots omis ici). Nous devons simplement ajouter Align = "Center" aux balises qui doivent être centrées. C'est la grande chose à propos du langage déclaratif.
Mais les langues déclaratives ont également leurs limites, c'est-à-dire que vous ne pouvez pas dire au navigateur comment gérer la syntaxe en dehors de la portée prédéfinie. Par exemple, nous ne pouvons pas dire au navigateur très simplement comment aligner le texte 1/3 du navigateur. Nous avons donc besoin d'un moyen de faire bouger le navigateur avec le temps et d'apprendre de nouvelles grammaires.
Angular pré-contacte certaines directives qui sont utiles pour créer des applications. Nous pouvons également créer des directives uniques pour nos propres applications. Ces extensions de directifs deviendront le "langage spécifique au domaine" de nos propres applications.
Ces compilations ne se produiront que du côté du navigateur et ne nécessitent pas d'étapes côté serveur ou de précompilation.
2. Compilateur
En tant que service angulaire, le compilateur est responsable de la traversée de la structure DOM et de la recherche de propriétés. Le processus de compilation est divisé en deux étapes:
1. Compiler: Traverser l'arborescence du nœud DOM et collecter toutes les directives. Le résultat est une fonction de liaison.
2. Lien: liez les directives dans une portée et créez une vue en direct. Toute modification de l'étendue sera reflétée dans la vue (mise à jour de la vue); Toute activité de l'utilisateur (changement) au modèle sera reflétée dans le modèle de portée (liaison bidirectionnelle). Cela permet au modèle de portée de refléter la valeur correcte.
Certaines directives, telles que Ng-Repeat, copient un élément spécifique (combinaison) une fois pour chaque élément de la collection. La compilation et la liaison sont deux étapes pour améliorer les performances. Parce que le modèle cloné ne doit être compilé qu'une seule fois, puis lier les éléments de chaque collection une fois (similaire au cache de modèle).
3. Directive
La directive est un comportement qui est déclenché lorsqu'une structure HTML spécifique est rencontrée pendant la compilation. Les directives peuvent être placées dans le nom, l'attribut, la classe et même les commentaires d'éléments. Voici quelques façons de référencer NG-Bind (une directive intégrée):
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <! - Directive: ng-bider exp ->
La directive n'est qu'une fonction qui s'exécute lorsque le compilateur le rencontre dans le DOM. La documentation de l'API directive explique en détail comment créer une directive.
Voici un échantillon qui permet à un élément de jouer à cache-cache avec votre souris ...
<! Doctype html> <html lang = "zh-cn" ng-app = "hideankseek"> <éadf> <meta charset = "utf-8"> <itle> caché et cherche </title> <style type = "text / css"> .ng-col {display: non; } </ style> </ head> <body> <span wildcat> Je me suis enfui dès que j'ai touché ~~ come me ~~ </span> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> angular.module ("hideankseek", []). ($ Document) {var maxleft = 400, maxtop = 300; "Position": "Absolute", "Border": "1px Solid Green"}); element.bind ("MouseEnt", fonction (événement) {élément.css ({"Left": parseInt (Math.Random () * 10000% maxleft) + "PX", "Top": ParseInt }). Texte (msg [parseInt (math.random () * 10000% msg.length)]);}).L'ajout de l'attribut "Wildcat" à n'importe quel élément fera que l'élément ait un nouveau comportement. De cette façon, nous avons enseigné au navigateur comment gérer les éléments qui se cacheront (ne vous inquiétez pas, vous n'êtes pas dans une certaine pièce, vous ne vous accrocherez pas -_-!). Nous avons élargi le "vocabulaire" du navigateur à travers cette approche. C'est un moyen relativement naturel pour quiconque connaît les règles HTML.
Il est tard dans la nuit maintenant, et nous continuerons demain. . . Rendez-vous après l'annonce
====================== Magnifique ligne de division ==========================================.
4. Comprendre la vue (vue)
Il existe de nombreux systèmes de modèles à l'extérieur, qui se connectent généralement aux données via des chaînes de modèle, génèrent la chaîne HTML finale et écrivent le résultat dans un élément via l'attribut InnerHTML.
Cela signifie que lorsque des données changent, les données et les modèles doivent être fusionnés à nouveau en chaînes, puis écrits à l'élément correspondant comme innerhtml. Il y a quelques problèmes ici: (je ne comprends vraiment pas la traduction littérale ici ... seulement yy) Supposons qu'il y ait une telle scène, et le modèle contient la boîte d'entrée. L'utilisateur entre dans la zone d'entrée et le modèle est mis à jour de manière synchrone. Les modèles normaux mettent à jour les vues via InnerHTML, les chaînes et les connexions de données, qui interrompront la saisie des utilisateurs et auront une mauvaise expérience.
Angular est unique. Le compilateur angulaire (compilateur) traite DOM via les directives, pas en traitement des modèles de chaîne. Le résultat de traitement est une fonction de liaison qui se combine avec le modèle de portée et génère un modèle en temps réel. La liaison de la vue au modèle de portée nous est transparente. Les développeurs n'ont pas besoin de faire des actions pour mettre à jour les vues ou les modèles. De plus, comme le modèle de vue n'est pas mis à jour avec InnerHTML, l'entrée de l'utilisateur ne sera pas interrompue. De plus, les directives angulaires peuvent non seulement lier les valeurs de texte, mais aussi être des constructions comportementales.
Cette méthode de traitement d'Angular produit un DOM stable. Cela signifie que pendant le cycle de vie de l'élément DOM, il est toujours lié à une instance d'un certain modèle, et cette relation ne changera pas. Cela signifie également que le code peut conserver une référence à un objet DOM, enregistrer des fonctions d'événement à lui et que cette référence ne sera pas détruite par la fusion de données de modèle.