❶ 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中將復雜性 封裝地更好一些,讓暴露出來的概念和開發介面更簡單。