angular十大常見問題
AngularJS可以視為是一種數(shù)據(jù)優(yōu)先的框架,在它的三個(gè)層面中,數(shù)據(jù)模型是骨架,視圖模型和業(yè)務(wù)事件是血肉,視圖模板和指令是皮毛,這三層合在一起,就形成了一個(gè)活生生的Web應(yīng)用。
1.ng-if的情況下 ,始終將頁面中的元素綁定到對象的屬性(data.x)而不是直接綁定到基本變量(x)上。因?yàn)閚g-if 會(隱式地)產(chǎn)生新作用域。
2.ng-repeat迭代數(shù)組的時(shí)候,如果數(shù)組中有相同值,會有什么問題,如何解決? 加 track by $index 可解決。也可以 trace by 任何一個(gè)普通的值
3.ng-click 中寫的表達(dá)式,能使用 JS 原生對象上的方法嗎?不能用,只要是在頁面中,都不能直接調(diào)用原生的 JS 方法。因?yàn)檫@些并不存在于與頁面對應(yīng)的 Controller 的 $scope 中。
<p>{{13.14 | parseIntFilter}}</p> app.filter('parseIntFilter', function(){ return function(item){ return parseInt(item); } })
4.{{now | 'yyyy-MM-dd'}} 這種表達(dá)式里面,豎線和后面的參數(shù)通過什么方式可以自定義?
ng 內(nèi)置的 filter 有九種:
date(日期)
currency(貨幣)
limitTo(限制數(shù)組或字符串長度)
orderBy(排序)
lowercase(小寫)
uppercase(大寫)
number(格式化數(shù)字,加上千位分隔符,并接收參數(shù)限定小數(shù)點(diǎn)位數(shù))
filter(處理一個(gè)數(shù)組,過濾出含有某個(gè)子串的元素)
json(格式化 json 對象)
5.filter 有兩種使用方法,一種是直接在頁面里:
<p>{{now | date : 'yyyy-MM-dd'}}</p>
另一種是在 js 里面用:
// $filter('過濾器名稱')(需要過濾的對象, 參數(shù)1, 參數(shù)2,...) $filter('date')(now, 'yyyy-MM-dd hh:mm:ss');
自定義 filter
// 形式 app.filter('過濾器名稱',function(){ return function(需要過濾的對象,過濾器參數(shù)1,過濾器參數(shù)2,...){ //...做一些事情 return 處理后的對象; } }); // 栗子 app.filter('timesFilter', function(){ return function(item, times){ var result = ''; for(var i = 0; i < times; i++){ result += item; } return result; } })
6.factory、service 和 provider 是什么關(guān)系?
factory返回的是一個(gè)對象,而service返回的是一個(gè)實(shí)例化對象,綁定到 this 的都可以被訪問。provider 是加強(qiáng)版 factory,返回一個(gè)可配置的 factory
7.性能問題
作為 MVVM 框架,因?yàn)閷?shí)現(xiàn)了數(shù)據(jù)的雙向綁定,對于大數(shù)組、復(fù)雜對象會存在性能問題。
可以用來 優(yōu)化 Angular 應(yīng)用的性能 的辦法:
減少監(jiān)控項(xiàng)(比如對不會變化的數(shù)據(jù)采用單向綁定)
主動設(shè)置索引(指定 track by,簡單類型默認(rèn)用自身當(dāng)索引,對象默認(rèn)使用 $$hashKey,比如改為 track by item.id)
降低渲染數(shù)據(jù)量(比如分頁,或者每次取一小部分?jǐn)?shù)據(jù),根據(jù)需要再取)
數(shù)據(jù)扁平化(比如對于樹狀結(jié)構(gòu),使用扁平化結(jié)構(gòu),構(gòu)建一個(gè) map 和樹狀數(shù)據(jù),對樹操作時(shí),由于跟扁平數(shù)據(jù)同一引用,樹狀數(shù)據(jù)變更會同步到原始的扁平數(shù)據(jù))
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- 解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺接收不到參數(shù)值問題的方法
- AngularJs解決跨域問題案例詳解(簡單方法)
- 總結(jié)十個(gè)Angular.js由淺入深的面試問題
- 解決angular的post請求后SpringMVC后臺接收不到參數(shù)值問題的方法
- angularjs在ng-repeat中使用ng-model遇到的問題
- AngularJS頁面訪問時(shí)出現(xiàn)頁面閃爍問題的解決
- AngularJS上拉加載問題解決方法
- 給angular加上動畫效遇到的問題總結(jié)
- Angular 頁面跳轉(zhuǎn)時(shí)傳參問題
- AngularJS模塊管理問題的非常規(guī)處理方法
相關(guān)文章
AngularJS實(shí)現(xiàn)的省市二級聯(lián)動功能示例【可對選項(xiàng)實(shí)現(xiàn)增刪】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的省市二級聯(lián)動功能,涉及事件監(jiān)聽、響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,此外還具備對選項(xiàng)進(jìn)行增刪的功能,需要的朋友可以參考下2017-10-10AngularJS 與百度地圖的結(jié)合實(shí)例
這篇文章主要介紹了AngularJS 與百度地圖的結(jié)合實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10淺談關(guān)于angularJs中使用$.ajax的注意點(diǎn)
本篇文章主要介紹了關(guān)于angularJs中使用$.ajax的注意點(diǎn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08