本文通過實現兩個簡單的業務需求，探討AngularJS和傳統的JavaScript控制DOM實現方式的差別，並嘗試理解 MVW此類框架在流行的Web前端開發中的編程思想。
這個需求很常見，比如，一個兩級菜單，在第一級別菜單項點擊時候，對應的子菜單項目應該顯示或隱藏。
jQuery的實現：
代碼如下:
<!-- html -->
<ul class="parent">
<li class="parent_item">
Item 1
<ul class="child">
<li class="child_item">Item child 1</li>
</ul>
</li>
</ul>
// javascript
$('li.parent_item').click(function(){
$(this).children('ul.child').toggle();
})
AngularJS的實現：
代碼如下:
<!-- html -->
<ul>
<li ng-click="hide_child = !hide_child">
Item 1
<ul ng-hide="hide_child">
<li>Item child 1</li>
</ul>
</li>
</ul>
傳統操作DOM的方式，不再贅述。AngularJS的實現，相對代碼要精煉很多，只有HTML的版本即可。以上代碼，用到了AngularJS這些知識點：
1.Directives
2.Expressions
ng-click和ng-hide都是框架自帶的Directives（指令），前者相當於給li標簽提供了一個Event Handler，在該HTML元素（li）被點擊的時候，會執行hide_child = !hide_child這個Expression（表達式）。我們先看一下ng-hide這個指令，它會根據賦值的表達式結果（布爾值）來控制該HTML元素是否要顯示（通過CSS實現）。也就是說，如果hide_child這個變量如果是true，那麼ul就會被隱藏，否則結果相反。
這裡hide_child其實是$scope上的一個變量，對它的值的變更，也可以用controller控制器包裝一個方法來實現，只不過現在的語句比較簡單，直接寫在了指令的賦值裡面。
通過以上簡單的代碼分析，我們可以看到AngularJS兩個比較明顯的特點：
1.通過指令和表達式對DOM的操作進行了封轉，只需簡單的代碼便可省去額外的JavaScript代碼
2.指令和表達式的應用，只直接嵌套在HTML中的，這和jQuery推從的Unobtrusive JavaScript的代碼風格有些背道而馳
我們先看另外一個需求，再詳細解釋上面的結論。
需求2：通過點擊div，觸發選擇form中的一個radio button
傳統的HTML Form元素，在如今的移動設備上，操作起來並不是十分友好。比如，Radio button單選框，在觸摸屏上，需要精確的位置定位，才能控制好這個組件，但是手指定位又很粗糙。常見的做法，是添加一個對應的Label控件，但是文字本身占屏比例也並不理想，而且也不具備明確的信息傳達效果。所以，通常會間接操作一個區域比較大的div或者li標簽。
jQuery的實現：
代碼如下:
<!-- html -->
<ul>
<li class="selection">
<input type="radio"
id="option1" />
<label for="option1">option 1</label>
</li>
</ul>
// javascript
$('li.selection').click(function(){
$(this).children('input[type="radio"]').click();
})
AngularJS的實現：
代碼如下:
<!-- html -->
<ul>
<li ng-repeat="option in options"
ng-click="model.option = option.value"
ng-class="{active: model.option == option.value}" >
<input type="radio"
ng-model="model.option"
value="{{option.value}}"
id="option1" />
<label for="option1">option 1</label>
</li>
</ul>
在這個解決方案中，我們同樣沒有涉及到額外的JavaScript代碼，並且多用了幾個指令。為了對比參照，我們只關心ng-click和ng-model這兩個指令的表達式。
我們先看一下input這個元素的ng-model指令，這裡賦值的意思是，我們把模板上的input和$scope.model對象的option屬性進行了關聯，深入了解數據綁定可以參考Data Binding。這種指定關聯，使得模板控件直接和數據Model進行了綁定，並且這種綁定是雙向的。意味著，一旦用戶修改控件中的值（勾選radio input），對應的Model對象就會重新賦值（model.option）；同時，如果Model對象的值發生了變化，模板中的input控件也會對應反映變化。而這點，在上述jQuery的實現中，其實是沒有做到的。
所以，這裡通過AngularJS的數據綁定，點擊li元素間接完成觸發input的流程是這樣子的：
1.點擊li標簽，給model.option賦值；
2.修改了Model對象，定位到對應input控件（value的值為model.option那個）；
3.激活input控件的checked屬性
通過以上兩個案例，我們對Web前端的操作有了新的認識。
首先，技術實現上，通過引入新的指令，表達式，數據綁定等概念，我們可以完全新的方式去操作DOM，而不僅僅局限在用戶和HTML組件交互操作上的JavaScript代碼的實現。這種思想的變化是巨大的。
從本世紀初，動態Web編程的興起開始，服務器端的編程技術一直在改進。從一開始的CGI/PHP/ASP，由語言和平台產生了.NET vs. Java，開發效率和軟件過程促進了MVC框架/ORM/AOP等，性能和大數據帶來了NodeJS/NoSQL/Hadoop等，而浏覽器前端的技術需求似乎沒有那麼激進過。一方面，通過服務器端和數據庫，大部分B/S模型的業務需求都能滿足；再者，浏覽器本身存在不同平台的差異性，對腳本語言和渲染技術的標准不兼容，以及運算能力的欠缺和安全性的考慮。
在這種情況下，浏覽器端的需求，大部分時候只需要考慮渲染頁面和簡單的用戶交互。HTML/DOM加上JavaSript/CSS就這樣成就了前端的主要工作。所以，以前是沒有前端工作師，只需要Web設計師的。慢慢對前端的要求多起來，jQuery成為使用程度最高的一個JavaScript操作DOM的封裝庫。而在這個階段，jQuery/JavaScript的主要任務，仍然只是作為面向用戶浏覽器終端呈現和交互的工具。
理解了jQuery的起源，我們不難發現，以前追求的一些規則，譬如Unobtrusive JavaScript，當時局限於實現的手段和方式，為了分離DOM和JavaScript代碼邏輯，我們優先選擇了維護性更高的方式。前端對JavaScript的需求加大之後，出現了很多MVC/MVP的前端框架，以及AngularJS所謂的MVW(Model-View-Whatever)，JavaScript和DOM一刀切的方式發生了變化。原先我們考慮界面顯示和用戶交互的直接操作，現在我們有了客戶端的數據綁定，豐富的指令，依賴注入，等待我們的將是全新的編程模型和思維方式。