首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

angular源码学习札记-(加载)

2013-10-24 
angular源码学习笔记----(加载)angular资源:angular文档:http://docs.angularjs.org/apiangular官网:http:

angular源码学习笔记----(加载)
angular资源:
   angular文档:http://docs.angularjs.org/api
   angular官网:http://angularjs.org/
   angular源码:https://github.com/angular/angular.js
   angular下载:http://code.angularjs.org/



学习版本:
   1.2.0-rc.2



流程简述:

   angular初始化大致上有2部分:
      1.初始化angular框架,模块等
      2.解析document

   1.读取angular.js脚本,执行angular框架上下文脚本
  

function angularInit(element, bootstrap) {  //检索加载angular的dom元素列表  var elements = [element],      //加载angular的dom元素      appElement,      //加载的模块      module,      //检索angular加载的关键字      names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],      //提取angular加载模块的正则表达式      NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/;  //追加加载angular的dom元素  function append(element) {    element && elements.push(element);  }  /**********************************************************************   遍历angular加载的关键字   检索分为两种方式:     1.使用document.getElementById,检索id中关键字     2.使用element.querySelectorAll,参考:http://www.w3.org/TR/selectors-api/]  **********************************************************************/  forEach(names, function(name) {    names[name] = true;    append(document.getElementById(name));    name = name.replace(':', '\\:');    if (element.querySelectorAll) {      forEach(element.querySelectorAll('.' + name), append);      forEach(element.querySelectorAll('.' + name + '\\:'), append);      forEach(element.querySelectorAll('[' + name + ']'), append);    }  });  /**********************************************************************   解析加载angular的dom元素及module   解析分为两种方式:      1.获取element.className,提取元素class属性内容,作为module名      2.获取names中存在于dom元素上的属性,提取属性内容,作为module  **********************************************************************/  forEach(elements, function(element) {    if (!appElement) {      var className = ' ' + element.className + ' ';      var match = NG_APP_CLASS_REGEXP.exec(className);      if (match) {        appElement = element;        module = (match[2] || '').replace(/\s+/g, ',');      } else {        forEach(element.attributes, function(attr) {          if (!appElement && names[attr.name]) {            appElement = element;            module = attr.value;          }        });      }    }  });    //如果存在需要加载angular的dom元素,调用bootstrap引导加载appElement,module  if (appElement) {    bootstrap(appElement, module ? [module] : []);  }}




学习膜拜:
   1.把javascript写出了oop的范,设计模式,设计原则很好的体现了出来。
   2.angular的结构,已经不是为了实现的页面功能,而是成为了一个应用框架。

学习吐槽:
   setupModuleLoader的时候,死绑定的属性为'angular',我要copy装b改名字,让我咋弄?
   angularInit的时候,为毛最初是elements,最后却用一个element去引导,module也只能是最后一个element上的,并且module只能为单模块名。

热点排行