本文通过实现两个简单的业务需求，探讨AngularJS和传统的JavaScript控制DOM实现方式的差别，并尝试理解 MVW此类框架在流行的Web前端开发中的编程思想。
这个需求很常见，比如，一个两级菜单，在第一级别菜单项点击时候，对应的子菜单项目应该显示或隐藏。
jQuery的实现：
复制代码 代码如下:
<!-- html -->
<ul>
<li>
Item 1
<ul>
<li>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这些知识点：
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>
<input type="radio"
/>
<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}}"
/>
<label for="option1">option 1</label>
</li>
</ul>