我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。 请重置工作目录： git checkout -f step-3我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。 步骤2和步骤3之间最重要的不同在下面...
在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。 请重置工作目录： git checkout -f step-4你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制电话排列的顺序。 步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 app/index.html Search: <input ng-model="query"> S...
到现在为止，我们使用是硬编码的三条手机记录数据集。现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集。我们将使用AngularJS的依赖注入（dependency injection (DI)）功能来为PhoneListCtrl控制器提供这个AngularJS服务。 请重置工作目录： git checkout -f step-5刷新浏览器，你现在应该能看到一个20部手机的列表。 步骤4和步骤5之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 你项目...
这一步，你会为手机列表的手机添加缩略图以及一些链接，不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。 请重置工作目录： git checkout -f step-6现在你应该能够看到列表里面手机的图片和链接了。 步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接。这些url现在指向app/img/phones/目录。 app/pho...
在这一步，你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。 请重置工作目录： git checkout -f step-7注意到现在当你转到app/index.html时，你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来。当你点击一个手机链接时，一个手机详细信息列表也被显示了出来。 步骤6和步骤7之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 多视图，路由和布局模板 我们的应...
在这一步，你将实现手机详细信息视图，这个视图会在用户点击手机列表中的一部手机时被显示出来。 请重置工作目录： git checkout -f step-8现在当你点击列表中的一部手机之后，这部手机的详细信息页面就会被显示出来。 为了实现手机详细信息视图我们将会使用$http来获取数据，同时我们也要增添一个phone-detail.html视图模板。 步骤7和步骤8之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 除了phones.json，a...
为了说明angularJS如何增强了标准HTML，我们先将创建一个静态HTML页面模板，然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。 在本步骤中，我们往HTML页面中添加两个手机的基本信息，用以下命令将工作目录重置到步骤1。 git checkout -f step-1请编辑app/index.html文件，将下面的代码添加到index.html文件中，然后运行该应用查看效果。 app/index.html <ul><li><span>Nexus S</span><p>Fast just got faster with Ne...
在这一步中，我们会改进我们APP获取数据的方式。 请重置工作目录： git checkout -f step-11对我们应用所做的最后一个改进就是定义一个代表RESTful客户端的定制服务。有了这个客户端我们可以用一种更简单的方式来发送XHR请求，而不用去关心更底层的$http服务（API、HTTP方法和URL）。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 定制的服务被定义在app/js/services，所以我们需要在布局模板...
在这一步你将学习到如何创建自己的显示过滤器。 请重置工作目录： git checkout -f step-9现在转到一个手机详细信息页面。在上一步，手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化：√作为“true”；以及作为“false”。来让我们看看过滤器代码长什么样子。 步骤8和步骤9之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 定制过滤器 为...
在这一步，你会在手机详细信息页面让手机图片可以点击。 请重置工作目录： git checkout -f step-10手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 控制器 app/js/controllers.js ... function PhoneDetailCtrl($scope, $ro...
我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。 进入angular-phonecat目录，运行如下命令： git checkout -f step-0该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。 运行以下命令： node scripts/we...
AngularJS ng-checked 指令AngularJS 实例选择一个或选择所有选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>My cars:</p><input type="checkbox" ng-model="all"> Check all<br><br><input type="checkbox" ng-checked="all">Volvo<br><input type="checkbox" ng-checked="all">Ford<br><input ty...
AngularJS ng-class 指令 AngularJS 实例修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .sky {color:white;background-color:lightblue;padding:20px;font-family:"Courier New"; } .tomato {background-color:coral;padding:40px;font-family:Verdana; } </style> </head> <body ng-app=""><p>选择一...
AngularJS Select(选择框)AngularJS 可以使用数组或对象创建一个下拉列表选项。使用 ng-options 创建选择框在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><...
AngularJS 表格ng-repeat 指令可以完美的显示表格。在表格中显示数据使用 angular 显示表格是非常简单的：AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"> <table><tr ng-repeat="x in names"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr> ...