一、初识AngularJS:
1、Angularjs通过创建实时模板来代替视图,而不是将数据合并进模板后更新DOM,任何一个独立视图组件中的值都是动态替换的。
二、数据绑定和第一个AngularJS Web应用:
1、用法简单,只需引入Angular.js文件,并在某个DOM元素上明确设置ng-app属性即可,ng-app属性声明所包含的内容都属于这个Angularjs应用,这样我们就可以在web应用中嵌套Angularjs应用的原因,只有被具有ng-app属性的DOM元素包含的元素才会受到Angularjs影响。
三、模块:
1、AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。
angular.module('myApp', []);
2、带有属性ng-app的标签相当于一个模块,ng-app属性可以带属性值也可以不带,一个模块只允许加载一次,ng-app用来自动加载模块,bootstrap用来手动加载模块。
angular.module('appName', [])
angular.bootstrap(angular.element("#divID"), ["divID"])
四、作用域:
1、$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文。
2、$scope对象的生命周期处理有四个不同阶段。
创建:在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去
链接:当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中,这些作用域将会注册当Angular应用上下文发生变化时需要运行的函数。
更新:当时间循环运行时,它通常执行在顶层$scope对象上(被称作$rootscope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化,如果检测到任意变化,$scope对象就会触发指定的回调函数。
销毁:当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。
五、控制器:
1、AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可。
AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。
2、控制器可以嵌套,相当于继承,子控制器可以获取父控制器的属性
六、表达式:
(1)特性:1、所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。
2、如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。
3、表达式里不允许任何控制函数流程的功能(如if/else等条件语句)
4、表达式可接受一个或多个串联起来的过滤器。
(2)$parse是一个表达式解析器,返回一个函数 app.controller('myController',function($scope,$parse){});
$interpolate是一个带三个参数返回一个函数的服务 app.controller('myController',function($scope,$interpolate){});
七、过滤器:
1、过滤:currency,date,filter(字符串,对象,函数),json,limitTo,lowercase,number,orderBy,uppercase,自定义过滤器
2、表单验证:HTML5自带的表单验证使用很方便,只需给标签添加属性即可。
必填项:required
最小值:ng-minlength="5"
最大值:ng-maxlength="20"
正则:ng-pattern="[a-zA-Z]"
电子邮箱:<input type="email" name="email" ng-model="user.email" />
数字:<input type="number" name="age" ng-model="user.age" />
URL:<input type="url" name="homepage" ng-model="user.url" />
表单属性:
user.name.$dirty(输入框使用了规则为True) 脏值检测
user.name.$pristine(输入框没有使用规则为True)
user.name.$invalid(是否验证未通过)
user.submitted(是否提交)
<small class="error" ng-show="user.name.$error.minlength">错误信息</small>(进行错误判断)
1.3版本以后新增了ng-messages属性, 相对于$error属性用起来会简洁一些 ng-message="required"/ng-message="minlength"
八、指令简介:
1、自定义指令
语法: <my-directive></my-directive>
directive('myDirective',function(){})。
种类:元素(E)、属性(A)、类(C)或注释(M)
在我们的例子中使用my-directive声明指令<my-directive></my-directive>,根据驼峰命名法,指令定义必须以myDirective为名字。(hello)
2、当前作用域:每个控制器都有自己的作用域,同时控制器可以嵌套,最内层的控制器可以通过当前$scope直接访问原型中的任意属性
九、内置指令:
十、指令详解:
directive:对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。指令中我们可以返回函数也可以返回对象。当返回一个函数时,这个函数通常被称作链接传递(postLink)函数,利用它我们可以定义指令的链接(link)功能。由于返回函数而不是对象会限制定义指令时的自由度,因此只在构造简单的指令时才比较有用。
priority:ngRepeat是所有内置指令中优先级最高的,设置为1000
template:如果模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包含在一个父元素内templateUrl:默认情况下,调用指令时会在后台通过Ajax来请求HTML模板文件。有两件事情需要知道。一、在本地开发时,需要在后台运行一个本地服务器,用以从文件系统加载HTML模板,否则会导致Cross Origin Request Script(CORS)错误。二、模板加载是异步的,意味着编译和链接要暂停,等待模板加载完成。scope:如果一个元素上有多个指令使用了隔离作用域,其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。因此,对于这些对象来说scope默认被设置为true。作用域的继承机制是向下而非向上进行的。
scope:以下方式会创建新的子作用域,并且进行原型继承: ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true创建directive。
transclude:只有当你希望创建一个可以包含任意内容的指令时,才使用transclude: true。
link:指令中的controller和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,且无法在指令间复用。还有个区别:Controller(在编译前执行)而Link(在编译后执行) 子级指令的所有 link function :包括 pre 和 post 两个link都会在父级的post link之前被执行,我们通常所说的link function,其实是 post link 的快捷方式罢了。
当想要同当前屏幕上的作用域交互时,可以使用被传入到link函数中的scope参数。
directive的scope与其外层的controller的scope是同一个作用域
controllerAs:使我们可以在路由和指令中创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器,并且这个对象是隔离的、易于测试的。
require:可以被设置为字符串或数组,字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。require参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为:
?:如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数。
^:如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器。
?^:将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。
没有前缀:如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误。
conpile:编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。在作用域同DOM链接之前可以手动操作DOM
十一、AngularJS模块加载:
十二、多重视图和路由:
ng-view是由ngRoute模块提供的一个特殊指令,它的独特作用是在HTML中给$route对应的视图内容占位。它会创建自己的作用域并将模板嵌套在内部。ng-view是一个优先级为1000的终极指令。AngularJS不会运行同一个元素上的低优先级指令。ng-view不支持多层视图嵌套,可以考虑加强版的ui-view
路由:如果reloadOnSearch选项被设置为true(默认),当$location.search()发生变化时会重新加载路由。如果设置为false,那么当URL中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求非常有用。
$location 服务:path()/replace()/absUrl()/hash()/host()/port()/protocol()/search()/url()
$location服务不会重新加载整个页面,它只会单纯地改变URL。如果我们想重新加载整个页面,需要用$window服务来设置地址。$window.location.href = "/reload/page";
路由模式:标签模式和HTML5模式(显示原始路径,如果路径是#/List/Add这种标签模式,它会自动重写URL)
路由事件:$routeChangeStart/$routeChangeSuccess/$routeChangeError/$routeUpdate
十三、依赖注入:
十四、服务:
控制器只会在需要时被实例化,并且不再需要就会被销毁。这意味着每次切换路由或重新加载视图时,当前的控制器会被AngularJS清除掉。
服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性。服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化),并且是延迟加载的(需要时才会被创建)。服务提供了把与特定功能相关联的方法集中在一起的接口。
不推荐在控制器中使用$watch,这里只是为了方便演示。在实际生产中会将这个功能封装进一个指令,并在指令中设置$watch。
在自定义服务之前注入所有的AngularJS内置服务,这是约定俗成的规则。
所有创建服务的方法都构建在provider方法之上。provider()方法负责在$providerCache中注册服务。
如果希望在config()函数中可以对服务进行配置,必须用provider()来定义服务。
value()方法和constant()方法之间最主要的区别是,常量可以注入到配置函数中,而值不行。通常情况下,可以通过value()来注册服务对象或函数,用constant()来配置数据,constant定义的常量不能被装饰器拦截。
十五、同外界通信:HRX和服务器通信:
十六、XHR实践:
十七、Promise
十八、服务器通信:
十九、测试:
二十、事件:
二十一、架构:
二十二、Angular动画:
二十三、digest循环和$apply:
二十四、揭秘Angular:
二十五、AngularJS精华扩展:
二十六、移动应用:
二十七、本地化:
二十八、缓存:
二十九、安全性:
三十、AngularJS和IE浏览器
三十一、构建Angular Chrome应用
三十二、优化Angular应用
三十三、调试AngularJS
三十四、下一步