学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序。 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息。

本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件。 通过本教程的学习,您将:

  1. 阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图。
  2. 学习如何使用AngularJS创建数据侦听器,且不需要进行DOM操作。
  3. 学习一种更好、更简单的方法来测试您的web应用程序。
  4. 学习如何使用AngularJS创建常见的web任务,例如更方便的将数据引入应用程序。

而且这一切可在任何一个浏览器实现,无需配置浏览器!

当你完成了本教程后,您将学会:

  1. 创建一个可在任何浏览器中的工作的动态应用。
  2. 了解AngularJS与其它JavaScript框架之间的区别。
  3. 了解AngularJS如何实现数据绑定。
  4. 利用AngularJS的种子项目快速创建自己的项目。
  5. 创建和运行测试。
  6. 学习更多AngularJS标识资源(API)。

本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应用。 教程的每个步骤为您提供建议以了解更多有关AngularJS和您创建的web应用程序。 您可能会在短时间内快速读完本教程,也可能需要花大量时间深入研究本教程。 如果想看一个简短的AngularJS介绍文档,请查看[快速开始][ Getting Started]文档。

搭建学习环境

无论是Mac、Linux或Windows环境中,您均可遵循本教程学习编程。您可以使用源代码管理版本控制系统Git获取本教程项目的源代码文件,或直接从网上下载本教程项目源代码文件的镜像归档压缩包。

  1. 您需要安装Node.js和Testacular来运行本项目,请到Node.js官方网站下载并安装最新版,然后把node可执行程序路径添加到系统环境变量PATH中,完成后在命令行中运行一下命令可以查看是否安装成功:

    node -version

    然后安装Testacular单元测试程序,请运行如下命令:

    npm install -g testacular
  2. 安装Git工具,然后用以下命令从Github复制本教程项目的源代码文件:

    git clone git://github.com/angular/angular-phonecat.git

    您也可以直接从网上下载本教程项目源代码的镜像归档压缩包。这个命令会在您当前文件夹中建立新文件夹angular-phonecat

  3. 最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。

  4. 进入教程源代码文件包angular-phonecat,运行服务器后台程序,开始学习AngularJS!

    cd angular-phonecat
    node scripts/web-server.js

Angular系列------AngularJS入门教程:导言和准备(转载)的更多相关文章

  1. Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  2. Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  3. Angular系列----AngularJS入门教程00:引导程序(转载)

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  4. Angular系列----AngularJS入门教程04:迭代器过滤(转载)

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

  5. Angular系列----AngularJS入门教程05:双向绑定(转载)

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  6. Angular系列----AngularJS入门教程02:静态模板(转载)

    为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...

  7. AngularJS入门教程:日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  8. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  9. AngularJS 入门教程 $http is not defined 解决方案

    采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...

随机推荐

  1. redis 配置文件 append only file(aof)部分---数据持久化

    ############################## 仅追加方式 ############################### #默认情况下Redis会异步的将数据导出到磁盘上.这种模式对许 ...

  2. 奇怪吸引子---YuWang

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  3. IE11新文档模式Edge介绍与评估,及在WebBrowser应用中的使用。

    浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...

  4. IOS UISearchDisplayController 点击搜索出现黑条问题解决方案

    最近项目遇到一个很奇葩的问题 点击按钮启动 presentViewController 的时候出现下图效果: 代码: AddFriendViewController *addFriendVC = [[ ...

  5. Scala 深入浅出实战经典 第51讲:Scala中链式调用风格的实现代码实战及其在Spark中应用

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  6. HTTP - GET和POST的区别

    网上有很多文章介绍这两种HTTP请求的区别,我也不懂,主要还是看了一些文章,在这里写下一些笔记. 语义不同 在HTTP协议中,最初规定GET是用来查询或者获取资料,只读,POST用于修改数据,可写.因 ...

  7. WebRTC is for Losers:WebRTC是输家

    该文章是引述,仅代表作者Dave Michels观点 WebRTC is for Losers WebRTC technology has fallen short on many of its pr ...

  8. Solr 5.x集成中文分词word,mmseg4j

    使用标准分词器,如图: 使用word分词器 下载word-1.3.jar,注意solr的版本和word分词的版本 将文件word-1.3.jar拷贝至文件夹C:\workspace\Tomcat7.0 ...

  9. Android WebView Demo

    activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  10. Android开发(51) 摄像头自动对焦。在OpenCV图像识别中连续拍照时自动对焦和拍照。

    概述 对焦,这里所说的“焦”是指“焦距”.在拍照时,一定是需要调焦的.一般会在目标位置最清晰的时候会停止对焦.最近在处理OpenCV进行图像识别时,需要连续的调焦(对焦),并在对焦完成后进行拍照,获取 ...