angular 学习

/**
* Angular
* 解耦应用逻辑，数据模型，视图
* Ajax
* 依赖注入
* 浏览历史
* 测试
* 为了表示内部和内置函数库，Angular使用预定义对象，类似于jQuery但是l两者完全没有关系，只要是遇到就可以看成是一个Angular的一个对象。
*
* ng-app 被这个标签包含的元素都属于Angular应用。
* ng-controller 被这个标签包含的DOM，都属于这个控制器。
* scopeAngularn内部数据模型对象，类似于vue中的data，可以进行数据和函数的绑定。∗scope 是一个对象，其中的属性可以被视图（view）访问，也可以同（controller）进行数据的交互。
*
**/

/**
* 模块
* 在Angular中，模块是定义应用的最主要方式，模块包含了最主要的应用代码,一个应用可以包含多个模块，每一个模块都实现了定义具体功能的代码
* 1.保持全局命名空间的清洁。
* 2.编写测试代码更加容易
* 3.容易在不同应用之间复用代码
* 4.能够按任意顺序进行加载代码
*
* 定义方式
* angular.module(‘模块名称’,[‘依赖模块列表’])
* angular.module(‘myApp’,[]); //这个方法相当于AngularJS的setter方法用来定义模块的，[]里面的依赖模块必须在当前模块加载之前进行预加载。
* 如果model只是传递一个参数，就是用来获取模块。
**/

/**
* scope (作用域)是构成Angular的核心基础
* 作用域是和应用数据模型相互关联的，同时作用域也是表达式的上下文
* scope是定义应用业务逻辑，控制器方法和视图属性的地方∗varapp=angular.module(‘myApp′,[]).controller(‘myCtrl′,function(scope) {
* scope.msg=‘Helloworld′;//视图属性∗scope.sayHello = function () {
* //控制器方法
* }
* })
*
* AngularJS将scope设计成和DOM类似的结构，因此scope可以进行嵌套，也就是说我们可 以引用父级$scope中的属性
**/

/**
* 视图和scope∗AngularJS启动并生成视图时，会将根ng−app元素同rootScope进行绑定。rootScope是所有scope对象的最上层。
* rootScope是AngularJS中最接近全局作用域的对象,在rootScope上面添加条多的业务逻辑是不好的，和javascript污染全局作用域相同。
* scope区别于传统的数据模型，他不会负责操作和处理数据，只是和视图连接的桥梁∗∗作用域有以下的基本功能:∗提供观察者以监视数据模型的变化;watch
* 可以将数据模型的变化通知给整个应用，甚至是系统外的组件; apply
* 可以进行嵌套，隔离业务功能和数据;
* 给表达式提供运算时所需的执行环境。
* */

/**
* $scope 的生命周期
*
* 创建
*
* 链接
*
* 更新
*
* 销毁
*
* */

/**
* Angular 控制器
* 控制器在AngularJS中的作用是增强视图
* AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能，设置视图属性的初始值，和自定义控制器方法
*
*
* */

/**
* 控制器嵌套(作用域包含作用域)
* Angular 应用的任何一部分，无论渲染在那个上下文，都会有父级作用域的存在，对于ng-app，顶层作用域就是 $rootScope.
* 但是：指令内部创建作用域，是鼓励作用域，除了孤立 的作用域之外，所有的作用域都是通过原型继承实现的
* */

/**
* 表达式 {{ express }}
* AngularJS会在运行digest循环的过程中自动解析表达式。（自动解析表达式）∗parse 手动解析表达式，只需传入到控制器中
* */

/**
* Angular factory和server的区别
* factory 是普通的函数，调用factory时只是调用普通的function，所以factory可以返回任何东西
* server 是一个构造器，Angular在调用server的时候会用到new关键字，而service可以不返回
* */

