angular学习总结

1、Angularjs学习总结初识angularJsAngularJS是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行的。它的目标是通过MVC模式（MVC）功能增强基于浏览器的应用，使开发和测试变得更加容易。AngularJS是创建在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而命令式编程非常适合来表示业务逻辑。1框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。设计目标：· 将应用逻辑与对DOM的操作解耦。

2、这会提高代码的可测试性。· 将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。· 将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进，并且让双方的复用成为可能。· 指导开发者完成构建应用程序的整个历程：从用户界面的设计，到编写业务逻辑，再到测试。Angular遵循软件工程的MVC模式，并鼓励展现，数据，和逻辑组件之间的松耦合。通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web

3、应用。Angular常用指令及属性1. ng-appangular的入口，告诉angular 这里面的代码都由angular接手。2. ng-bind2.1 简要说明效果等同于 ；但是 在未加载完成时会显示出代码，很丑，而ng-bind在未加载完成时不会显示出来，较为美观2.2等效语法2.2 适用场景首页2.3 效果图3. Scope3.1简要说明3.2常用属性· $id, 通过nextUid方法来生成一个唯一的标识· $phase, 这是一个状态标识,一般在dirty check时用到，表明现在在哪个阶段· $parent, 代表自己的上级scope属性

4、3; $watchers, 保存scope变量当前所有的监控数据,是一个数组· $nextSibling, 下一个兄弟scope属性· $prevSibling, 前一个兄弟scope属性· $childHead, 第一个子级scope属性· $childTail, 最后一个子级scope属性· $destroyed, 表示是否被销毁· $asyncQueue, 代表异步操作的数组· $postDigestQueue, 代表一个在dirty check之后执行的数组· $listeners, 代表scope变量当前

5、所有的监听数据,是一个数组· $listenerCount, 暂无· $isolateBindings, 暂无3.3event事件3.3.1 $emit只能向parent controller传递event与data，将事件向上传播到所有子作用域，包括自己。自己的理解：获取父作用域里定义的事件，并触发。3.3.2 $broadcast只能向child controller传递event与data，事件向下传播到所有子作用域，包括自己。自己的理解：获取子作用域里定义的事件，并触发。3.3.3$on用于接收event与data。自己的理解：自定义事件，不会主动触发。4. ng-

6、repeat4.1简要说明循环体的渲染指令。4.2常用属性5. ng-include5.1简要说明在一个页面里引用另一个页面，有点像jsp:include。5.2两种写法6. directive指令6.1 restrict6.2 template6.3 replace6.4 templateUrlPs:实测本机上的chrome加上该命令还是无法加载，chrome版本：50.0.2661.102 m6.5 transclude6.6 priority && terminal6.7 link&&compile6.7.1 使用时机6.7.2 complie解析6.7.

7、3 complie例子6.7.4 link解析6.7.5 link例子（简写）6.8 controller && controllerAs && require6.9 scope7. constant && value && run7.1constant解析7.2 value解析7.3 run解析7.4例子8.$state8.1 方法8.1.1go('page', params: 'data': null)8.1.1.1方法详解该方法是ui-router下面跳转页面的方法，和href差不多，但是他可

8、以带参数，参数获取：控制器注入$stateParams之后可以通过$stateParams.data来获取data。8.1.1.2参数详解page：需要跳转的页面；params：需要传递的参数。8.1.2 reload()$state.reload()方法只刷新路由部分，与浏览器的刷新按钮功能是不一样的。8.1.3 get()8.2属性8.2.1 current代表的当前路由信息，例：8.2.2 params8.3事件8.3.1 $stateChangeError状态改变错误8.3.2 $stateChangeStart状态开始改变8.3.3 $stateChangeSuccess状态改变成功

9、8.3.4 $stateNotFound没有找到状态Angular常用方法1. foreach2.element2.1 简要说明返回jquery对象。2.2 主要方法addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本c

10、ontents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点css() - 获取匹配元素集合中的第一个元素的样式属性的值data()-在匹配元素上存储任意相关数据detach()-从DOM中去掉所有匹配的元素empty()-从DOM中移除集合中匹配元素的所有子节点eq()-减少匹配元素的集合为指定的索引的哪一个元素find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类html()-获取集合中第一个匹配元素的HTML内容next() - 取得匹配的元素集合中每一个元

11、素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素on() - 在选定的元素上绑定一个或多个事件处理函数off() - 移除一个事件处理函数one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器prepend()-将参数内容插入到每个匹配元素的前面（元素内部）prop()-获取匹配的元素集中第一个元素的属性（property）值ready()-当DOM准备就绪时，指定一个函数来执行remove()-将匹配元素集合从DOM中删除

12、。（同时移除元素上的事件及 jQuery 数据。）removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）removeClass()-移除集合中每个匹配元素上一个，多个或全部样式removeData()-在元素上移除绑定的数据replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类triggerHandler() -为一个事件执行附加到元素的所有处理程序unbind() - 从元素上删除一个以前附加事件处理程序val()-获取匹配的元素集合中第一个元素的当前值wrap()-在每个匹配的元素外层包上一个html元素经验1. 多controller嵌套多controller嵌套时，子controller可以访问父controller的变量等，与js一致