開頭
最近在做一個項目改版，第一次在項目中真正使用Angular,和平時自己寫寫小demo,做做練習的感覺還是非常不同的，感覺非常的新鮮。有幾個指令是經常用到的，這里由於這幾個有點共性，所以一起介紹一下ng-if,ng-show/ng-hide,ng-switch 這幾個指令。
共性
-
這里個指令都是Angular框架提供給我們的設置頁面內容顯示和隱藏的方法，使用起來非常方便，尤其是做業務邏輯。
-
都是通過一個表達式的值來實現切換顯示的，只不過 ng-switch 可以是其他值，ng-if ng-show 就必須是 boolen了。
-
我在使用過程中發現一個小技巧，我們通過表達式設置 ng-if 或者 ng-show 直接在頁面中定義一個表達式，這個時候它的值其實是undefined，由於 ！== true 所以這部分默認也是隱藏。
那么既然是不同指令，就各自有專攻，那我們就來看看他們分別都有什么果實能力。。。(不看海賊的可以無視哈~~)
各自的果實能力
ng-show/ng-hide
在用原生js 或者 jquery的時候，我們一般都可以定義一個類，通過添加和刪除這個類來實現元素的顯示和隱藏切換。其實這部分從網上參考資料來看，Angular也是這樣實現的，根據表達式正確與否，動態添加或者刪除 ng-hide 這個Angualr預先定義好的class。調用方式具體如下：
可以是設置一個變量
<div ng-show='show'></div>
也可以是直接使用 true / false
<div ng-show='true'></div>
對於變量，我們在js 中直接設置這個值就可以。
這個指令的特性是，即使我們暫時隱藏這部分內容，它也會被dom 渲染。
ng-if
使用方式也是設置一個表達式：
可以是設置一個變量
<div ng-if='more'></div>
也可以是直接使用 true / false
<div ng-if='true'></div>
對於變量，我們在js 中直接設置這個值就可以。
這是一個能幫我們節省效率的指令，如果表達式值 === false , 則這部分不會在dom中渲染，或者原有的內容會被從dom中刪除。所以如果有一部分內容，不需要一開始就顯示，我們可以先用ng-if 讓它隱藏。例如一個顯示更多的下拉按鈕，剛開始不顯示的部分，可以ng-if 來設置，等我們點擊了更多按鈕，再設置ng-if = true 既可。這樣子減少了頁面渲染事件，提高了效率呢。
還有一個特性，ng-if 或創建自己的 scope，它通過原型繼承父級的scope。一個典型的例子來自於參考資源1。
還有一個小坑，$scope上面我可以直接給一個屬性賦值如：
$scope.showpage = 'abut'
但是如果直接賦值一個對象，對不起，需要先聲明，再給對象添加屬性
$scope.data = {};
$scope.data.showpage = 'about';
ng-swith
使用方式比前前兩個復雜一點，不過也非常直觀，類似原生js 中的switch 函數：
在外層父級元素設置 ng-switch 為一個表達式A ，那么他的子元素相當於幾個不同的選項，表達式A 對應哪個子元素的 ng-switch-with 值，就顯示那部分。
<div ng-switch='showpart'>
<div ng-switch-default></div>
<div ng-switch-with='home'></div>
<div ng-switch-with='blog'></div>
<div ng-switch-with='about'></div>
<div ng-switch-with='contact'></div>
</div>
這也是一個能幫我們節省效率的指令。和ng-if 一樣，一開始如果不等於父級的 ng-switch 表達式的值，則不會在頁面渲染的，而且我們也可以通過 ng-switch-default 來設置默認的顯示部分。比如以往常見的 Tab 選項卡，用這個指令實現起來就非常的容易。
這里有一點疑問，因為我在項目中，做的單頁面應用，所有不同部分都在一個頁面里面。那么我經常需要根據不同的ajax返回值，顯示不同的部分，（特殊原因不能使用路由），所以我這里就是用的 ng-switch 指令，根據不同返回值，顯示不同部分。雖然也能實現按需顯示，但看到有文章說這樣使用 ng-switch 並不是很妥當，路過的朋友，有了解的可以指點我一下！我在這先謝過了~~
后面我會繼續分享Angular在項目開發中的經驗，以及遇到的坑！
參考資料中回答的非常精彩，也有實例，有興趣也可以看下！