在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTTP方法和URLs. 最重要的变化列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 RESTful功能由Angular的ngResource模块提供,这是从Angular核心模块中独立出来的. 由于我们使用了Bower来安装客户端的依赖,这一步更新bower.json配置文件来添加新的依…

(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Phonecat范例全部翻译一遍,这当然更多是希望自己能得到一个提高.翻译力求尽善尽美,当然质量实在难以保证.所有专有名词尽量不译,所有章节与https://docs.angularjs.org/tutorial/对应,如果可以,希望您能对照两边学习,给我提些意见.那么,开始吧!) 本节翻译自:https://do…

在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号:✓ 代表“true”, ✘代表“false”. 让我们看看过滤器代码看起来是什么样的. 最重要的改变展示如下,您可以点击这里在GitHub上查看全部的不同. checkmark过滤器 由于这个过滤器是大众化的(比如:它没有指向任何视图或组件),我们打算将其在一个core模块中注册,该模块包含了“广泛…

在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户端代码“掌管”并和视图层实现了动态交互,通过在数据模型和状态中即刻更新视图来反应改变,这经常是用户交互的结果(我们不久将在第5步中看到一个例子),这种做法取代了在服务端创建一个静态HTML页面的做法. 模板(视图层包含绑定和展示逻辑的部分)作为一个蓝图,以此来决定我们数据怎么组织和展示给用户.而控制…

我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl控制器提供服务. ·现在我们有一个20部电话的列表,它们都是从服务器加载而来. 最重要的变化列举如下,当然您也可以点击这里在GitHub上查看所有的不同. 数据 你项目中的app/phones/phones.json文件是一个使用了JSON格式的一个更大的电话数据集合. 下面是一个文件的样本: […

在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. 在您继续之前,请确保您已经搭建好您的开发环境并且安装了所有必要的依赖,像这里描述的那样. 在angular-phonecat目录下,运行这条指令: git checkout -f step-0 这将使您工作空间的tutorial应用重置到step 0. 您必须在将来的每一步中重复这条指令并将步骤指向…

In this tutorial we are going to learn how we can also implement custom form field validation in Angular 2 template driven forms, by creating our own custom validation directive. We are going to see how to write such directive and how its a best prac…

1.切换目录 git checkout step- npm start 2.效果图 效果图和step 10的没有什么差别,这里主要的改动都是代码,代码做了很多优化,这里效果图就不再贴出来了. 3.实现代码 step-10和step-11之间的差别:https://github.com/angular/angular-phonecat/compare/step-10...step-11 Dependencies (依赖的JS): { "name": "angular-seed&…

Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to create a custom filter Let us understand creating custom filter with an example. Script.js : In the example below we are using the filter function to cr…

在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带的指令来自动触发动画来进行开发. ·当一个动画效果被发现时,在给定的时间内,它将会和置于元素中的实际DOM操作一同运行(比如:在ngRepeat中插入/删除节点或在ngClass中添加/删除类). 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. CSS过渡动画:使ngRepeat…