實踐總結：不可錯過的Angular應用技巧(1)

實踐總結：不可錯過的Angular應用技巧(1)

angular的核心思想是通過資料驅動一切,其他東西都是資料的延伸. 套用Javascript一切皆對象的思想,在angular中可以說一切皆資料.

關於項目構建

(1) requirejs以及Yeoman

在剛開始接觸或者使用Angular的時候,總會疑惑與類似的問題,我實踐的答案是不需要requirejs或者Yeoman.前者不使用,因為angular本身有module的實現.後者是因為Angular組織圖以及項目構建完全不必要弄得如此繁雜,手寫或者在github上pull一個seed項目即可.

(2) 如何組織項目結構

這個問題有點廢材,因為完全因人因項目而異.個人推薦的是兩種組織圖,一種按照代碼功能,也就是controller都放在一個檔案夾下,services都放在一個檔案夾下.另一種則遵循所實現的功能,比如User就把對應的template,services,controller都放在User檔案夾下.

兩種都可以,從維護角度上看第二種會更好一些.

(3) controller以及service的劃分

這裡controller通常就是一個頁面一個controller,假如一個頁面有公用的部分,公用部分永遠使用一個controller.對於service要劃分成兩個部分,一個是於伺服器互動資料的service,另一個是一些功能性common的內容,其中放置一些自己寫的可複用的服務,類似於notify等.

至於service要不要按照功能和模組再進一步劃分,這個就看項目來了.

(4) Angular外掛程式以及庫的使用

對於一個項目所有的東西都去網上拿現成的肯定不現實,但是所有的東西都自己寫就更不實際了.Angular的很多外掛程式是由Angular團隊開發出來或者一些人用jquery外掛程式封裝的.我對於外掛程式的觀點很簡單,如果拿來用趕緊需求可以滿足就用,不能滿足就自己寫或者在已有外掛程式上改進.

對於如果你調試幾個小時還搞不定的外掛程式,聽我的勸,放棄它吧.大多數外掛程式都是一些UI外掛程式,大可不必追求繁雜,有時候簡簡單單的HTML控制項也自有它簡約的美.

如果你遇到Angular外掛程式衝突,尤其是UI外掛程式,大多數的情況下要放棄其中之一,比如angular-ui和angular-strap.

提示

下面進入本文,我會列舉出我在使用angular的過程中使用的一些技巧,會以情境的形式一一列舉.這裡對於Angular的一些基礎概念我不會解釋,本文是一些技巧性的東西,不是基礎教程.

(1) angular中"{{}}"於Python的flask衝突

Python的flask使用的模板中,資料繫結也是通過兩個"{"大括弧,這就於angular的資料繫結有衝突.這個有兩種解決方案,一種是修改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沒有產生作用或者只生效一次

這種情況一般來說是監聽一個字串或者數位時候會出現,$scope.$watch("name",function(){}).沒有生效或者只生效一次,解決方案是$watch盡量監聽的是一個對象,將你要監聽的值附在一個Object下即可.

當你使用angular-ui中的modal時,這個比較明顯.

(5) 希望ng-view的內容全頁面顯示

通常一個頁面可能會有固定的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向上發送一個訊息,然後index頁面的controller則通過$scope.$on監聽訊息,一旦聽到那個訊息,則改變控制sidebar顯隱的變數.

也可以通過service做一個全域的變數控制,個人推薦還是通過訊息廣播的方式.

(6) 切記用ng-if代替ng-show

這是angular的一個小坑,也可以說是不大不小的一個坑.一些長列表資料,可能有一些東西是通過預設隱藏,點擊顯示的形式展現的.而這部分可控制顯隱的內容中也會伴隨很多資料繫結.這個在頁面渲染的時候非常影響效能.

舉一個列子,比如說通常angular建議一個頁面的資料繫結不超過2000個,假如現在有一個頁面直接綁定了2000個model,然後你載入,會發現非常卡.如果你將每100的model設定為ng-show,預設情況下不顯示,你會發現還是很卡.

然後你將所有的ng-show換成ng-if,你會發現效能瞬間快的像兩個應用.原因在ng-show還是會執行其中的所有綁定,ng-if則會在等於true,也就是顯示的時候再去執行其中的綁定.這樣一來效能就有很大的提高,我之前通過這個簡單的修改,頁面載入快了10倍左右.

所以在能使用ng-if的情況,用它代替所有的ng-show和ng-hide吧.
 

(7) 關於ng-bind-html

通常情況下為html元素繫結資料,有ng-bind就夠了,但一些情境下需要綁定的不是一般的資料,而是html.那麼ng-bind就不夠用了,需要使用ng-bind-html,它會將內容作為html格式輸出.比如想輸出帶有class的html,那麼就使用ng-bind-html,而且還需要ngSanitize的配合,需要引入相應的檔案.