/**
* Angular 指令
* ng-include 可以加载编译外部的html到当前的应用中，url的模板被限制为，与当前文档所在的同源下面，可以通过白名单或包装成被信任的值来突破限制
* ng-if 完全删除或者展示当前的dom节点，当ng-if 显示的时候，使用的是上次编译后的原始状态，假设在移除之前通过jquery 添加过 class，当显示后将不存在。
* ng-repeat index：当前循环的下标从0开始，first:当元素是遍历的第一个时值为true，middle:当元素处于第一个和最后元素之间时值为true，last:当元素是遍历的最后一个时值为true， even:当index值是偶数时值为true。， odd:当index值是偶数时值为true。
* ng-cloak 在使用{{ }}赋值的时候避免闪烁
* ng-bind-template 同ng-bind指令类似，ng-bind-template用来在视图中绑定多个表达式。
* ng-model 注意：我们应该始终用ngModel来绑定scope上一个数据模型内的属性，而不是scope上的属性，这可以避免在作用域或后代作用域中发生属性覆盖。
*
* link 函数
* ng在link之前编译所有指令，然后link函数分为两个阶段，1.pre-link 2.post-link
* 注意：compile和pre-link 的执行顺序是相同的，但是post-link 相反
* */

/**
* angular 指令详解
* 除了上面的Angular 提供的指令，还可以自定义指令使用 directive
* angular.module(‘myApp’,[]).directive(‘myDirect’, function() {
* return {
* //指令的属性定义
* }
* })
* //上面指令毁掉函数里面返回的是一个对象。
* // 当返回一个函数的时候，这个函数被称为 postLink函数利用它我们 可以定义指令的链接(link)功能，但是返回函数自己的自由度就下降了
* angular 指令配置详解
* angular.moudel(‘myApp’,[]).directive(‘myDir’, function() {
* return {
* restrict: ”, //一个可选参数，配置该指令在DOM中使用什么形式展现，默认A(属性的形式) E(element) 元素的形式 C（class）类名的形式 M 注释的形式
* priority: Number,
* terminal: Boolean, // 这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令还是会执行的。
* template: [string | function(tElement, tAttrs)],
* templateUrl: [string | function(tElement, tAttrs)], //外部文件的路径，注意同源策略
* replace: Boolean, //如果设置了这个参数，值为true 意味着模板会被当作子元素插入到调用此指令的元素内部
* scope : [boolean | {}], //默认为false（即开启指令外部作用域），前提在同一个控制器之下，控制器作用域之内，指令的外面可以获取指令的scope属性，为true 相反
* }
* })
*
* 隔离作用域 scope: {}
* 隔离作用域可能是scope属性三个选项中最难理解的一个。三个分别是:true, false, {}
* 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域
* 当设置成隔离作用域之后，就可以将隔离作用域中的属性同外部世界进行绑定，同指令外部的作用域进行数据绑定
*
* 绑定策略
* 使用无数据的隔离作用域并不常见，AngularJS提供了几种方法能够将指令内部的隔离作用域，同指令，外部的作用域进行数据绑定
*
* */

/**
* Angular 生命周期
*
*
* */

/**
* Angular XHR和服务器通信
* http:通过内置的http服务同外部进行通信，http只是封装了XMLHttpRequest对象，参数传入一个配置的对象，返回的是Promise对象∗varpromise=http({
* method: GET,
* url: ”,
* })
*
* promise 返回的是Promise的对象所以可以使用 then 进行访问回调函数，
*
*
* */

/**
* Angular
* Provider 提供的 $xxxProvider 这些提供至，只可以在config中进行注入，如果在 控制器 指令 服务中 注入会产生错误
* */

