AngularJS入门教程之学习环境搭建  更新时间:2014年12月06日 15:14:33   投稿:junjie   这篇文章主要介绍了AngularJS入门教程之学习环境搭建,本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应用,需要的朋友可以参考下 学习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 您可能感兴趣的文章: AngularJS内置指令 简介AngularJS中$http服务的用法 AngularJS中的指令全面解析(必看) AngularJS中的模块详解 JavaScript Base64编码和解码,实现URL参数传递。 javascript中的Base64、UTF8编码与解码详解 Js实现Base64编码与解码 AngularJS实现的base64编码与解码功能示例 AngularJS 入门教程 相关文章 AngularJS指令中的绑定策略实例分析 这篇文章主要介绍了AngularJS指令中的绑定策略,结合实例形式分析了scope绑定策略的分类与具体实现方法,需要的朋友可以参考下 2016-12-12 Angularjs制作简单的路由功能demo 这篇文章主要介绍了Angularjs制作简单的路由功能demo,刚刚开始学习Angularjs,做的不好,还请见谅。 2015-04-04 angularJs的ng-class切换class 这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 angularjs的一些优化小技巧 这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下 2014-12-12 Angular2内置指令NgFor和NgIf详解 Directive的概念在Angular 1.x就存在了,我对它的认识比较模糊,所以直接通过一些例子来说明。Angular提供的内置执行有很多,这次使用两个:ngFor、ngIf。 2016-08-08 angularJS深拷贝详解 本篇文章主要介绍了angularJS深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 什么是 AngularJS?AngularJS简介 这篇文章主要介绍了什么是 AngularJS?AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下 2014-12-12 Angular.js中ng-if、ng-show和ng-hide的区别介绍 angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-01-01 Angular2使用vscode断点调试ts文件的方法 本篇文章主要介绍了Angular2使用vscode断点调试ts文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 angular基于路由控制ui-router实现系统权限控制 这篇文章主要介绍了angular基于路由控制ui-router实现系统权限控制的相关资料,需要的朋友可以参考下 2016-09-09 最新评论

学习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

您可能感兴趣的文章:

  • AngularJS内置指令
  • 简介AngularJS中$http服务的用法
  • AngularJS中的指令全面解析(必看)
  • AngularJS中的模块详解
  • JavaScript Base64编码和解码,实现URL参数传递。
  • javascript中的Base64、UTF8编码与解码详解
  • Js实现Base64编码与解码
  • AngularJS实现的base64编码与解码功能示例
张贴在3