Introduction to AngularJS HTML Compiler_AngularJS

Overview

AngularJS’s HTML compiler enables browsers to recognize new HTML syntax. It allows you to associate behaviors to HTML elements or attributes, and even allows you to create new elements with custom behaviors. AngularJS calls this behavioral extension a "directive"

HTML has many declarative structures to control the format when writing static pages. For example, if you want to center a piece of content, you don't have to tell the browser to "find the midpoint of the window and combine it with the middle of the content." You just need to add an align="center" attribute to the element that needs the content to be centered. This is the power of declarative languages.

But declarative languages ​​also have limitations. One of the reasons is that you can’t use them to tell the browser to recognize new syntax. For example, if you don’t want the content to be centered, but 1/3 to the left, it won’t be able to do it. So we need a way for the browser to learn new HTML syntax.

AngularJS comes with some very useful instructions for creating APPs. We also hope that you can create some commands of your own that are useful for your own applications. These extended instructions are the "Domain Specific Language" in which you create your APP.

The compilation process will occur on the browser side; the server side will not participate in any of the steps, nor will it be pre-compiled.

Compiler

The compiler is a service provided by AngularJS. It traverses the DOM to find properties related to it. The entire compilation process is divided into two stages.

1. Compile: Traverse the DOM and collect all related instructions to generate a link function.

2. Link: Bind a scope to the instruction and generate a dynamic view. Any changes to the scope model are reflected in the view, and any user operations on the view are also reflected in the scope model. This makes the scope model the only thing your business logic needs to care about.

There are some instructions, such as ng-repeat, which will clone each DOM element in the data collection. Dividing the entire compilation process into two stages: compilation and linking, improves overall performance, because the cloned templates only need to be compiled once in total and then linked to their respective model instances.

Commands

The

directive indicates "what should be done when the associated HTML structure enters the compilation phase." Instructions can be written in the name of the element, in the attribute, in the CSS class name, or in the comment. Below are several examples of using the ng-bind directive with the same functionality.

Copy code The code is as follows:

The

directive is essentially just a function that needs to be executed when the compiler compiles into the relevant DOM. You can find more detailed information about commands in the command API documentation.

Here is a command to make an element draggable. Note the draggable attribute in the element.

index.html:

Copy code The code is as follows:

Drag ME

script.js:

Copy code The code is as follows:

angular.module('drag', []).
directive('draggable', function($document) {
    var startX=0, startY=0, x = 0, y = 0;
    return function(scope, element, attr) {
      element.css({
       position: 'relative',
       border: '1px solid red',
       backgroundColor: 'lightgrey',
       cursor: 'pointer'
      });
      element.bind('mousedown', function(event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.bind('mousemove', mousemove);
        $document.bind('mouseup', mouseup);
      });

      function mousemove(event) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          top: y 'px',
          left:  x 'px'
        });
      }

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

通过加入draggable属性可以让任何HTML元素都实现这个新的行为。我们这种改进的优美之处在于我们给了浏览器新能力。我们用了一种只要开发者熟悉HTML规则，就会举得很自然的方式扩展了浏览器理解新行为新语法的能力。

理解视图

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

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

AngularJS则不同，AngularJS编译器使用的是带指令的DOM，而不是字符串模板。它返回的是一个链接函数，这个函数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用没有用到innerHTML，所以我们也不用覆写用户的输入。更特别的是，Angular的指令不仅仅能使用字符串形式的绑定，还可以使用一些指示行为的结构体。

AngularJS的编译会生成一个“稳定的DOM”。这意味绑定了数据模型的DOM元素的实例不会在绑定的生命周期中发生改变。这也意味着代码中可以获取到DOM元素的实例引用并注册事件，不用担心这用引用会在模板和数据的结合时丢失。