【AngularJS】AngularJS HTML编译器介绍-HTML编译器

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元素的实例引用并注册事件，不用担心这用引用会在模板和数据的结合时丢失。

关于AngularJS HTML编译器介绍的用户互动如下：

　　相关问题：ionic 有没有类似 vs的编译器

　　答：没有。 ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。 >>详细

　　相关问题：请教一个angularjs的数据双向绑定的问题

　　答：AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, ... >>详细

　　相关问题：在anjular中 function中的$scope和$rootscope有什...

　　答：更准确的来说,$rootScope是由angularJS的核心模块ng创建的。 scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用... >>详细