[Angular Tutorial]PhoneCat Tutorial App
(注:曾经在《不敢止步》一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍。这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Phonecat范例全部翻译一遍,这当然更多是希望自己能得到一个提高。翻译力求尽善尽美,当然质量实在难以保证。所有专有名词尽量不译,所有章节与https://docs.angularjs.org/tutorial/对应,如果可以,希望您能对照两边学习,给我提些意见。那么,开始吧!)
本节翻译自:https://docs.angularjs.org/tutorial/
PhoneCat Tutorial App
完成这篇tutorial是一种学习AngularJS的非常好的方法,这将带您领略一个AngularJS web app的构建过程.您将构建一个目录用于展示一系列的Android设备,您能过滤这个列表来只查看那些您感兴趣的设备,并且可以查看任何设备的细节。

跟随这份tutorial来看Angular如何使浏览器变得更为智能--这无需引入任何的本地扩展或插件:
·查看如何使用客户端的数据绑定来构建能根据用户行为及时更新的动态视图.
·在不需要引入任何的DOM操作的情况下,看到Angular如何保持您的数据和视图同步.
·学习使用Karma和Protractor来更佳,更容易地测试您的web 应用.(注:在这个系列中,所有测试部分我都会暂时略去,以后可能会加上)
·学习如何使用依赖注入(Dependency Injection)和服务(Services)来使得完成一些常用的web任务(入获取您的app中的数据)更加容易.
当您完成这份tutorial时,你将能做到:
·创建一个能在所有现代浏览器上工作的动态应用.
·使用数据绑定来联通您的数据模型和视图.
·使用Karma来创建并运行单元测试.
·使用Protractor来创建并运行端对端(end to end)测试.
·将应用的逻辑从模板(template)移动到控制器(controller).
·使用Angular的服务来从服务器端获取数据.
·使用ngAnimate来在您的应用中获得动画效果.
·找到进一步学习AngularJS的方向.
这份tutorial将指导您完成构建一个简单应用的全部过程,包括编写并运行单元测试和端对端测试,每一步的末尾还将设置实验来为您更深入地学习AngularJS和您在构建的应用提供建议。
您可以花上几个小时浏览整份tutorial或者花上愉悦的一天来细细琢磨它,如果您在寻找一份更短的关于AngularJS的介绍。请看这里.
(注:文档接下来的部分与我们的主题关系不大,一些关于git的使用和node安装的部分,这里就不译了,直接进入正文部分。)
[Angular Tutorial]PhoneCat Tutorial App的更多相关文章
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- Angular 学习笔记 ( PWA + App Shell )
PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站. Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现 ...
- [Angular Tutorial] 9 -Routing & Multiple Views
在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...
- [Angular Tutorial] 2-Angular Templates
是时候用AngularJS生成我们的动态页面了. 通常我们有很多方法来构建一个应用的代码.对于Angular的应用,我们鼓励使用MVC设计模式来解耦代码并且实现职责独立.记住这个,现在让我们在我们的应 ...
- anguar.js tutorial demo
http://docs.angularjs.cn/tutorial angular 入门demo : PhoneCat Tutorial App 别人的DEMO(官方版):http://angular ...
- Node.js NPM Tutorial: Create, Publish, Extend & Manage
A module in Node.js is a logical encapsulation of code in a single unit. It's always a good programm ...
- Instant Buy Android API Tutorial
转自:https://developers.google.com/wallet/instant-buy/android/tutorial This tutorial guides you throug ...
- Tutorial 4: Authentication & Permissions
转载自:http://www.django-rest-framework.org/tutorial/4-authentication-and-permissions/ Tutorial 4: Auth ...
- Tutorial 1: Serialization
转载自:http://www.django-rest-framework.org/tutorial/1-serialization/#tutorial-1-serialization Tutorial ...
随机推荐
- hdu_5555_Immortality of Frog(状压DP)
题目连接:hdu_5555_Immortality of Frog 题意: 给你一个NxN的网格,第N行的每一列都有个青蛙,这些青蛙只会往上走,上帝会在每个膜中放一个长生不老的药,一共有N个膜,每个膜 ...
- JSP内置对象--pageContext对象(非常重要!!!)
pageContext对象是javax.servlet.jsp.PageContext类的实例,只要表示的是一个jsp页面的上下文,而且功能强大,几乎可以操作各种内置对象. >forward(S ...
- C# 经典入门12章-System.Collections.Generic命名空间
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtUAAAAsCAIAAAAl09PEAAAgAElEQVR4nOx95Vscyd7285cMPrg7Aw ...
- 常用Select语句
--语 句 功 能--数据操作SELECT --从数据库表中检索数据行和列INSERT --向数据库表添加新数据行DE ...
- inline-block的升级float:浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- java中的序列化流和反序列化流
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px SimSun; color: #4e9072 } 序列化流:把对象按照流一样的方式存入文本文件 ...
- MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准
http://www.alixixi.com/program/a/2010080364045.shtml MIME 消息能包含文本.图像.音频.视频以及其他应用程序专用的数据. 官方的 MIME 信息 ...
- 安卓图表引擎AChartEngine(六) - 框架源码结构图
包结构: org.achartengine: org.achartengine.model: org.achartengine.renderer: org.achartengine.tools: 安卓 ...
- 再探CRC(转)
源:http://hi.baidu.com/skystalker/item/228a263147f74e87f5e4ad8d 之前写了CRC16的程序,虽说能用,却不知其所心然,现在要用CRC32,重 ...
- 找礼物(find)
找礼物(find) 题目描述 新年到了,你的好友和你(共K个人)的周围满是礼物,你让你的好友先拿,但是每个人只能拿当前离自己最近的礼物[当然如果有并列的多个礼物离你的距离相等(精确到小数点后四位,所有 ...