本篇文章給大家分享的是有關不可錯過的Angular應用技巧有哪些,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設公司,專注網(wǎng)站建設、網(wǎng)站設計,有關成都定制網(wǎng)站方案、改版、費用等問題,行業(yè)涉及成都門窗定制等多個領域,已為上千家企業(yè)服務,得到了客戶的尊重與認可。
angular的核心思想是通過數(shù)據(jù)驅(qū)動一切,其他東西都是數(shù)據(jù)的延伸。套用Javascript一切皆對象的思想,在angular中可以說一切皆數(shù)據(jù)。
(1) requirejs以及Yeoman關于項目構(gòu)建
在剛開始接觸或者使用Angular的時候,總會疑惑與類似的問題,我實踐的答案是不需要requirejs或者Yeoman.前者不使用,因為angular本身有module的實現(xiàn).后者是因為Angular組織結(jié)構(gòu)以及項目構(gòu)建完全不必要弄得如此繁雜,手寫或者在github上pull一個seed項目即可.
(2) 如何組織項目結(jié)構(gòu)
這個問題有點廢材,因為完全因人因項目而異.個人推薦的是兩種組織結(jié)構(gòu),一種按照代碼功能,也就是controller都放在一個文件夾下,services都放在一個文件夾下.另一種則遵循所實現(xiàn)的功能,比如User就把對應的template,services,controller都放在User文件夾下.
兩種都可以,從維護角度上看第二種會更好一些.
(3) controller以及service的劃分
這里controller通常就是一個頁面一個controller,假如一個頁面有公共的部分,公共部分永遠使用一個controller.對于service要劃分成兩個部分,一個是于服務器交互數(shù)據(jù)的service,另一個是一些功能性common的內(nèi)容,其中放置一些自己寫的可復用的服務,類似于notify等.
至于service要不要按照功能和模塊再進一步劃分,這個就看項目來了.
(4) Angular插件以及庫的使用
對于一個項目所有的東西都去網(wǎng)上拿現(xiàn)成的肯定不現(xiàn)實,但是所有的東西都自己寫就更不實際了.Angular的很多插件是由Angular團隊開發(fā)出來或者一些人用jquery插件封裝的.我對于插件的觀點很簡單,如果拿來用趕緊需求可以滿足就用,不能滿足就自己寫或者在已有插件上改進.
對于如果你調(diào)試幾個小時還搞不定的插件,聽我的勸,放棄它吧.大多數(shù)插件都是一些UI插件,大可不必追求繁雜,有時候簡簡單單的HTML控件也自有它簡約的美.
如果你遇到Angular插件沖突,尤其是UI插件,大多數(shù)的情況下要放棄其中之一,比如angular-ui和angular-strap.
使用技巧
下面進入正文,我會列舉出我在使用angular的過程中使用的一些技巧,會以場景的形式一一列舉.這里對于Angular的一些基礎概念我不會解釋,本文是一些技巧性的東西,不是基礎教程.
(1) angular中"{{}}"于Python的flask沖突
Python的flask使用的模板中,數(shù)據(jù)綁定也是通過兩個"{"大括號,這就于angular的數(shù)據(jù)綁定有沖突.這個有兩種解決方法,一種是修改angular的綁定標記,另一種就是修改flask的綁定標記,這里兩種方案都給出.
修改angular:
$interpolateProvider.startSymbol('{[{').endSymbol('}]}'); // 將這句話加在config中即可,放在route的module中即可.這里將原來angular的{{ }}綁定,修改為通過{[{ }]}綁定.
修改flask:
class CustomFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( block_start_string='{%', block_end_string='%}', variable_start_string='{#', variable_end_string='#}', comment_start_string='<#', comment_end_string='#>', )) app = CustomFlask(__name__, instance_path='/web')
這里我推薦修改flask,因為用了angular之后,前后端分離.flask的jinjia模板不再需要,同時如果你修改了Angular的綁定標記,其他的控件和庫會有問題的.
(2) 去除url中總是默認帶有"#"
在設置route的時候,開啟HTML5模式.
angular.module('router', ['ngRoute']) .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); // 設置一下這句即可 } ]);
3) ng-click="expression"以及類似的指令,如何在expression中書寫多個表達式?
比如我在一個ng-click中想要給2個變量賦值,通過";"分號分割即可:
<a ng-click="obja=1;objb=2"></a>
(4) $watch沒有產(chǎn)生作用或者只生效一次
這種情況一般來說是監(jiān)聽一個字符串或者數(shù)字的時候會出現(xiàn),$scope.$watch("name",function(){}).沒有生效或者只生效一次,解決方法是$watch盡量監(jiān)聽的是一個對象,將你要監(jiān)聽的值附在一個Object下即可.
當你使用angular-ui中的modal時,這個比較明顯.
(5) 希望ng-view的內(nèi)容全頁面顯示
通常一個頁面可能會有固定的top-menu或者sidebar,這類固定不變的部分,然后每次route變化的都是ng-view的template,如果一個頁面希望整個頁面完全顯示它自己,不包括top-menu之類固定的部分.
這里通常是一個index.html和一個ng-view顯示的template.html,top-menu和sidebar位于index.html中,將它們的顯示隱藏通過ng-if綁定一個變量控制.
如果一個頁面需要自己完全顯示,不顯示sidebar等,則在其controller中通過$scope.$emit向上發(fā)送一個消息,然后index頁面的controller則通過$scope.$on監(jiān)聽消息,一旦聽到那個消息,則改變控制sidebar顯隱的變量.
也可以通過service做一個全局的變量控制,個人推薦還是通過消息廣播的方式.
(6) 切記用ng-if代替ng-show
這是angular的一個小坑,也可以說是不大不小的一個坑.一些長列表數(shù)據(jù),可能有一些東西是通過默認隱藏,點擊顯示的形式展現(xiàn)的.而這部分可控制顯隱的內(nèi)容中也會伴隨很多數(shù)據(jù)綁定.這個在頁面渲染的時候非常影響性能.
舉一個列子,比如說通常angular建議一個頁面的數(shù)據(jù)綁定不超過2000個,假如現(xiàn)在有一個頁面直接綁定了2000個model,然后你加載,會發(fā)現(xiàn)非常卡.如果你將每100的model設置為ng-show,默認情況下不顯示,你會發(fā)現(xiàn)還是很卡.
然后你將所有的ng-show換成ng-if,你會發(fā)現(xiàn)性能瞬間快的像兩個應用.原因在ng-show還是會執(zhí)行其中的所有綁定,ng-if則會在等于true,也就是顯示的時候再去執(zhí)行其中的綁定.這樣一來性能就有很大的提高,我之前通過這個簡單的修改,頁面加載快了10倍左右.
所以在能使用ng-if的情況,用它代替所有的ng-show和ng-hide吧.
(7) 關于ng-bind-html
通常情況下為html元素綁定數(shù)據(jù),有ng-bind就夠了,但一些情境下需要綁定的不是一般的數(shù)據(jù),而是html.那么ng-bind就不夠用了,需要使用ng-bind-html,它會將內(nèi)容作為html格式輸出.比如想輸出帶有class的html,那么就使用ng-bind-html,而且還需要ngSanitize的配合,需要引入相應的文件.
(8) 獲取ng-repeat數(shù)據(jù)filter后的結(jié)果
這個一般在搜索的時候需要用到,比如多重ng-repeat數(shù)據(jù)形成列表.然后filter一個字段,現(xiàn)在要得到filter之后的結(jié)果,有2中方式.
一種是在html的ng-repeat中類似這么寫:
ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"
這樣_displayfoods就是filter后的最終顯示的結(jié)果.另一種方式是通過兩套數(shù)據(jù),一套寫在controller中,然后filter以及orderBy都是在controller中操作,***操作的結(jié)果在用來ng-repeat.
***種方式比較方便,第二種方式更好,性能也好.
(9) ng-class以及ng-style通過判斷賦值
根據(jù)變量的值決定是否應用某種class,以及不同的style樣式.
ng-class="{'state-error':!foodForm.foodstock.$valid}" ng-style="{ color: i.color=='' || i.name=='活' ? 'default' : '#fff' }"
(10) form校驗以input為例
angular的form可以通過input的HTML5屬性進行校驗,這里主要通過form以及input的name屬性進行鎖定,formname.inputname.$valid表示name為inputname的空間是否通過本身的屬性校驗.
(11) $resource和$http的$promise
$q.all([ resource.query().$promise, resource2.query().$promise ]).then(functon(success){ console.log(success); },functon(error){ console.log(error); });
foodFactory.food.save(f).$promise.then(function(result){ foodFactory.food.get({id:result.id}).$promise.then(function(data){ }); });
這個不解釋了,直接看就可以了,注意$http的promise需要手動返回,所以一般情況下都通過$resource.
(12) 僅$watch監(jiān)聽collection中的一個屬性
$watch的第三個參數(shù)設置為true,即可deep watch.不過有時候其實不想或者不需要監(jiān)聽collection的全部屬性.只要監(jiān)視其中的一個或者幾個,這時候通過for循環(huán)雖然可以循環(huán)$watch不過明顯太挫.
通過下面這種寫法就可以監(jiān)控一個collection的單獨一個object屬性.
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "name": "bill4" } ] } ] $scope.$watch(function($scope) { return $scope.people.map(function(obj) { return obj.persions.map(function(g){ return g.name }); }); }, function (newVal) { $scope.count++; $scope.msg = 'person name was changed'+ $scope.count; }, true);
(13) debounce防抖處理
這個對于頻繁出發(fā)的處理非常有用,適用于類似ng-change,$watch的一些場景.比如根絕關鍵字即時搜索的場合,將$debounce封裝為服務,直接調(diào)用接口,代碼:http://jsfiddle.net/Warspawn/6K7Kd/
(14) 快速定位到某個位置
一般來講頁面內(nèi)通過<a id="bottom"></a>這樣的形式就可以結(jié)合js代碼,實現(xiàn)快速定位.在angular中也是通過類似的原理實現(xiàn),代碼如下:
var old = $location.hash(); $location.hash('batchmenu-bottom'); $anchorScroll(); $location.hash(old);
這樣寫是因為直接location.hash會導致url變化,頁面跳轉(zhuǎn),所以加了防止跳轉(zhuǎn)的代碼.
以上就是不可錯過的Angular應用技巧有哪些,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降摹OM隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱:不可錯過的Angular應用技巧有哪些
文章URL:http://bm7419.com/article42/goepec.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供虛擬主機、靜態(tài)網(wǎng)站、品牌網(wǎng)站設計、營銷型網(wǎng)站建設、移動網(wǎng)站建設、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)