AngularJS入门教程之学习环境搭建


Posted in Javascript onDecember 06, 2014

学习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
Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
AngularJS入门教程之Hello World!
Dec 06 #Javascript
JavaScript中的Web worker多线程API研究
Dec 06 #Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 #Javascript
JavaScript实现twitter puddles算法实例
Dec 06 #Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 #Javascript
angularjs中的e2e测试实例
Dec 06 #Javascript
angularjs中的单元测试实例
Dec 06 #Javascript
You might like
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
详解Angular的8个主要构造块
2017/06/20 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
高中课程设置方案
2014/05/28 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android