概览：三大框架简介
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与angular.merge
（1）angular.copy(source, [destination]);是“深拷贝”。
把source的键值对（或项）克隆到destination中。destination原有的键值对会被复制或覆盖;如果source和destination类型不一致，则会抛出异常。该方法的作用是：复制一个对象或者一个数组；返回值为：复制或更新后的对象。
（2）angular.extend(destination, source);是“浅拷贝”。
把source的键值对克隆到destination中。destination原有的键值对会被复制或覆盖;该方法的作用是：复制source对象中的属性去destination对象中，支持多个source对象；返回值为：复制后的对象；如果你不想改变一个对象，你可以把destination设为空对象{}: var object = angular.extend({}, object1, object2)。返回destination对象的引用。
（3）angular.merge(destination, source);是“深拷贝”。
把source的键值对克隆到destination中。destination原有的键值对会被复制或覆盖;该方法的作用是：合并source对象中的属性去destination对象中，支持多个source对象；返回值为：合并后的对象；如果你不想改变一个对象，你可以把destination设为空对象{}: var object = angular.merge({}, object1, object2)。返回destination对象的引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular</title>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body>
</body>
</html>
<script>
var source={a:1,b:2};
var destination={a:2,b:3,c:3,d:4};
var last=angular.copy(source);
console.log(destination);
console.log(last);
/*var destination ={a:2,b:3,c:3,d:4};
var source={a:1,b:2};
var last=angular.extend(destination,source);
console.log(destination);
console.log(last);
var destination ={a:2,b:3,c:3,d:4};
var source={a:1,b:2};
var last=angular.merge(destination,source);
console.log(destination);
console.log(last);*/
</script>
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'])；<element ng-app="modulename">；如果module的名称和ng-app的属性值相同，那么该模块就是应用模块，其它模块是普通模块。
4、angular.config(function ($urlRouterProvider) { $urlRouterProvider.otherwise('/login');})在模块加载阶段，对模块进行自定义配置
5、angular.run(function ($rootScope) {})：(在模块加载完成后)是应用中最先执行的方法，只会在angular启动的时候运行一次，定义全局的数据或逻辑，对全局作用域起作用，$rootScope上内容在多个控制器之间可以共享。
6、angular.element:
（1）如果jQuery引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；angular.element("#p")；$("#p")。 所有被Angular引用的元素都是jQuery或者jqLite对象，不是原始的DOM元素了。
（2）如果jQuery没引入，则angular.element只能接受HTML字符串或者原始DOM元素为参数，选择的元素只可以调用Angular中的jqLite的函数；angular.element(document.getElementById("p")；angular.element(document.createElement("p"))。
三、指令
1、angular自定义指令详解，见《angular1中的directive》https://www.qdfuns.com/article/40901/ff3914413de19107ec095345d0d5c214.html
2、AngularJS的数据绑定：$scope上的变量发生改变时，页面会重新渲染。只有ng-model的属性值是双向绑定，其它变量均为单向绑定。双向绑定ng-model（ 绑定HTML表单元素到$scope变量中）的作用过程：以<input type="text" ng-model="name">{{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-model根据input标签的type属性值的不同，监听用户的输入事件如onchange，onkeyup，onkeydown。
3、ng-bind(数组、三元)、ng-class(数组、对象。没有三元)、ng-style(三元)与ng-src(三元双括号)用法示例
<td ng-bind="['未连接','连接'][li.status]" ></td>
<td ng-bind="interfaceState.eth0==1?'连接':'未连接'"></ td>
<td ng-class="['bg-primary','bg-danger'][li.status]"></td>
<td ng-class="{'bg-primary':li.status===1,'bg-danger':li.status===0,}"></td>
<td ng-style="interfaceState.eth0==1?{ 'color':'black'}:{'color':'red'}">连接正常</ td>;多属性写法：{'color':'red','background':'green'}
<img ng-src="{{ABC==DEF ? path1:path2}}" alt=""/>
<!DOCTYPE html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p hello></p>
<script src="./angular.js"></script>
<script>
var app = angular.module("appModule", []);
app.directive("hello", function () {
return {
restrict: "EACM",
scope:{},
templateUrl: "./2.html",
controller:function ($scope) {
$scope.colorA=$scope.colorA?$scope.colorA:"green";
$scope.colorB=$scope.colorB?$scope.colorB:"green";
}
}
});
</script>
</body>
</html>
2.html
<div>
<div ng-style="{'color':colorA}">连接正常</div>
<div ng-style="{'color':colorB='red'}">连接正常</div>
</div>
4、ng-repeat:用于遍历数组或对象，
$scope.arrayOrObject=["f","a","1",3];
$scope.arrayOrObject={a:1,b:"b",c:"3"};
（1）<tr ng-repeat="(key,value) in arrayOrObject"><td>{{key}}{{value}}</td></tr>，
用这种格式遍历数组，key是每一项的索引，value是每一项的值。
用这种格式遍历对象，key是每一项的属性名，value是每一项的属性值。
（2）<tr ng-repeat="item in arrayOrObject"><td>{{item}}</td></tr>，
用这种格式遍历数组，item是数组中的每一项；
用这种格式遍历对象，item是对象中的每一项的属性值。
5、ng-if、ng-hide、ng-show的用法
（1）ng-if 如果条件为 false时； “移除” HTML 元素。
（2）ng-show 如果条件为 false时； “隐藏” HTML 元素。
（3）ng-hide 如果条件为 true时； “隐藏” HTML 元素。
另外：<span> {{protoNum}} </span>
<img src="" ng-hide="protoNum==undefined? false:protoNum+1"/>
（1）在HTML里，undefined+1的运行结果是字符串“undefined1”，
（2）在js里，undefined+1的运行结果是数字NaN。
6、三种绑定方式的对比：如果没有$sce或$sanitize的辅助，ng-bind-html是不会生效的。
（1）ng-bind-html和注入的第三方模块ngSanitize就行了，不用注入$sanitize服务，$sanitize会自动对html标签进行净化，并会把标签的属性以及绑定在元素上的事件都移除，仅保留了标签和内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-sanitize/1.5.9/angular-sanitize.js"></script>
</head>
<body >
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
</body>
</html>
<script>
/*var app = angular.module("myApp", ['']);*/
var app = angular.module("myApp", ['ngSanitize']);
/*js代码里，注入第三方模块ngSanitize就行了，不用注入$sanitize服务，就可以在HTML里使用ng-bind-html了。*/
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1 style='color:red'>John Doe</h1>";
});
</script>
（2）ng-bind-html和内置的$sce.trustAsHtml()，它不经过净化，直接将html绑定给元素,保留所有的属性和事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtl">
<div ng-bind-html="content">
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtl',function($scope,$sce){
$scope.temporaryContent="My name is: <h1 style='color:red'>John Doe</h1>";
$scope.content = $sce.trustAsHtml($scope.temporaryContent);
});
</script>
（3）ng-bind绑定的值就作为字符串填充到元素里。
四、ng中的五种服务类型.
来源：https://blog.csdn.net/qq_33587050/article/details/52138069
1、constant服务:constant不可以修改，可以注入到config里。
（1）app.constant("name",obj)
（2）name为服务的名字,obj为一个json对象.
（3）constant创建服务返回一个json对象(也就是第二个参数中传入的对象)。
2、value服务:value可以修改，不可以注入到config里。
（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 () { this.$get= function () { return lastObj }});
（2）name为服务的名字,第二个参数是一个构造函数,其内要有$get方法,$get方法要返回对象lastObj,lastObj是真正被注入的服务。this.$get中的this不是myConfig，lastObj中的this才是myConfig。
6、装饰服务
（1）app.config(function($provide){ $provide.decorator("name",function($delegate){ return $delegate }) });
（2）同样是通过config,在参数函数中注入$provider服务,$provider服务有个decorator方法,它接受两个参数,第一个参数"name",是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例。
（3）示例：
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中的用法：
（1）在js中使用，$filter(过滤类型)(被过滤的数据,输出格式);$filter('date')(new Date(), 'yyyy-MM-dd HH:mm');
（2）在HTML中使用，<span ng-repeat="user in userlist | filter:{team:t.id}"></span>
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之冒泡
<div onclick="myFunction(event,'event')"></div>
<div ng-click="myFunction($event, myInput.value)"></div>
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对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）
附一：
<a class="btn btn-default" href="#/bookDetail/{{book.id}}">//实参
when('/bookDetail/:bookId',{});//形参
var bookId = $routeParams.bookId;//获取实参
附二：$timeout传入的function会更新作用域内的数据绑定，也就是说在function中对$scope的修改会触发更新，而window.setTimeout中对$scope的修改不会触发更新。来源：https://www.cnblogs.com/xiaxianfei/p/5729444.html
附三：$http
1、$http({})
.success(function(){//成功处理})
.error(function(){//错误处理});
2、$http({})
.then(function(){//成功处理},function(){//错误处理});
3、$http({})
.then(function(){//成功处理})
.catch(function(){//错误处理});
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10965950.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。