Angular.js浅谈
至今博主对于MVVM框架比较了解的就只能算有Angular了,首先给大家明确一个概念,Angular1.x才能叫Angular.js,而Angular2、4、5都直接叫Angular了,因为从2开始已经是用TypeScript开发的了,不能再称它为js框架,值得肯定的是Ng2比Ng1.x的确更强大,更加规范,开发出来的应用的性能也相对变强了些,不过Ng2的太过激进的变动使得框架使用复杂度变大,1.x的用户相当于要重新学习一种开发模式,用户流失严重。
今天呢,我不在这里做具体的功能介绍,这些没什么意思,就说一下Angular.js的优缺点吧~
优点:
首先Angular.js是前端三大框架最早出来的,这意味着它是前端这类框架创始的始祖,这个历史地位还是值得我们尊重的。
1.它创新性地做出了双向绑定的开发方式,{{}}这种写法就是Angular率先提出的,这种可以双向绑定js里面的“变量”和HTML的数据显示(这样不需要我们再去自己操作dom,就可以更新页面)
2.实现了依赖注入(依赖反转,由函数来决定要什么依赖)
缺点:
由于Angular太早出现,一些核心的代码还是过于陈旧,从而有一些Vue、React没有的Bug
1.事件、赋值、ng-repeat不能同时使用
<input type="button" ng-click="now=$index" ng-repeat="(k,v) in json" value="{{k}}">
以上会使得$scope.now无法赋值成功,这当然不是我们的问题,Vue,React,Ng2+都不会出现这种问题,要解决这个问题,我们要换一种写法:
<input type="button" ng-click="setIndex($index)" ng-repeat="(k,v) in json" value="{{k}}">
调用函数在函数内部完成赋值的工作。
2.异步数据不会自动同步
由于Angular1.x的双向绑定依然使用旧的“脏检查”,而不是新的Observation,如果我们自己写异步获取数据,或者其他库的异步获取数据(例如JQ的$.ajax({})),异步修改$scope上的数据,HTML上是无法自动更新的,我们需要在修改后,手动调用一次$scope.$apply(),当然我们可以使用Angular提供的$http,就可以不用写手动触发脏检查了。
3.$http.post的Content-Type
Angular $http.post模块默认设置的Header['Content-Type'],居然是application/json,这个是大部分服务器不认,传统的服务器认的是application/x-www-form-urlencoded
所以我们还要把默认设置自己给设置一遍:
angular.module('common',[]).config(function($httpProvider){
$httpProvider.defaults.transformRequest=function(data){
let temp = [];
for(i in data){
temp.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
}
return temp.join('&');
}
$httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
})
我们要设置好transformRequest(数据传出前的格式转换)和headers.post['Content-Type'](数据格式是哪种),设置好了之后我们之后写module的时候直接引入依赖就可以了:
angular.module('test1',['common']);
4.$http.jsonp 麻烦
let mod = angular.module('test',[]);
mod.controller('test_c',function($scope,$http,$sce){
$scope.arr=[];
$scope.keyword="";
$scope.$watch('keyword',function(){
let url = $sce.trustAsResourceUrl(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.keyword}`);
$http.jsonp(url,{jsonpCallbackParam:'cb'}).then(res=>{
$scope.arr = res.data.s;
},err=>{
alert('错了');
});
})
});
jsonp本来就是不安全的,但是感觉多此一举的需要用$sce.trustAsResourceUrl包裹一下url,才能用{jsonpCallbackParam:'cb'}配置callback的名字。
Angular.js浅谈的更多相关文章
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- js—浅谈方法和思路的重要性(首篇求大佬支持)
js-浅谈方法和思路的重要性 学了这么久的js,我从老师的,同学的代码中发现,老师写的代码比我们的要清楚的很多,基本上没有太多累赘啊,能少的没有少啊等等..... 废话不多说,下面我们来看看这个我的一 ...
- angular指令浅谈
今天在闲暇时间再次对angularjs的指令进行了初探,不探不知道一探吓一跳啊, 就一个简单的指令整整难住我了两个小时,先不说代码的逻辑是否复杂,就一些内部的一些实现让我看起来都是头疼的不行啊,不过最 ...
- salesforce lightning零基础学习(十) Aura Js 浅谈三: $A、Action、Util篇
前两篇分别介绍了Component类以及Event类,此篇将会说一下 $A , Action以及 Util. 一. Action Action类通常用于和apex后台交互,设置参数,调用后台以及对结 ...
- salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇
上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法. 1. setParam (String key , Object value):设置事件 ...
- salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇
我们在开发lightning的时候,常常会在controller.js中写 component.get('v.label'), component.set('v.label','xxValue'); ...
- node.js浅谈
相信大家对node.js也很不陌生吧,现在我来总结一下常用的吧~ 我们Web全栈工程师最多的就是用Node作为后台了,Node.js虽然可以作为后台语言,但是相对于Java那些老牌后台语言真是一点优势 ...
- JS浅谈原始值与引用值操作
值的操作分为三大类:复制,传递,比较 一:复制 原始值 let a = 10; let b = a; 注释:2018-7-30 17:33:49 1 原始类型的值都是存放在栈内存当中,所以他们的赋值操 ...
- JS 浅谈函数柯里化,不明觉厉
在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 Christopher ...
随机推荐
- 设计模式学习---UML常见关系的实现
一.UML基本构造 UML的基本构造含3种: (1) 事物(4种):结构事物,行为事物,分组事物,注释事物 (2) 关系(4种):泛化关系,实现关系,依赖关系,关联关系 (3) 图(10种):用例图, ...
- ZeroMQ使用汇总
ZeroMQ,史上最快的消息队列 —– ZMQ的学习和研究 ZeroMQ 的模式 [架构] ZeroMQ 深度探索(一) 消息队列ZeroMQ 服务端使用流程: void* m_Context; v ...
- 洛咕 P3704 [SDOI2017]数字表格
大力推式子 现根据套路枚举\(\gcd(i,j)\) \(ans=\Pi_{x=1}^nfib[x]^{\sum_{i=1}^{n/x}\sum_{j=1}^{n/x}[\gcd(i,j)=1]}\) ...
- [APIO2013]机器人[搜索、斯坦纳树]
题意 题目链接 分析 记 g(d,x,y) 表示从 (x,y) 出发,方向为 d 到达的点,这个可以通过记忆化搜索求出,注意如果转移成环(此时向这个方向走没有意义)要特判. 记 f(l,r,x,y) ...
- ElasticSearch查询 第三篇:词条查询
<ElasticSearch查询>目录导航: ElasticSearch查询 第一篇:搜索API ElasticSearch查询 第二篇:文档更新 ElasticSearch查询 第三篇: ...
- 冒泡排序算法的C++,Java和Python实现和冒泡排序算法三种语言效率的比较
冒泡排序原理: 这一篇百度经验讲得很好,我不多说了 https://jingyan.baidu.com/article/6525d4b13f920bac7d2e9484.html 他讲的是C语言,没有 ...
- Java设置PPT的扇形图,与内嵌Excel联动
/** * 设置饼图的主方法 * @param slide 图表 * @param index 图标位置 * @param data 需要设置的数据 * @param titles 关联Excel的标 ...
- 腾讯/阿里/百度 BAT人才体系的职位层级、薪酬、晋升标准
互联网圈有这么一句话:百度的技术,阿里的运营,腾讯的产品.那么代表互联网三座大山的BAT,内部人才体系有什么区别呢?今天老李就带领大家看一看~ ★ 腾讯 ★ 1. 职级 腾讯职级体系分6级,最低1 ...
- 使用kubeadm安装kubernetes高可用集群
kubeadm安装kubernetes高可用集群搭建 第一步:首先搭建etcd集群 yum install -y etcd 配置文件 /etc/etcd/etcd.confETCD_NAME=inf ...
- C语言 -- 字符串详解
字符串是一种非常重要的数据类型,但是C语言不存在显式的字符串类型,C语言中的字符串都以字符串常量的形式出现或存储在字符数组中.同时,C 语言提供了一系列库函数来对操作字符串,这些库函数都包含在头文件 ...