由于篇幅过长，所以人为强行分成两篇，望见谅。接上篇，AngularJS Tutorial - Learn AngularJS in 30 minutes (Part 1)

隐藏和显示elements

AngularJS另外还提供了一套指令（directive），允许用户根据一些条件或者表达式来隐藏或者显示某个DOM element。这些指令有ngHide，ngShow，ngSwitch和ngIf。这些指令提供了相类似的结果，不过在不同的情况下它们分别会很有用。当你遇到一些类似case switch的情况下ngSwitch指令会很有用，比如一些单选按钮开关（radio switch toggle）。ngHide，ngShow和ngIf有些本质上的不同，虽然表面十分相似。ngIf会将受影响的element从DOM里面移除，而ngHide和ngShow只是加了一个 display:none 的css属性来隐藏它。因此因尽量可能的使用ngIf，因为这样可以为已经忍受杂乱不堪DOM的浏览器省掉一部分内存。ngHide和ngShow在显示动画效果的时候会特别有用，因为ngIf会由于牵涉到DOM的创建和删除这类比较消耗资源的操作通常会影响到动画的展示效果。在我们这个简单的例子里，我想在每个我最喜欢的TV show的边上加上一个星星。可以使用ngIf来达到这个效果，让我们来修改index.html。 [cc lang=”html”]

A list of TV shows

{ {show.title}} { {show.year}}

[/cc] 这样在show.favorite这个属性是true的时候，页面DOM就会被简单的加上一个星星。这里还另外支持表达式，所以像 show.favorite == true 或者 show.favorite != false这样的表达式在这里也同样可行。

在ngRepeat里使用过滤器 (filter)

AngularJS提供了在迭代重复的内容里从容的进行过滤的功能。让我们使用之前创建的用户搜索输入来让用户可以过滤自己的TV show列表。 [cc lang=”html”]

A list of TV shows

{ {show.title}} { {show.year}}

[/cc] 就这么简单！想象一下用jQuery来做同样的事情会怎样。来，下面试试这个实现的效果。

See the Pen AngularJS Filter Example by Leon Revill (@RevillWeb) on CodePen.

让我们来把事情变的复杂一些，加入一个选项来改变这些列表条目显示的顺序。修改main.ctrl.js，加入一个用来表示所有可用排列顺序的对象。 [cc lang=”javascript” nowrap=”false” height=”450”] vm.orders = [ { id: 1, title: ‘Year Ascending’, key: ‘year’, reverse: false }, { id: 2, title: ‘Year Descending’, key: ‘year’, reverse: true }, { id: 3, title: ‘Title Ascending’, key: ‘title’, reverse: false }, { id: 4, title: ‘Title Descending’, key: ‘title’, reverse: true } ]; vm.order = vm.orders[0]; [/cc] 在index.html里加上一个select选项，这样用户就可以选择列表排列顺序，然后在我们之前在ngRepeat上加的filter后面再加上一个filter。 [cc lang=”html”]

{ {main.title}}

A list of TV shows

{ {show.title}} { {show.year}}

[/cc] 上面我们在ngRepeat加上了一个 orderBy 的过滤器来指定我们用来排列顺序的key，在这里是title。然后我们指定是顺序还是逆序排列，这个属性被存储在orders对象里面并被命名为reverse。然后为了填充select目录我们用到了ngOption指令，在这里你能看到更多关于ngOption的信息。修改一下排列顺序，看一下实际的效果。

See the Pen AngularJS order by example by Leon Revill (@RevillWeb) on CodePen.

表单验证

web应用的一大块部分是收集接受用户的输入和数据。AngularJS让表单验证的工作变的简单，确保数据在被传入到应用程序里处理前已被验证过。在这个简单的例子里我们将会创建一个表单来允许用户加入一个新的TV show到列表里来。打开index.html，加入下面的HTML来创建一个简单的form表单。 [cc lang=”html”] AngularJS Tutorial

{ {main.title}}

A list of TV shows

{ {show.title}} { {show.year}}

Add a new TV Show

Title

Year

Favorite:

Add

[/cc] 这个简单的form表单会允许用户输入一个show的名称，年份还有指定其是否是自己的favorite。在title和year的input上我们加上了一个required的属性，这样这两个值就是必须的。另外我们指定year的input属性为数字，并加上了min和max的属性。AngularJS自带了form表单验证的功能，当用户点击Add按钮的时候会自动提供反馈。如果用户没有在那些必须的fields上填写内容，就将会被系统提示错误信息。同样的，如果用户没有输入了一个介于1900到2030之间的数字，他们也会被要求修改。试一下实际的效果。

See the Pen AngularJS simple form validation by Leon Revill (@RevillWeb) on CodePen.

更多关于AngularJS form表单的信息请参见这里。

响应简单事件

本AngularJS教程的最后一部分将向您展示在这个框架里面事件event是怎样使用的。事件机制一直是JavaScript框架和库的重要部分，这里也不例外，即便Angular有它的双向数据绑定。如果用户不能实际提交数据并加入到TV show的列表，刚刚创建的表单其实并没有实际的用处。在MainController的底下加入如下的代码。 [cc lang=”javascript”] vm.new = {}; vm.addShow = function() { vm.shows.push(vm.new); vm.new = {}; }; [/cc] 上面的代码声明了一个称作new的对象，这个对象在form表单里被用来存储被标记为ngModel值的输入数据（比如，ng-model=”main.new.year”）。另外一个被称为 addShow 的函数也同时被创建，用来给show数组添加新对象从而在页面的列表里添加新条目。 AngularJS提供了不同的事件指令，例如ngClick，ngChange，ngFocus，等等，我们可以根据实际需要来做相应的响应操作。在我们简单例子里，我们将使用ngSubmit指令在form表单成功提交后，去触发 addShow 函数。打开index.html，修改表单的声明来包含这个指令，如下。 [cc lang=”javascript”]

[/cc] 现在，当表单成功验证并且用户点击Add按钮后，这个addShow函数便会被调用，从而添加一个新的show到列表里来。试一下效果吧！

See the Pen AngularJS ngSubmit example by Leon Revill (@RevillWeb) on CodePen.

这是一个在众多AngularJS事件指令中极其简单一个例子。欲知更多详情，请移步文档页面，那里有更为详细的内容。

总结

在完成这个快速的教程后您应该对很多AngularJS的理念和处理方式有了大致了解，它们将会方便您以后创建单页面应用程序。AngularJS提供了太多的内容，我不可能在30分钟内全覆盖到。如果您喜欢本教程，请在下面订阅，如果将来有高级的AngularJS教程您将会第一时间收到通知。（订阅请移步原文地址，文章结尾处可以订阅，译者注）