❶ angularjs路由如何禁止缓存
angular默认的模板加载都会被缓存起来,使用的缓存服务是$tempalteCache,发送模板请求的服务是$templateRequest,可以有两种方案:
1.每次发送$http请求模板完成后,调用$tempalteCache.remove(url)或removeAll清除所有模板缓存;
2.使用$provide.decorator改写原生的$templateRequest,禁掉缓存,$templateRequest的源码,可以看到它默认使用$tempalteCache作为缓存,可以去掉它。
❷ 怎么清楚angular的js文件缓存
1如果用AngularJs在IE下发出GET请求从后台服务取完Json数据再绑定到页面上显示的话,你可能会发现就算数据更新了,IE还是会显示原来的结果。实际上这时候IE的确是缓存了hashtag,没有再次去做Http GET请求最新的数据。
2最直接的办法是在后台撸掉OutputCache,但这种做法并不推荐,需要改每一处被Angular调用的地方,代价太大。这种问题应该在前端解决最好。研究了一会儿总结了最有效的解决方法,并不需要改后台代码了。
❸ angularjs 页面刷新后 http缓存还在吗
.state('test', {
url: '/test',
cache:'false',
templateUrl: 'templates/test.html',
controller: 'testCtrl'
})
❹ 如何解决angular 前后端分离后,网站升级造成的缓存问题
把下面的代码加上试试
var app = angular.mole('phonecat', ['ngRoute']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}
]);
❺ vue,angular,avalon这三种MVVM框架之间有什么优缺点
Vue.js
优点:
简单:官文档清晰比 Angular 简单易
快速:异步批处理式更新 DOM
组合:用解耦、复用组件组合应用程序
紧凑:~18kb min+gzip且依赖
强:表达式 & 需声明依赖推导属性 (computed properties)
模块友:通 NPM、Bower 或 Duo 安装强迫所代码都遵循 Angular 各种规定使用场景更加灵
缺点:
新:Vue.js新项目20143月20发布0.10.0 Release Candidate版本目前github面新0.11.4版本没angular熟
影响度:google关于Vue.js性或者说丰富性少于其些名库
支持IE8:哈哈AngularJS 1.3抛弃IE8支持avalon支持IE6+应该努力优化点于些需要支持IE8项目web前端发趋势像IE低版本应该退历史舞台通改变我前端思维顺应些使用版本升级
AngularJS
优点:
态视图:前没想js扩展HTML属性AngularJs做替我静态HTML加扩展性功能种让HTML由死变觉
完善:比较完善前端MVW框架包含模板数据双向绑定路由模块化服务依赖注入等所功能模板功能强丰富并且声明式自带丰富 Angular 指令
Google维护:AngularJSGoogle维护疑强台于推广维护明显比Vue.jsavalon优势社区非泼能够促进发展
AngularJS & Ionic:Ionic: Advanced HTML5 Hybrid Mobile App Framework俩基友Ionic通用AngularJS创建框架适合发丰富强应用程序
缺点:
全:习起难度于我讲习曲线曲折比较难理解些
推翻重写:前段候逛社区发现AngularJS2.0前推翻重写两框架改变基本两框架等于说等2.0需要始支持IE8貌似2.0变支持移端等再看吧
Avalon.js
优点
使用简单HTML添加绑定JS用avalon.define定义ViewModel再调用avalon.scan能
兼容 IE6 (其MVVM框架KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )另avalon.mobile更高效运行于IE10等新版本浏览器
没任何依赖5000行压缩50KiB
支持管道符风格滤函数便格式化输
局部刷新颗粒度已细化文本节点特性节点
要操作节点第扫描与视图刷新函数相绑定并缓存起没选择器场余
让DOM操作代码近乎绝迹
使用类似CSS重叠覆盖机制让各ViewModel区交替渲染页面
节点移除智能卸载应视图刷新函数节约内存
操作数据即操作DOMViewModel操作都同步View与Model
自带AMD模块加载器省与其加载器进行整合
缺点
1数组滤没angular面avalon滤器能用于ms-text, ms-html
2没英文文档宣传受限制(许误我博客园入门教程官网)
3OniUI皮肤够看许说要配合boostrap社区没主站做事
❻ angular-file-upload后台接受的什么参数
angular在通过异步提交数据时使用了与jquery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据。
原理分析(网上的分析):
<span style="font-size:14px;">对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码,最后处理服务端的响应。整个过程示例如下:</span>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
}else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码
//优雅地处理错误
}
};
//建立连接
xmlhttp.open("GET", "http://myserver/api", true);
//发起请求
xmlhttp.send();
对于简单、常用而且会经常重复的任务来说,这是一种很烦琐的工作。如果你想复用以上过程,你应该进行封装或者使用代码库。
AngularJS XHR API遵守一种通常被称为Promise的接口。由于XHR是异步调用的方法,所以服务端的响应会在未来某个不确定的时间点上返回(我们希望它立即能返回)。Promise接口规定了处理这种响应的方式,并且允许Promise的使用者以一种可预见的方式来使用它。
例如,我们要从服务端获取一个用户的信息,假设用来接受请求的后台接口位于/api/user路径上,此接口可以接受一个id属性作为URL参数,那么使用Angular的核心$http服务发起XHR请求的方法示例如下:
$http.get('api/user', {params: {id:'5'}
}).success(function(data, status, headers, config) {
//加载成功之后做一些事
}).error(function(data, status, headers, config) {
//处理错误
});
如果你是jQuery使用者,你应该会发现,AngularJS和jQuery在对异步请求的处理方面非常类似。
上面例子中使用的$http.get方法是AngularJS的核心服务$http所提供的众多快捷方法之一。类似地,如果你想使用AngularJS向同一个URL发送POST请求,同时带上一些POST数据,你可以像下面这样做:
var postData = {text:'long blob of text'};
//下面这一行会被当成参数附加到URL后面,所以post请求最终会变成/api/user?id=5
var config = {params: {id: '5'}};
$http.post('api/user', postData, config
).success(function(data, status, headers, config) {
//成功之后做一些事情
}).error(function(data, status, headers, config) {
//处理错误
});
对于大多数常用的请求类型,都有类似的快捷方法,这些请求类型包括:GET、HEAD、POST、DELETE、PUT、JSONP。
一.进一步配置请求
虽然标准的请求方式使用起来比较简单,但是,有时候会存在可配置性不佳的缺点。如果你想要实现下面这些事情就会遇到困难:
a.给请求加上一些授权头。
b.修改对缓存的处理方式。
c.用一些特殊的方式来变换发送出去的请求,或者变换接收到的响应。
在这些情况下,你可以给请求传递一个可选的配置对象,从而对请求进行深度配置。在前面的例子中,我们使用config对象指定了一个可选的URL参数。但是那里的GET和POST方法是一些快捷方式。这种深度简化之后的方法调用示例如下:
$http(config)
下面是一个基本的伪代码模板,用来调用前面的这个方法:
$http({
method: string,
url: string,
params: object,
data: string or object,
headers: object,
transformRequest: function transform(data, headersGetter) or an array of functions,
transformResponse: function transform(data, headersGetter) or an array of functions,
cache: boolean or Cache object,
timeout: number,
withCredentials: boolean
});
GET、POST及其他快捷方法都会自动设置method参数,所以不需要手动设置。config对象会作为最后一个参数传递给$http.get和$http.post,所以,在所有的快捷方法内部都可以使用这个参数。你可以传递config对象来修改发送的请求,config对象可以设置以下键值。
method:一个字符串,表示HTTP请求的类型,例如GET或者POST。
url:URL字符串,表示请求的绝对或者相对资源路径。
params:一个键和值都是字符串的对象(确切来说是一个map),表示需要转换成URL参数的键和值。例如:
[{key1: 'value1', key2: 'value2'}]
将会被转换成
?key1=value&key2=value2
并会被附加到URL后面。如果我们使用js对象(而不是字符串或者数值)作为map中的值,那么这个js对象会被转换成JSON字符串。
data:一个字符串或者对象,它会被当作请求数据发送。
timeout:在请求超时之前需要等待的毫秒数。
二.设置HTTP头
AngularJS带有一些默认的请求头,Angular发出的所有请求上都会带有这些默认的请求头信息。默认请求头包括以下两个:
1.Accept:appliction/json,text/pain,/
2.X-Requested-With: XMLHttpRequest
如果想设置特殊的请求头,可以用如下两种方法实现。
第一种方法,如果你想把请求头设置到每一个发送出去的请求上,那么你可以把需要使用的特殊请求头设置成AngularJS的默认值。这些值可以通过$httpProvider.defaults.headers配置对象来设置,通常会在应用的配置部分来做这件事情。所以,如果你想对所有的GET请求使用“DO NOT TRACK"头,同时对所有请求删除Requested-With头,可以简单地操作如下:
angular.mole('MyApp', []).
config(function($httpProvider) {
//删除AngularJS默认的X-Request-With头
delete $httpProvider.default.headers.common['X-Requested-With'];
//为所有GET请求设置DO NOT TRACK
$httpProvider.default.headers.get['DNT'] = '1';
});
如果你只想对某些特定的请求设置请求头,但不把它们作为默认值,那么你可以把头信息作为配置对象的一部分传递给$http服务。同样的,自定义头信息也可以作为第二个参数的一部分传递给GET请求,第二个参数还可以同时接受URL参数。
$http.get('api/user', {
//设置Authorization(授权)头。在真实的应用中,你需要到一个服务里面去获取auth令牌
headers: {'Authorization': 'Basic Qzsda231231'},
params: {id:5}
}).success(function() {//处理成功的情况 });
三.缓存响应
对于HTTP GET请求,AngularJS提供了一个开箱即用的简单缓存机制。默认情况下它对所有请求类型都不可用,为了启用缓存,你需要做一些配置:
$http.get('http://server/myapi', {
cache: true
}).success(function() {//处理成功的情况});
这样就可以启用缓存,然后AngularJS将会缓存来自服务器的响应。下一次向同一个URL发送请求的时候,AngularJS将会返回缓存中的响应内容。缓存也是智能的,所以即使你向同一个URL发送多次模拟的请求,缓存也只会向服务器发送一个请求,而且在收到服务端的响应之后,响应的内容会被分发给所有请求。
但是,这样做有些不太实用,因为用户会先看到缓存的旧结果,然后看到新的结果突然出现。例如,当用户即将点击一条数据时,它可能会突然发生变化。
注意,从本质上来说,响应(即使是从缓存中读取的)依然是异步的。换句话说,在第一次发出请求的时候,你应该使用处理异步请求的方式来编码。
四.转换请求和响应
对于所有通过$http服务发出的请求和收到的响应来说,AngularJS都会进行一些基本的转换,包括如下内容。
1.转换请求
如果请求的配置对象属性中包含JS对象,那么就把这个对象序列化成JSON格式。
2.转换响应
如果检测到了XSRF(Cross Site Request Forgery的缩写,意为跨站请求伪造,这是跨站脚本攻击的一种方式)前缀,则直接丢弃。如果检测到了JSON响应,则使用JSON解析器对它进行反序列化。
如果你不需要其中的某些转换,或者想自已进行转换,可以在配置项里面传入自已的函数。这些函数会获取HTTP的request/response体以及协议头信息,然后输出序列化、修改之后的版本。可以使用transformLRequest和transformResponse作为key来配置这些转换函数,而这两个函数在模块的config函数中是用$httpProvider服务来配置的。
我们什么时候需要使用这些东西呢?假设我们有一个服务,它更适合用jQuery的方式来操作。POST数据使用key1=val1&key2=val2(也就是字符串)形式来代替{key1:val1, key2:val2}JSON格式。我们可以在每个请求中来进行这种转换,也可以添加一个独立transformRequest调用,对于当前这个例子来说,我们打算添加一个通用的transformRequest,这样所有发出的请求都会进行这种从JSON到字符串的转换。下面就是实现方式:
var mole = angular.mole('myApp');
mole.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(data) {
//使用jQuery的param方法把JSON数据转换成字符串形式
return $.param(data);
};
});
实列配置:
在使用中发现后台程序还是无法解析angular提交的数据,对比后发现头部缺少‘X-Requested-With’项
所以在配置中加入:$httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'
下面贴入测试时的部分配置代码:
angular.mole('app', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
],function ($httpProvider) {
// 头部配置
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';
$httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
/**
* 重写angular的param方法,使angular使用jquery一样的数据序列化方式 The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
for (name in obj) {
value = obj[name];
if (value instanceof Array) {
for (i = 0; i < value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value instanceof Object) {
for (subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}
return query.length ? query.substr(0, query.length - 1) : query;
};
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function (data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}];
}).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
❼ angularjs的缓存利用什么实现的
以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在末尾将引出这种做法。
首先自定义一个directive,用来点击按钮改变一个scope变量值。
angular
.mole('app',[])
.directive('updater', function(){
reutrn {
scope: {
user: '='
},
template: '<button>Change User.data to whaaaat?</button>',
link: function(scope, element, attrs){
element.on('click', function(){
scope.user.data = 'whaaaat?';
scope.$apply();
})
}
}
❽ angularjs怎么清楚页面缓存
你好,可以使用应用宝清除缓存,
点击内存清理功能会自动扫描系统垃圾以及软件缓存,
扫描之后点击一键清理就可以清理掉这些垃圾和缓存。
❾ angularjs怎么清除缓存数据
如果用AngularJs在IE下发出GET请求从后台服务取完Json数据再绑定到页面上显示的话,你可能会发现就算数据更新了,IE还是会显示原来的结果。实际上这时候IE的确是缓存了hashtag,没有再次去做Http GET请求最新的数据。
最直接的办法是在后台撸掉OutputCache,但这种做法并不推荐,需要改每一处被Angular调用的地方,代价太大。这种问题应该在前端解决最好。研究了一会儿总结了最有效的解决方法,并不需要改后台代码了。
❿ 判断是angular 1还是2
AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。
1.从移动app开发上面分析:
Angular 1.x 专注于web开发,没有涉及到移动这方面的内容,还好后来杀出个程咬金IONIC移动app开发框架,让angularjs1.x很好的支持了移动开发
Angular 2目标:原生移动支持 – iOS 和 Android
Angular 2 会有两层,应用层和渲染层。例如一个组件可以用不同的 @View 修饰器修饰,根据运行环境可以在运行时生效。
与 React Native 一样,Angular 2 支持:
一次学习,到处书写。
这意味着创建原生应用时可以重用你在创建 web 应用时学习的知识。尽管总是有些区别。
2.从服务器端渲染提供支持分析:
支持服务器端的渲染对于搜索引擎的优化和用户感知体验来说是非常重要的;在一个比较大型的Angular 1 的应用中,即使使用了预先定义的缓存模块,我们可以清楚地看到当应用开始启动时,页面的加载过程。
这时候看来 Angualr2 的这部分特征不是很清晰明朗,但是这种思路或许可以从以下几个方面得到体现:
启动开始, 同时所有的组件都被绑定
而渲染没有实现
一个页面在服务器被渲染后 , 然后发送到客户端
Angular 将会把它解析 ,接着会吧解析后的页面注入到 DOM 中,这样就避免了出现闪烁的效果
3.从依赖注入分析
在Angular 1 的世界里,依赖注入在构建多模块应用时是一项技术的飞跃, 但是在一些极端的案例中,如果不做出一些重要的变化是不能解决这些问题的。
Angular 1.x 包含对象全局池
Angular 1 其中一个 DI 案例中每个应用仅有一个对象全局池。这就意味着,如果说主路由 loadsbackendService 我们导向了路由 B,可以延迟加载其他服务指定到这个路由。
问题就是,我们说可以延迟加载一个 secondbackendService,使用完全不同的实现:这就会重写第一个!当前还没有办法同一名字有两个不同实现的两个服务,这就会阻止用一个安全的方式从 Angular 1 实现延迟加载。
Angular 1 会静默重写模块,当他们有相同的名字
这是一个特性,允许在测试的时候模拟替换服务层的服务,但是如果恰巧在同一模块加载了两次就会发生问题。
Angular 1.x 的多重依赖注入机制
在 Angular 1 中, 我们可以使用在多重地方使用不同的方法进行注入:
在链接方法中通过位置注入
在直接定义中通过名字注入
在controller方法中通过名字,等等。
Angular 2 将会作出怎样的该进
而在 Angular 2 中有且仅有一种依赖注入机制: 在构造函数中通过类型注入。
constructor(keyUtils: KeyboardUtils) {
this.keyUtils = keyUtils;
}
});
事实上,如果只有一种机制,那么它将变得更加容易学习。同时这种依赖注入器是类似层级结构,在不同层次的组件树,有可能实现对相同类型的不同实现。
如果一个组件没有定义依赖,它会代理给上层注入器查找依赖,依次往上。这让 Angular 2 提供原生的懒加载成为可能
4.从主要目标分析
Angular 2 的主要目标是创建一个简单易用并且快速工作的 web 框架。让我们看看这是如何达到的:
目标:更易于推论
在当前版本的 Angular 中,我们有时不得已对应特定的使用场景推论框架内部构建,比如必须推论应用事件初始化和摘要循环:
在 Angular 1 中没有摘要循环结束事件 (查看原因),因为这种事件可能会促发更多的变化,以至于使摘要循环持续下去
我们必须推论何时调用 $scope.apply 或 $cope.digest,而这并不总是容易的
有时我们必须调用 $timeoutto让Angular 结束摘要循环,当 DOM 稳定时再做一些操作
为了使 Angular 2 更易于推论,一个目标是创建更多开箱即用的透明内部构建。开始之前,让我们看看 Angular 1 的绑定机制是如何实现的,然后如何使它更透明。
话说:Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2?
1.性能的限制
AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制(比如绑定和模板机制),性能的 提升已经非常困难了。
2.快速变化的WEB
在语言方面,ECMAScript6的标准已经完成,这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性,而这些特性将显着地改变JavaScript的开发体验。
在开发模式方面,Web组件也将很快实现。然而现有的框架,包括Angular1.x对WEB组件的支持都不够好。
3.移动化
想想5年前......现在的计算模式已经发生了显着地变化,到处都是手机和平板。Angular1.x没有针对移动 应用特别优化,并且缺少一些关键的特性,比如:缓存预编译的视图、触控支持等。
4.简单易用
说实话,Angular1.x太复杂了,学习曲线太陡峭了,这让人望而生畏。Angular团队希望在Angular2中将复杂性 封装地更好一些,让暴露出来的概念和开发接口更简单。