Angularjs 基础入门
针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写
1.angular.element
2.angular.Bootstrap
我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤
1.angular会在documentload的时候自动初始化,首先会找到ng-app这个指令指定的节点。
2.加载与module相关的指令
3.创建与应用相关的injector(依赖管理器)
4.以制定的ng-app为根节点,开始对Dom进行compile
现在我们自己初始化一下,做一个等同于ng-app这个指令的东西。angular.element这个就是包装,包装原始DOM元素或HTML字符串作为jQuery元素。angular.Bootstrap可以手动初始化脚本,我们用这两个来初始化这个脚本
<!DOCTYPEHTML> <htmllang="zh-cn"> <head> <metacharset="UTF-8"> <title>Bootstrap-manual</title> <styletype="text/css"> .ng-cloak{ display:none; } </style> </head> <body> 这里是ng-app外面的~~{{1+2}} <divid="widuu">这里是ng-app里面~~~{{1+2}}</div> <scriptsrc="angular.min.js"type="text/javascript"></script> <scripttype="text/javascript"> angular.element(document).ready(function(){ angular.bootstrap(angular.element(document.getElementById("widuu"))); }); </script> </body> </html>
2.compiler
我们清楚的看到angularjs的官方文档上边都是驼峰式命名法,譬如ngApp、ngModule、ngBind等等这些都是相关的指令,其中htmlcompiler就是允许我们自己定义元素属性和标签,Angular将这些附加行为称为directives。
官方文档对compiler的解释是这样的
Compiler CompilerisanAngularservicewhichtraversestheDOMlookingforattributes.Thecompilationprocesshappensintwophases.
Compile:traversetheDOMandcollectallofthedirectives.Theresultisalinkingfunction.
Link:combinethedirectiveswithascopeandproducealiveview.Anychangesinthescopemodelarereflectedintheview,andanyuserinteractionswiththeviewarereflectedinthescopemodel.Thismakesthescopemodelthesinglesourceoftruth.
Somedirectivessuchasng-repeatcloneDOMelementsonceforeachiteminacollection.Havingacompileandlinkphaseimprovesperformancesincetheclonedtemplateonlyneedstobecompiledonce,andthenlinkedonceforeachcloneinstance.