/*
Angular 服务
可以使用在，控制器，指令，过滤器之中，通过依赖声明的方式使用这个服务，服务的名字可以当做参数传递给，控制器，在控制器之中就可以，调用这个对象上的方法。

创建服务的方式：
factory()
该方法是创建服务的最快捷的方式
参数1.服务的名字
参数2.传递一个参数，并且返回一个对象

因为服务是一个单利的对象，在应用周期之内只会被调用一次
service()
使用service，可以注册一个支持构造器的服务，他允许我们为服务注册一个构造器函数
参数1.服务的名字
参数2.一个constructor函数
我们调用他来实例化服务对象
service() 函数会在创建实例的时候使用new关键字来实例化服务的对象
demo
//先创建一个构造函数
var person = function() {
this.getName = function() {
return ”;
}
}
angular.server(‘personServer’, person)

provider()
所有的服务工厂都是由，provide服务创建的，prodive服务负责在运行时候初始化这些提供者。
提供者有一个$get的方法的对象

如果想在angular的config中对服务进行配置，就需要使用provider()
provider() 的第二个参数 可以是 函数 数组 对象 具体使用查看文档
constant()
可以将已经存在的变量值注册成一个服务，注意这个服务可以在config
中使用，相当于保存一个全局的常量

value()
如果服务的返回是一个常量那就可以使用一个value() 来定义一个方法
decorator()
$provide 服务提供了在服务创建的时候对其就行拦截的功能，可以对服务器进行扩展，或者用其他的内容完全取代完全替代原来的，

装饰器，不仅可以在我们的自己的服务商进行拦截，还可以对angular核心的服务进行拦截，中断，甚至替换功能，angular的测试好多都是借助，$provide.decorator()建立的。

依赖注入：
一个对象通常有三种方式，获得对其依赖的控制权
1.在内部创建依赖
2.通过全局变量的方式进行引用 value() constant()
3.需要在有的地方通过参数进行传递

依赖注入是通过第三种形式来实现的，

依赖注入会事先自动查找依赖关系，并将注入的目标告诉呗依赖的资源，这样就可以在目标需要的时候讲目标传递进去
$injetor 用来管理，依赖关系和查询实例化，并负责实例化所有的angular所有的组件（模块控制器 指令）

缓存HTTP请求，
默认情况下，$http服务不会对请求进行本地的缓存，在发送单独的请求的时候，可以通过向http请求，传入一个布尔值，{cache:true}

当http启用了缓存之后，Angualr会默认使用cacheFactory 这个服务是在启动的时候自动创建的。
可以在 config 中通过 httpProvider和cacheFactory 进行全局的配置

$http 拦截器
任何时候我们想要给全局添加全局的功能，例如身份验证，错误处理，在请求发送给服务器之前或者服务器返回的时候 进行拦截，是很好的实现手段。

1.例如身份验证，如果服务器返回了401(未授权登录失败)，
会将用户重定向到登录的页面

AngularJS通过拦截器，提供了一个全局层面的对应的响应处理途径。

拦截器是$http 服务的基础中间件，用来向应用业务流注入新的逻辑

拦截器的核心是服务工厂，通过向httpProvider.interceptors数组中添加服务工厂,通过httpProvider进行注册。

4种拦截器 两种成功拦截器，两种失败拦截器
request：请求
通过http设置对象来对请求进行拦截调用，他可以对设置对象进行修改，创建一个新的设置对象，需要返回一个更新活的对象，或者返回Promiseresponsehttp设置对象来对响应拦截器进行调用。它可以对响应进行修改，或者创建 一个新的响应，它需要返回一个更新过的响应，或者一个可以返回新响应的promise

requestError
AngularJS会在上一个请求拦截器抛出错误，或者promise被reject时调用此拦截器。
responseError
AngularJS会在上一个响应拦截器抛出错误，或者promise被reject时调用此拦截器。

使用服务factory() 创建拦截器
angular.moudel(‘myApp’,[]).
factory(”, function(q){  
    //q 是Promise 对象
var intercaptor = {
‘request’: function(config) {

        return config; //$q.when(config);    },    'response': funtion(config) {}

}
})

angular 事件
在web组件是松耦合的，及时通讯不总是不可行的，
angular 的作用域本质是分层的：他们可以通过父子关系自燃的沟通，但是作用域不是共享变量的

注意：浏览器的事件系统和angular的事件系统是不相同的，这样说明我们只能在作用域上面坚挺angular的事件而不是在dom事件上面，
*/