AngularJS学习笔记

1、初识AngularJS：
一、Angularjs经过建立实时模板来代替视图，而不是将数据合并进模板后更新DOM，任何一个独立视图组件中的值都是动态替换的。

2、数据绑定和第一个AngularJS Web应用：
一、用法简单，只需引入Angular.js文件，并在某个DOM元素上明确设置ng-app属性便可，ng-app属性声明所包含的内容都属于这个Angularjs应用，这样咱们就能够在web应用中嵌套Angularjs应用的缘由，只有被具备ng-app属性的DOM元素包含的元素才会受到Angularjs影响。

3、模块：
一、AngularJS容许咱们使用angular.module()方法来声明模块，这个方法可以接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是能够被注入到模块中的对象列表。
angular.module('myApp', []);
二、带有属性ng-app的标签至关于一个模块，ng-app属性能够带属性值也能够不带，一个模块只容许加载一次，ng-app用来自动加载模块，bootstrap用来手动加载模块。
angular.module('appName', [])
angular.bootstrap(angular.element("#divID"), ["divID"])

4、做用域：
一、$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文。
二、$scope对象的生命周期处理有四个不一样阶段。
建立：在建立控制器或指令时，AngularJS会用$injector建立一个新的做用域，并在这个新建的控制器或指令运行时将做用域传递进去
连接：当Angular开始运行时，全部的$scope对象都会附加或者连接到视图中。全部建立$scope对象的函数也会将自身附加到视图中，这些做用域将会注册当Angular应用上下文发生变化时须要运行的函数。
更新：当时间循环运行时，它一般执行在顶层$scope对象上(被称做$rootscope)，每一个子做用域都执行本身的脏值检测。每一个监控函数都会检查变化，若是检测到任意变化，$scope对象就会触发指定的回调函数。
销毁：当一个$scope在视图中再也不须要时，这个做用域将会清理和销毁本身。

5、控制器：
一、AngularJS中的控制器是一个函数，用来向视图的做用域中添加额外的功能。因为AngularJS会负责处理控制器的实例化过程，咱们只需编写构造函数便可。 AngularJS同其余JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操做、格式化或数据操做，以及除存储数据模型以外的状态维护操做。它只是视图和$scope之间的桥梁。

二、控制器能够嵌套，至关于继承，子控制器能够获取父控制器的属性

6、表达式：
(1)特性：一、全部表达式都在scope这个context里被执行，所以可使用全部本地 $scope 中的变量。
二、若是一个表达式的执行致使类型错误或引用错误，这些错误将不会被抛出。
三、表达式里不容许任何控制函数流程的功能（如if/else等条件语句）
四、表达式可接受一个或多个串联起来的过滤器。

(2)$parse是一个表达式解析器，返回一个函数 app.controller('myController',function($scope,$parse){});
$interpolate是一个带三个参数返回一个函数的服务 app.controller('myController',function($scope,$interpolate){});

7、过滤器：
一、过滤：currency，date，filter(字符串,对象,函数)，json，limitTo，lowercase，number，orderBy，uppercase,自定义过滤器
二、表单验证：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"

8、指令简介：
一、自定义指令
语法： <my-directive></my-directive>
directive('myDirective',function(){})。
种类：元素（E）、属性（A）、类（C）或注释（M）
在咱们的例子中使用my-directive声明指令<my-directive></my-directive>，根据驼峰命名法，指令定义必须以myDirective为名字。(hello)

二、当前做用域：每一个控制器都有本身的做用域，同时控制器能够嵌套，最内层的控制器能够经过当前$scope直接访问原型中的任意属性

9、内置指令：

10、指令详解：
directive：对于指令，能够把它简单的理解成在特定DOM元素上运行的函数，指令能够扩展这个元素的功能。指令中咱们能够返回函数也能够返回对象。当返回一个函数时，这个函数一般被称做连接传递（postLink）函数，利用它咱们能够定义指令的连接（link）功能。因为返回函数而不是对象会限制定义指令时的自由度，所以只在构造简单的指令时才比较有用。
priority：ngRepeat是全部内置指令中优先级最高的，设置为1000
template：若是模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包含在一个父元素内templateUrl：默认状况下，调用指令时会在后台经过Ajax来请求HTML模板文件。有两件事情须要知道。1、在本地开发时，须要在后台运行一个本地服务器，用以从文件系统加载HTML模板，不然会致使Cross Origin Request Script（CORS）错误。2、模板加载是异步的，意味着编译和连接要暂停，等待模板加载完成。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
11、AngularJS模块加载：

12、多重视图和路由：
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

十3、依赖注入：

十4、服务：
控制器只会在须要时被实例化，而且再也不须要就会被销毁。这意味着每次切换路由或从新加载视图时，当前的控制器会被AngularJS清除掉。
服务提供了一种能在应用的整个生命周期内保持数据的方法，它可以在控制器之间进行通讯，而且能保证数据的一致性。服务是一个单例对象，在每一个应用中只会被实例化一次（被$injector实例化），而且是延迟加载的（须要时才会被建立）。服务提供了把与特定功能相关联的方法集中在一块儿的接口。
不推荐在控制器中使用$watch，这里只是为了方便演示。在实际生产中会将这个功能封装进一个指令，并在指令中设置$watch。
在自定义服务以前注入全部的AngularJS内置服务，这是约定俗成的规则。
全部建立服务的方法都构建在provider方法之上。provider()方法负责在$providerCache中注册服务。
若是但愿在config()函数中能够对服务进行配置，必须用provider()来定义服务。
value()方法和constant()方法之间最主要的区别是，常量能够注入到配置函数中，而值不行。一般状况下，能够经过value()来注册服务对象或函数，用constant()来配置数据，constant定义的常量不能被装饰器拦截。
十5、同外界通讯：HRX和服务器通讯：

十6、XHR实践：

十7、Promise

十8、服务器通讯：

十9、测试：

二10、事件：

二11、架构：

二12、Angular动画：

二十3、digest循环和$apply：

二十4、揭秘Angular：

二十5、AngularJS精华扩展：

二十6、移动应用：

二十7、本地化：

二十8、缓存：

二十9、安全性：

三10、AngularJS和IE浏览器

三11、构建Angular Chrome应用

三12、优化Angular应用

三十3、调试AngularJS

三十4、下一步