摘要: 在这一步中您将学到如何创建您自己的展示过滤器。 ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能。在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号:✓ 代表“true”, ✘代表“false”。 让我们看看过滤器代码看起来是什么样的。 最重要的改变 阅读全文
posted @ 2016-05-31 20:51 Kris_Chan 阅读(298) 评论(0) 推荐(0) 编辑
摘要: 在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示。 ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示。 我们打算使用$http来获取我们的数据,以此来实现电话细节视图,然后刷新phoneDetail组件模板。 最大的不同列举如下,您也可以点击这里从Git 阅读全文
posted @ 2016-05-31 18:51 Kris_Chan 阅读(230) 评论(0) 推荐(0) 编辑
摘要: 在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用。 ·当您现在访问/index.html,您将被重定向到/index.html#!/phones,电话列表会显示在浏览器中; ·当您点击一部电话的超链接,URL会改变至该指 阅读全文
posted @ 2016-05-30 15:11 Kris_Chan 阅读(349) 评论(0) 推荐(0) 编辑
摘要: 在这一步中,我们将会在电话列表中为电话添加略图,并附上链接,当然现在也不会链接去哪。在随后的步骤中,我们将使用这些链接来展示电话列表中额外的信息。 ·现在电话列表中会有链接和图片。 最重要的不同在下面列出。您可以点击这里在GitHub上查看全部的不同。 数据 注意到phones.json文件中包含了 阅读全文
posted @ 2016-05-28 22:25 Kris_Chan 阅读(172) 评论(0) 推荐(0) 编辑
摘要: 在这一步中,我们将不会在我们的应用中添加任何新功能,相反,我们打算退回一步,重构我们的代码库,移动我们的代码和文件,以此来使我们的应用更具易扩展性和可维护性。 在先前的步骤中,我们已经见识到了如何将我们的应用构建得更具模块性和可测试性。另一种同样重要的思想是,用一种使得查看代码变得容易(无论对我们还 阅读全文
posted @ 2016-05-27 18:13 Kris_Chan 阅读(282) 评论(0) 推荐(1) 编辑
摘要: 在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view)。一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户端代码“掌管”并和视图层实现了动态交互,通过在数据模型和状态中即刻更新视图来反应改变,这经常是用户交 阅读全文
posted @ 2016-05-25 19:25 Kris_Chan 阅读(521) 评论(0) 推荐(1) 编辑
摘要: 我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧。我们将会使用Angular的依赖注入来为PhoneListCtrl控制器提供服务。 ·现在我们有一个20部电话的列表,它们都是从服务器加载而来。 最重要的变化列举如下 阅读全文
posted @ 2016-05-24 16:58 Kris_Chan 阅读(175) 评论(0) 推荐(0) 编辑
摘要: 在这一步中,您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序,动态改变顺序是由创建一个新的数据模型的特性实现的,将它和迭代器绑定在一起,并且让数据绑定神奇地处理下面的工作。 ·除了搜索框,应用会展示一个下来菜单来允许用户控制电话列表的顺序。 最大的改变列举如下,当然您可以点击这里查看全 阅读全文
posted @ 2016-05-24 10:00 Kris_Chan 阅读(345) 评论(0) 推荐(0) 编辑
摘要: 在上一步中,我们花了很大功夫来布局应用的基础,所以我们现在做点简单点的吧!我们将会添加一个全文本搜索框(没错,这很简单)。 ·我们的应用现在会有一个搜索框,注意页面中手机列表的改变取决于用户在搜索框键入的内容。 最重要的变化列举如下,当然,你也可以点击这里在GitHub上查看全部的不同。 控制器 我 阅读全文
posted @ 2016-05-23 23:00 Kris_Chan 阅读(210) 评论(0) 推荐(0) 编辑
摘要: 是时候用AngularJS生成我们的动态页面了。 通常我们有很多方法来构建一个应用的代码。对于Angular的应用,我们鼓励使用MVC设计模式来解耦代码并且实现职责独立。记住这个,现在让我们在我们的应用中使用一点Angular和Javascript来添加模型,视图和控制器成分。 ·列表中的三部电话是 阅读全文
posted @ 2016-05-22 17:33 Kris_Chan 阅读(424) 评论(0) 推荐(0) 编辑