概览：三大框架简介
1、AngularJS 诞生于2009年，是一款优秀的前端JS框架。为Google所收购。
2、ReactJS 诞生于2013年，是一款优秀的前端JS框架。源于 Facebook 的内部项目。
3、VueJS 诞生于2014年，是一款优秀的前端JS框架。作者尤雨溪。
另外：向后台发出请求前，有两件事要做（1）提示：确认请求；（2）转圈：等待请求结果
一、angular概述
AngularJS执行流程详解https://www.cnblogs.com/xuan52rock/p/4788727.html
ng (core module) AngularJS的默认模块，包含AngularJS的所有核心组件
（1）全局函数(function) 使用方式为：angular.forEach()。
（2）指令(directive) 使用方式为：A、内建指令ng-click="" B、自建指令app.directive('selfCreate',function(){})。
（3）服务(service) 使用方式为：A、内建服务$http. B、自建服务app.service('selfCreate',function(){})。
（4）过滤器(filter) 使用方式为：{{ totalMoney() | currency:"￥"}}。
二、全局函数
1、angular.copy与angular.extend
（1）angular.copy(source, [destination]);
把前者的键值对（或项）克隆到第二个参数中，如果source和destination类型不一致，则会抛出异常。复制一个对象或者一个数组;返回复制或更新后的对象
（2）angular.extend(dst, src);
把后者的键值对克隆到第一个参数对象中，不支持递归复制;复制src对象中的属性去dst对象中，支持多个src对象;如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2)。返回dst对象的引用.
2、自定义作用域和自定义HTML的绑定
var myTemplateScope = angular.extend($rootScope.$new(), customMethodObject(里面存放仅供自定义HTML使用的方法));
angular.element('#myTemplate').append($compile(angular.element(customHtml))(myTemplateScope));
如果jQuery不可用，angular.element只能接受HTML字符串或者DOM元素为参数。
3、angular.module('app', [ '', '',''])依赖需要在本模块加载之前由注入器进行预加载;用来注册和检索模块。如果传递了二个或更多的参数时，那么就创建一个新模块。如果仅传递一个参数，那么一个现有模块被检索。angular.module('app', [ 'ui.router','common-dir'])；
三、指令
1、angular自定义指令详解
使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如： myDirective。
在html页面调用该指令时需要以 - 分割，如： my-directive。
```javascript
app.directive('myDirective', function() {
// 将对象return出去,
return{
restrict: 'E',// 指令类型 E：element A：attribute M：comment C: class
template: '
replace: true, // 模板放在
transclude: true,//是否保留自定义指令子元素中的内容（这是原本的内容），该内容插入模板中使用ng-transclude属性的地方,如上。
通过路由放入数据scope:{
title: '@'//获取自定义标签的属性值//false：继承父作用域；true：继承父作用域且创建独立作用域；{}：不继承父作用域且创建独立作用域。scope:{name:'@name'，绑定字符串 name:'=name'，绑定变量 name:'&name'，绑定函数}。传进来的变量，在值改变后，父作用域的该变量的值也随之改变。
},
require: "parent",//本指令所依赖的父元素,
controller: function ($scope){//指令的控制器和link函数可以进行互换。控制器主要是用来（1）提供可在指令间复用的行为，暴露此指令的一些方法给其他指令使用（2）导入自定义服务。链接函数只能在当前指令内部定义行为，无法在指令间复用。link函数可以将指令互相隔离开来，而controller则定义可复用的行为。
$scope.focusAAA = function () {}
},
compile: function(element, attributes) {
//compile和link是相斥的。如果同时设置了两项，compile返回的函数会被当作链接函数把后面定义的link函数所取代，也就是说，后面的link函数将起不到作用。
}
link:function(scope,element,attr,parentCtrl,linker){//link函数主要用于操作dom元素,给dom元素绑定事件和监听。
element.on('click',function (){});// element=>myDirective
//scope:指令所在的作用域。
//element：指令元素的封装，可以调用angular封装的简装jq方法和属性
//attr：指令元素的属性的集合
//parentCtrl：指向父元素定义的controller
//linker:用于transClude里面嵌入的内容
}
}
});
```
2、AngularJS的数据绑定：只有ng-model是双向绑定，其它均为单向绑定。双向绑定ng-model（ 绑定HTML表单元素到$scope变量中）的作用过程：以{{name}}为例：
（1）如果input所在的作用域内已经声明name并给name赋值了，那么ng-model会把该值获取到，并在input里输出。同时{{name}}也会把该值取到页面上。当input里面的值改变时，ng-model会把作用域内的name值进行修改，同时{{name}}也会用修改后的name值覆盖原来页面上的name值。
（2）如果input所在的作用域内没有声明name，那么ng-model会在作用域内声明一个name。当input里面输入值后，ng-model会对作用域内的name进行赋值，同时{{name}}也会在页面上输出。
3、ng-bind(数组、三元)、ng-class(数组、对象。没有三元)、ng-style(三元)与ng-src(三元双括号)用法示例
引号内部，只有字符串加引号；变量、中括号、大括号不加引号。
4、ng-repeat:用于遍历数组或对象，
$scope.arrayOrObject=["f","a","1",3];
$scope.arrayOrObject={a:1,b:"b",c:"3"};
（1）
用这种格式遍历数组，key是每一项的索引，value是每一项的值。
用这种格式遍历对象，key是每一项的属性名，value是每一项的属性值。
（2）
用这种格式遍历数组，item是数组中的每一项；
用这种格式遍历对象，item是对象中的每一项的属性值。
5、ng-if、ng-hide、ng-show的用法
（1）ng-if 如果条件为 false时； 移除 HTML 元素。
（2）ng-hide 隐藏或显示 HTML 元素；ng-hide 指令在表达式为 true 时隐藏 HTML 元素。设置元素的 display 为 none。下面，数据的有无与图片的隐现关联
```html
{{protoNum}}
```
注意：在HTML里，undefined+1的运行结果是字符串“undefined1”，在js里，undefined+1的运行结果是数字NaN。aaaa==undefined或typeof aaaa=="undefined"。
（3）ng-show 显示或隐藏 HTML 元素；ng-show 指令在表达式为 true 时显示 HTML 元素。
6、三种绑定方式的对比：如果没有$sce或$sanitize的辅助，ng-bind-html是不会生效的。
（1）ng-bind-html和注入的第三方模块ngSanitize就行了，不用注入$sanitize服务，$sanitize会自动对html标签进行净化，并会把标签的属性以及绑定在元素上的事件都移除，仅保留了标签和内容。
```html:run
```
（2）ng-bind-html和内置的$sce.trustAsHtml()，它不经过净化，直接将html绑定给元素,保留所有的属性和事件。
```html:run
```
（3）ng-bind绑定的值就作为字符串填充到元素里。
四、ng中的五种服务类型.
来源：https://blog.csdn.net/qq_33587050/article/details/52138069
1、constant服务:
（1）app.constant("name",obj)
（2）name为服务的名字,obj为一个json对象.
（3）constant创建服务返回一个json对象(也就是第二个参数中传入的对象)。
2、value服务:
（1）app.value("name",obj)
（2）name为服务的名字,obj为一个json对象.
（3）value创建服务返回一个json对象(也就是第二个参数中传入的对象)。
3、service服务
（1）app.service("name",constructor)
（2）name为服务的名字,第二个参数是一个构造函数.
4、factory服务
（1）app.factory("name",function(){return obj})
（2）name为服务的名字,第二个参数是一个普通函数,函数返回对象obj,obj是实际被注入的服务.
5、provider服务
（1）App.provider("myConfig",function(){ return { $get:function(){ return lastObj } } });
（2）name为服务的名字,第二个参数是一个普通函数,函数返回对象obj,obj里要有$get方法,$get方法要返回对象lastObj,lastObj是真正被注入的服务.
6、装饰服务
（1）app.config(function($provide){ $provide.decorator("name",function($delegate){ return $delegate }) });
（2）同样是通过config,在参数函数中注入$provider服务,$provider服务有个decorator方法,它接受两个参数,第一个参数"name",是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例。
（3）示例：
```javascript
app.config(function ($provide) {//通过config,在参数函数中注入$provider服务
$provide.decorator('name',function ($delegate) {//$provider服务有个decorator方法,它接受两个参数,
var fn = $delegate; //先保存以前的$delegate
$delegate = function () {//在外面套一层函数
var list = Array.from(arguments);
list[1] = list[1]+2000;
fn.apply(null,list);
};
return $delegate;//在函数中返回$delegate;
})
});
```
7、执行的先后顺序：provider>config>run
（1）config 配置模块。在提供者注册和配置阶段执行。只能注入提供者和常量配置块。在config阶段，注入 provider 的时候需要加上 provider 后缀，可以调用非 $get方法。
（2）run 运行模块。执行后创建了发射器和用于启动应用程序。只能注入运行实例和常量。返回的方法在 run 阶段注入的时候，无需加 provider 后缀，只能调用 $get 返回的方法。
（1）定义服务calc
app.provider('calc',function () {this.currency = '&';console.log(1);});
（2）配置服务calc
app.config(function (calcProvider) { calcProvider.currency = '钱';console.log(2);});
（3）运行服务calc
app.run(function (calc) { console.log(3);});
五、过滤
1.在html中的用法：{{过滤前(表达式)|过滤类型(无引号):过滤条件(有引号)};有email属性, 值不为admin;tr ng-repeat="user in users | filter: {email:'!admin'}" ;
2.在javascript中的用法：$filter(过滤类型(有引号))(过滤前(表达式),过滤条件(有引号));$filter('date')(new Date(), 'yyyy-MM-dd HH:mm');
3.过滤类型有：filter、currency、number、date、json、lowercase、uppercase、limitTo、orderBy;
4.filter:用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。
$scope.childrenArray = [{name:'kimi',age:3},{name:'cindy',age:4},{name:'anglar',age:4},{name:'shitou',age:6},{name:'tiantian',age:5}];
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数，指定返回age>4的
附、其它
1、angular1之冒泡
abc.onclick=function(event){//这里的event是事件参数,一般情况下这里是没有参数的}
2、在Controller中监听$destory事件，这个事件会在页面发生跳转的时候触发。
3、angular父、子作用域间的传值：
（1）angular父作用域向子作用域传值：作用域是一个对象，在父作用域定义一个属性(也可以是函数)，将这个属性通过属性传参的方式传给子作用域。在子作用域里，接受并使用这个属性，实现父作用域向子作用域传值！
（2）angular子作用域向父作用域传值：作用域是一个对象，在父作用域定义一个函数，在这个函数的函数体里，将这个函数的参数赋值给父作用域的一个属性；然后通过属性传参的方式把这个函数传给子作用域。在子作用域里，给这个函数传参并执行，实现子作用域向父作用域传值！在angular1.0分页组件里有此应用：A、分页组件向后台发送请求并获取数据；B、向上面的页面传递数据，供其渲染和执行勾选函数。
4、模板不必通过ng-app关联到HTML的标签上，也不必通过angular.bootstrap()关联到HTML的标签上!
5、angular自定义元素的流程：在HTML页中，使用自定义标签并进行属性传值==>在JS文件中定义该自定义元素，通过template定义自定义元素的模板或通过templateUrl导入自定义元素的模板，通过本文件的scope将属性传进来的值再传给模板；
6、that.template_scope = $rootScope.$new();//创建一个新的子作用域。
7、通过$compile服务可以编译html字符串或dom对象或jqLite对象，然后得到一个编译函数，再传入$scope，就会在当前作用域进行编译，返回编译好的jqLite对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）
注：以下自用，可能会删除
```javascript
//以下来自login.js
account_m.login({
role: res.role,
username: res.username
});
//以下来自account.js
account_m.login = function (obj) {
app_data.root('user_info', obj);
local_m.set('g_user_info', obj);
config_menu.menu = config_menu.role[obj.role];
$state.go(config_menu.index[obj.role]);
};
//以下来自change.js
app_data.root = function (name, value) {
if (value) {
if (value === 'null') {
$rootScope['r_g_' + name] = null;
} else {
$rootScope['r_g_' + name] = value;
}
} else {
return $rootScope['r_g_' + name];
}
};
//以下来自local.js
local_m.set = function (key_, data) {
var that = this;
var key = (that.uncompileStr(key_));
sessionStorage.setItem(key, that.compileStr(angular.toJson(data)));
};
//以下来自a-config.js
config_menu = {
menu: null, // 当前菜单
role: {
test: test_menu,
1: auditor_menu,
10: operator_menu,
100: admin_menu
},
index: {
1: 'record-my',
10: 'system-watch',
100: 'user-current'
}
};
```