(注:曾经在《不敢止步》一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍。这里我决定做一次尝试,接下来花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的更多相关文章

  1. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  2. Angular 学习笔记 ( PWA + App Shell )

    PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站. Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现 ...

  3. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...

  4. [Angular Tutorial] 2-Angular Templates

    是时候用AngularJS生成我们的动态页面了. 通常我们有很多方法来构建一个应用的代码.对于Angular的应用,我们鼓励使用MVC设计模式来解耦代码并且实现职责独立.记住这个,现在让我们在我们的应 ...

  5. anguar.js tutorial demo

    http://docs.angularjs.cn/tutorial angular 入门demo : PhoneCat Tutorial App 别人的DEMO(官方版):http://angular ...

  6. 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 ...

  7. Instant Buy Android API Tutorial

    转自:https://developers.google.com/wallet/instant-buy/android/tutorial This tutorial guides you throug ...

  8. Tutorial 4: Authentication & Permissions

    转载自:http://www.django-rest-framework.org/tutorial/4-authentication-and-permissions/ Tutorial 4: Auth ...

  9. Tutorial 1: Serialization

    转载自:http://www.django-rest-framework.org/tutorial/1-serialization/#tutorial-1-serialization Tutorial ...

随机推荐

  1. Android应用程序基础

    Android程序使用Java语言编写.Android开发套件把数据.资源文件和Java代码编译到一个.以.apk为后缀名的Android压缩包中.一个单独的apk文件中的所有代码被认为是一个andr ...

  2. Nginx 502/504 Gateway time-out错误完美解决方案【转发】

      在安装完Nginx+PHP-fpm+Mysql后,跑PHP的应用会经常出现504 Gateway Time-out 或者502 Bad Gateway的情况. Nginx 504 Gateway ...

  3. hide the navigationBar and tabBar

    [self.navigationController setNavigationBarHidden:YES animated:NO]; hidesBottomBarWhenPushed

  4. jTDS Java连接SQL Server 2000数据库

    Java连接SQL Server 2000数据库时,有两种方法: (1)通过Microsoft的JDBC驱动连接.此JDBC驱动共有三个文件,分别 是mssqlserver.jar.msutil.ja ...

  5. 设计模式--状态模式(分布式中间件熔断器Java实现)

    最近在做分布式服务熔断,因为要实现一个熔断器状态机,所以想到状态模式.状态模式是当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.状态模式主要解决的是当控制一个对象状态的条件表达 ...

  6. Eclipse 配置工程

    Eclipse改UTF-8 Window->Preferences->General->Workspace->Text file Encoding Eclipse配置tomca ...

  7. Mysql集群读写分离(Amoeba)

    Amoeba原理戳这里:Amoeba详细介绍 实验环境 Master.Amoeba--IP:192.168.1.5 Slave---IP:192.168.1.10 安装JDK JDK下载地址:http ...

  8. SQL复习六(视图)

    视图是关系数据库系统提供给用户以多角度观察数据库中数据的一种重要方法.视图是从一个或者几个表中导出的虚拟表.视图一经定义就可以被查询和删除.也可以在视图上定义视图.用视图完成数据的更新(增,删,改)操 ...

  9. 丢手帕问题as3版

    N个孩子围成一圈报数,报到M的退出,剩下的再从1继续报数,报到M的再退出,一直持续到只剩一个人,问剩下的是哪个? package { import flash.display.Sprite; publ ...

  10. 漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

    一个像素边框的表格: Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Text 2B Text 2C ...