Angular与其他前端其他框架的不同之处

 

Angular的解析过程可以分为以下三个步骤：

1、首先HTML会被标准的浏览器API解析成DOM结构，因此模版必须符合标准的HTML格式。这与大部分前端框架不同时Angular是操作DOM而不是String;

2、随后Angular调用$compile()方法解析遍历DOM树，检索可以与directive匹配的DOM元素，将其一起添加到directive检索表中，directive已一定的优先级顺序进行排列，依次执行他们的compile()的方法进行编译；compile()可以改变DOM结构，并且生成link()方法； $compile() 返回一个包含所有directive的linking function 集合，为下面link阶段做准备。

3、link阶段会通过上面的linking function连接scope与template， dlinking function允许任何元素添加监听，以及观察scope的变化；

编译过程分成compile与link两部分的原因 

例子如下：  

 
    
     
         
  1. Hello `user`, you have these actions:   
    2.  
         
  2. <ul>   
    3.  
         
  3. <li ng-repeat="action in user.actions">   
    4.  
         
  4. `action`.`description`   
    5.  
         
  5. </li>   
    6.  
         
  6. </ul>  
    7.  
        
 
    
   首先Angular编译所有节点，检索directive，发现`user`是一个可以被填写的指令，随后在执行 ng-repeat时候出现问题，如果继续编译`action`.`description`，那么就会link到错误的scope上。这需要快速clone li元素，单独clone是不够的，还要能够编译li元素内部的指令。最简单的方式是clone一个li元素，编译一次，但是这样效率很慢，如果有100个li元素就会出现性能问题，因此统一到linking阶段对指令进行连接，可以大大提高运行性能。
 
    
 
     
 
 
     
   编译到ng-repeat，它会阻止angular继续编译下面内容，将编译li过程分离出来，编译li会生成link function包含li元素内所有指令，为附加到具体li元素的clone做准备。运行时候，ng-repeat会watch模型的变化，生成新的scope连接到里元素的clone上，并且调用link方法。
 
     
 Compile function: 所有directive被识别和排序后执行编译，为了考虑性能问题，对公共DOM操作建议放在Compile function之中
 link function：对具体DOM实例进行编译，可以给cloned的DOM元素添加监听以及从scope复制内容到DOM中。