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

为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板. 在这一步您将会在一个html页面中添加两部手机的基本信息. ·这个页面现在包含一个有两部手机的基本信息名单. 最重要的不同被列在了下面,您可以点击这里在GitHub上查看全部的不同. app/index.html: <ul> <li> <span>Nexus S</span> <p&g…

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

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

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

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

在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Angular如何实现它. 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. 组件控制器 app/phone-detail/phone-detail.component.js: ... controller: ['$http', '$routeParams', function Phon…

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

在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现电话细节视图,然后刷新phoneDetail组件模板. 最大的不同列举如下,您也可以点击这里从GitHub上看到全部不同. 数据 除了phones.json,app/phones/目录中也包含了每一步电话的JSON文件: app/phones/nexus-s.json: (样本片段) { "addi…

在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.html#!/phones,电话列表会显示在浏览器中: ·当您点击一部电话的超链接,URL会改变至该指定电话,浏览器将展示一个简短的电话细节页面. 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 这一步中添加的路由功能是由Angular中的ngRoute模块提供的,该模块由核…