angularJs学习笔记

1.AngularJS 应用组成如下:

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。controller与view层的交互式通过$scope(作用域)来实现的

2.AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

关于模块(module):

1.对应的是java中包的概念(或是类的概念),每个相对独立的模块都用这个命名空间规则来区分开来

2.光定义是不会执行module中的方法的,还得具体的执行。执行的方法是:1.要么显示调用module("xxx")方法;2在别人的module("",["xxx"])方法中被调用(继承);3.html代码中有ng-app="xxx"的指令

关于控制器:

1.控制器的变量属性也可以直接绑定函数(方法)

2.angular的control方法不能直接放在JQ的ready(function(){})中,因为这时传入ready方法的是个闭包函数,其中的作用域和全局的作用域隔离了,所以angular无法渲染上下文

3.jquery操作angular生成的DOM树时,无法判断是否加载完成的问题。解决办法是使用

关于作用域($scope):

1.scope是controller和view层的胶水

2.不在scope中定义的属性,视图无法更新

3.$scope与$rootScope区别,$scope是controller特有的一个参数,而$rootScope是一个全局的服务,也可以看做一个全局的作用域来使用(看API就知道它其实是个服务)

关于过滤器:

1.过滤器除了在表达式中外,还可以添加到指令中,还可以绑定模型(用户输入),实现排序和搜索功能

2.可以自定义过滤器

关于服务:

1.$http 服务:用于读取远程服务器的数据(ajax)

2.其它服务:$location、$timeout、$interval

3.可以自定义服务

关于指令:

1.尽量在属性中声明指令,避免IE中出现的兼容性问题。如果不用指令而用{{变量}}占位符的话,会出现兼容性问题

关于双向绑定:

1.双向绑定可以说是angular的一个核心,要学习双向绑定可以去研究"ngModelController",它是ng-model的控制器。学好了可以自己写双向绑定(高级)

2.有空研究下这篇文章:http://www.tuicool.com/articles/yAr6N3i

3.有时在使用外部插件的时候,由于不在angular里面,绑定会失效,这时就要使用scope.$apply方法,详见http://www.cnblogs.com/zhrj000/p/3383898.html

关于加载文件:

1.angular由于是单页面应用,首页的数据一次性加载,会有很多文件。量大了以后优化必不可少,有2个思路:一是压缩合并文件,二是使用类似requireJS这种框架来(异步)加载

常用指令:

ng-app: 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-controller :定义了控制器

ng-model: 指令把输入域的值绑定到应用程序变量 name。指令可以为应用数据提供状态值(invalid, dirty, touched, error):

ng-bind: 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-init :指令ng-init 指令为 AngularJS 应用程序定义了 初始值。(不常用)

ng-options:下拉选择框。选项是对象,可以直接在controller里调用。注意"x for (x, y) in sites"的写法,如果绑定的是一个对象(带:号的)则必须写成x for (x,y)而不是x for x。

ng-repeat :指令ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。也可以用于制作表格,表格中可以使用下面的ng-if指令

  warn:有重复字符或数字的时候会报错,对象没关系(详见http://www.111cn.net/wy/js-ajax/90324.htm)

ng-if:条件选择

DOM属性相关指令: ng-disabled、ng-show、ng-hide、ng-click

ng-include:包含其它html页面(模板)

ng-view: 指令遵循以下规则。
 每次触发 $routeChangeSuccess 事件,视图都会更新。
 如果某个模板同当前的路由相关联:
 创建一个新的作用域;
 移除上一个视图,同时上一个作用域也会被清除;
 将新的作用域同当前模板关联在一起;
 如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来;
 触发 $viewContentLoaded 事件;
 如果提供了 onload 属性,调用该属性所指定的函数。

自定义指令:略 

常用函数:

run():运行块。假设我们需要在每次路由发生变化时,都执行一个函数来验证用户的权限,放置这个功能唯一合理的地方就是 run 方法。

$interval():轮询的方法,需要配合$scope.$on('$destroy', function())方法,在离开当前页时清除轮询事件,具体使用详见API。

原文地址:https://www.cnblogs.com/xujanus/p/5557001.html