AngularJS入门

地址：北京市海淀区中关村大街49号大华科技商厦三层c座。AngularJS入门一、总括本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。二、Angularscript标签本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。!doctypehtmlhtmlxmlns:ng==angular.js/body/html将sciprt标签放置于页面底部。这样做能避免因为加载angular.js而阻挡HTML的加载，从而降低应用的加载时间。我们可以在。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话，直接连接也无妨。o选择：angular-[version].js是方便阅读的一个版本，适合日常开发、调试使用。o选择：angular-[version].min.js是压缩、混淆后的版本，适合最终产品使用。放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于html标签中。htmlng-app如果我们需要使用老派风格的directive语法”ng:”，那么我们需要加入一个xml-namespace到html标签中以“取悦”IE。（这个是一个历史原因，我们也不推荐使用ng:）htmlxmlns:ng=地址：北京市海淀区中关村大街49号大华科技商厦三层c座。三、自动初始化Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情：加载与module相关的directive。创建应用相关的injector（依赖管理器）。以ng-app指定根节点，开始对DOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非html）作为根节点，从而限制angular的作用范围。!DOCTYPEHTMLhtmllang=zh-cnheadmetacharset=UTF-8titleBootstrap-auto/titlestyletype=text/css.ng-cloak{display:none;}/style/headbody这里是ng-app外面的~~{{1+2}}divng-appclass=ng-cloak这里是ng-app里面~~~{{1+3*2}}/divscriptsrc=../angular-1.0.1.jstype=text/javascript/script/body/html注：里面的”ng-cloak”，这个是用于在angular.js编译完成之前（对！没错！是编译完成之前，不是angularjs加载完成之前。所以，如果想很好地避免这个情况，最好的办法是优化应用的加载流程，或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器，所以最好使用class=”ng-cloak”的方式。编译完成后，这个class或属性会被删除。）隐藏模版，避免在页面显示原模版。四、手工初始化如果我们想进一步控制初始化进程(例如你需要通过scriptloader加载angular.js或者在angular编译页面前做一些操作)，那么我们可以用一个手工调用的启动方法去代替。以下例子等同于使用ng-app这个directive：地址：北京市海淀区中关村大街49号大华科技商厦三层c座。!DOCTYPEHTMLhtmllang=zh-cnheadmetacharset=UTF-8titleBootstrap-manual/titlestyletype=text/css.ng-cloak{display:none;}/style/headbody这里是ng-app外面的~~{{1+2}}divid=rootOfAppclass=ng-cloak这里是ng-app里面~~~{{1+3*2}}/divscriptsrc=../angular-1.0.1.jstype=text/javascript/scriptscripttype=text/javascriptangular.element(document).ready(function(){angular.bootstrap(angular.element(document.getElementById(rootOfApp)));});/script/body/html就是说，我们的代码可以按照以下步骤编写：1.在页面和其他代码加载完成后，找到应用模版的根节点；2.调用angular.bootstrap，让angular去将模版编译为一个可执行的，双向绑定的应用！Angular的HTMLcompiler允许开发者自定义新的HTML语法。compiler允许我们对任意HTML元素或属性，甚至是新的HTML标签、属性（如beautifulgirl=”cf”/beautiful）附加行为。Angular将这些附加行为称为directives。HTML有很多专门格式化静态文档的预定义HTML样式结构（可以告诉浏览器如何显示标记的内容）。假设某东东需要被居中，而我们不需要教浏览器如何去做（此处省略N字）。我们只需要简单地对需要居中的标签加入align=”center”即可。这就是声明式语言（declarativelanguage）的牛X之处。但是声明式语言也有它的局限性，即你不能告诉浏览器如何处理在预定义范围外的语法。例如，我们不能很简单地告诉浏览器如何让文本在浏览器的1/3处对齐。所以，我们正需要一个让浏览器与时俱进，学学新语法的途径。Angular预先绑定了一些对构建应用有帮助的directives。我们也可以自己创建属于自己应用的独特的directives。这些directive扩展将成为我们自己的应用的“特定领域语言”（DomainSpecificLanguage）。地址：北京市海淀区中关村大街49号大华科技商厦三层c座。这些编译将仅仅发生在浏览器端，无须服务端或者预编译步骤。五、CompilerCompiler作为Angular的一个服务（Service），负责遍历DOM结构，寻找属性。编译过程分成两个阶段：1.编译（Compile）：遍历DOM节点树，收集所有directives。返回结果是一个链接函数（linkingfunction）。2.链接（Link）：将directives绑定到一个作用域（scope）中，创建一个实况视图（liveview）。在scope中的任何改变，将会在视图中得到体现（更新视图）；任何用户对模版的活动（改变），将会体现在scopemodel中（双向绑定）。这使得scopemodel能够反映正确的值。一些directives，诸如ng-repeat，会为每一个在集合（collection）中的元素复制一次特定的元素（组合）。编译和链接两个阶段，使性能得以提升。因为克隆出来的模版(template)只需要编译一次，然后为每一个集合中的元素进行一次链接（类似模版缓存）。六、DirectiveDirective是一个行为，在编译过程中遇到特定的HTML结构时，它会被触发。Directives可以放置在元素的name、attribute、class甚至注释中。以下是几种引用ng-bind（一个内置directive）的方法：spanng-bind=exp/spanspanclass=ng-bind:exp;/spanng-bind/ng-bind!--directive:ng-bindexp--Directive只是一个当编译器在DOM中遇到时会执行的一个函数（function）。directiveAPI文档中有详细讲解如何创建一个directive。下面是一个样例，可以让一个元素跟你的鼠标玩躲猫猫……!DOCTYPEhtmlhtmllang=zh-cnng-app=HideAnkSeekheadmetacharset=UTF-8地址：北京市海淀区中关村大街49号大华科技商厦三层c座。title躲猫猫/titlestyletype=text/css.ng-cloak{display:none;}/style/headbodyspanclass=ng-cloakwildcat一碰我就跑~~来点我啊~~/spanscriptsrc=../angular-1.0.1.jstype=text/javascript/scriptscripttype=text/javascriptangular.module(HideAnkSeek,[]).directive(wildcat,function($document){varmaxLeft=400,maxTop=300;varmsg=[我闪~~,抓我呀~~~,雅蠛蝶~~,噢耶~~,你真逊~！,就差那么一点点了！,继续吧~~总有一天我会累的];returnfunction(scope,element,attr){element.css({position:absolute,border:1pxsolidgreen});element.bind(mouseenter,function(event){element.css({left:parseInt(Math.random()*10000%maxLeft)+px,top:parseInt(Math.random()*10000%maxTop)+px}).text(msg[parseInt(Math.random()*10000%msg.length)]);}).bind(click,function(event){element.text(噢MyLadyGaga。。。被你逮到了。。。);element.unbind(mouseenter);});};});/script/body/html在任意元素中添加“wildcat”这个属性，将会使该元素拥有新的行为。就这样，我们教会了浏览器如何处理会躲猫猫的元素（放心，你不是在某个房间，你不会挂的-_-!）。我们通过这一途径扩展了浏览器的“词汇量”。对于任意一个熟悉HTML规则的人，这算是一个比较自然的方式。七、理解视图（View）地址：北京市海淀区中关村大街49号大华科技商厦三层c座。外面有许多模版系统，它们通常都通过模版字符串与数据进行连接，生成最终的HTML字符串，并将结果通过innerHTML属性写入某元素里。八、总括本文主要是angular组件(components)的概览，并说明他们如何工作。列表如下：statup-依旧是helloworld...改为HelloKitty！runtime-介绍angular的runtimescope-view与contorller的纽带（神马glue...胶）controller-app的行为(applicationbehavior)model-app的数据view-用户所看到的东东directives-HTML的语法扩展filters-根据用户的本地格式，格式化数据injector-加载我们的app（依赖管理之类）module-配置injector$-angular的命名空间（namespace）九、启动（Startup）下面描述angular是如何启动的（参考图表与下面的例子）：1.浏览器加载HTM