Introduction au compilateur HTML AngularJS_AngularJS

Aperçu

Le compilateur HTML d'AngularJS permet aux navigateurs de reconnaître la nouvelle syntaxe HTML. Il vous permet d'associer des comportements à des éléments ou attributs HTML, et vous permet même de créer de nouveaux éléments avec des comportements personnalisés. AngularJS appelle cette extension comportementale une "directive"

HTML possède de nombreuses structures déclaratives pour contrôler le format lors de l'écriture de pages statiques. Par exemple, si vous souhaitez centrer un élément de contenu, vous n'avez pas besoin de demander au navigateur de « trouver le milieu 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 dont le contenu doit être centré. C'est le pouvoir des langages déclaratifs.

Mais les langages déclaratifs ont également des limites. L'une des raisons est que vous ne pouvez pas les utiliser pour indiquer au navigateur de reconnaître une nouvelle syntaxe. Par exemple, si vous ne souhaitez pas que le contenu soit centré, mais 1/3 vers la gauche, il ne pourra pas le faire. Nous avons donc besoin d'un moyen pour le navigateur d'apprendre la nouvelle syntaxe HTML.

AngularJS est livré avec des instructions très utiles pour créer des applications. Nous espérons également que vous pourrez créer vos propres commandes utiles pour vos propres applications. Ces instructions étendues constituent le « langage spécifique au domaine » dans lequel vous créez votre application.

Le processus de compilation se déroulera côté navigateur ; le côté serveur ne participera à aucune des étapes et ne sera pas non plus précompilé.

Compilateur

Le compilateur est un service fourni par AngularJS. Il parcourt le DOM pour trouver les propriétés qui lui sont liées. L'ensemble du processus de compilation est divisé en deux étapes.

1. Compilez : parcourez le DOM et collectez toutes les instructions associées pour générer une fonction de lien.

2. Lien : liez une portée à l'instruction et générez une vue dynamique. Toutes les modifications apportées au modèle de portée sont reflétées dans la vue, et toutes les opérations utilisateur sur la vue sont également reflétées dans le modèle de portée. Cela fait du modèle de portée la seule chose dont votre logique métier doit se soucier.

Il existe certaines instructions, telles que ng-repeat, qui cloneront chaque élément DOM de la collection de données. Diviser l'ensemble du processus de compilation en deux étapes : compilation et liaison améliore les performances globales, car les modèles clonés ne doivent être compilés qu'une seule fois au total, puis liés à leurs instances de modèle respectives.

Commandes

La directive

indique "ce qu'il faut faire lorsque la structure HTML associée entre en phase de compilation". Les instructions peuvent être écrites dans le nom de l'élément, dans l'attribut, dans le nom de la classe CSS ou dans le commentaire. Vous trouverez ci-dessous plusieurs exemples d'utilisation de la directive ng-bind avec la même fonctionnalité.

Copier le code Le code est le suivant :

La directive

est essentiellement une simple fonction qui doit être exécutée lorsque le compilateur compile dans le DOM concerné. Vous pouvez trouver des informations plus détaillées sur les commandes dans la documentation de l'API de commande.

Voici une commande pour rendre un élément déplaçable. Notez l'attribut déplaçable dans l'élément

index.html :

Copier le code Le code est le suivant :

Faites glisser ME

script.js :

Copier le code Le code est le suivant :

angulaire.module('glisser', []).
directive('déplaçable', fonction($document) {
    var startX=0, startY=0, x = 0, y = 0;
    fonction de retour (portée, élément, attr) {
      element.css({
       position : 'relative',
       bordure : '1px rouge uni',
       Couleur d'arrière-plan : 'gris clair',
       curseur : 'pointeur'
      });
      element.bind('mousedown', function(event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.bind('mousemove', mousemove);
        $document.bind('mouseup', mouseup);
      });

      fonction mousemove(event) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          en haut : y 'px',
          gauche : x 'px'
        });
      >

      fonction mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      >
    >
 });

L'application Draggable est une application HTML qui peut être déplacée. Il s'agit d'une version HTML.举得很自然的方式扩展了浏览器理解新行为新语法的能力。

理解视图

网上有很多的模板系统。他们大多数都是« 将静态的字符模板和数据绑定，生成新字符，然后"InnerHTML插入到页面元素中"。

这意味着数据上的任何改变，都会导致数据要重新和模板结合生成新字符，再插入到DOM里。这其中会出现的问题有：需要读取用户输入并和模型的数据结合，需要覆写用户的输入，需要手动管理整个更新过程，缺少丰富的表现形式。

AngularJS则不同，AngularJS编译器使用的是带指令的DOM，而不是字符串模板。它返回的是一个链接函数，这个函数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用没有用到innerHTML，所以Il s'agit d'un modèle angulaire.使用字符串形式的绑定，还可以使用一些指示行为的结构体。

L'application AngularJS « DOM »周期中发生改变。这也意味着代码中可以获取到DOM元素的实例引用并注册事件，不用担心这用引用会在模板和数据的结合时丢失。