《AngularJS入门教程》由会员分享,可在线阅读,更多相关《AngularJS入门教程(50页珍藏版)》请在人人文库网上搜索。

1、资讯文档社区关于搜索An gularJS入门教程:导言和准备2012 年 9 月 2 日ngularjs备,然后查看设备的详细信息c*1赫NexusSW. IR$. imTi sk* 呼 miv-A r zMiipi; 1ISITA la %眄戸本教程将向您展示AngularJS怎样使得 web应用更智能更灵活,而且不需要各种扩展程序或插件。通过本教程的学习,您将:1. 阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图。2. 学习如何使用AngularJS创建数据侦听器,且不需要进行DOM操作。3. 学习一种更好、

2、更简单的方法来测试您的web应用程序。4. 学习如何使用AngularJS创建常见的web任务,例如更方便的将数据引入应用程序。而且这一切可在任何一个浏览器实现,无需配置浏览器! 当你完成了本教程后,您将学会:1. 创建一个可在任何浏览器中的工作的动态应用2. 了解 AngularJS3. 了解 AngularJS4. 利用 AngularJS与其它 JavaScript框架之间的区别。如何实现数据绑定。的种子项目快速创建自己的项目。5. 创建和运行测试。6. 学习更多AngularJS标识资源(API)本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应短的An

3、gularJS介绍文档,请查議速开始文档。搭建学习环境无论是 Mac、Linux或Windows环境中,您均可遵循本教程学习编程。您可以使用源代码管理版 本控制系统 Git获取本教程项目的源代码文件,或直接从网上下载本教程项目源代码文件的镜像归档压 缩包。1. 在Mac、Linux 或Windows系统中安装ava运行环境,进行单元测试时需要运行Java程序,以下命令可检测您的系统是否已安装Java运行环境:java -version2. 安装Git工具,然后用以下命令从Github 复制本教程项目的源代码文件:git clone git:/您也可以直接从网上 下载本教程项目源代码文件的镜像归

10、e Hi I Io World of angularJYour naiiw?: worldI Idin World该示例有一下几点重要的注意事项:文本输入指令 vinput ng-model=yourname /绑定到一个叫双大括号标记将 yourname模型变量添加到问候语文本。你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!yourname 的模型变量。AngularJS双向数据绑定的概念。输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。An gularJS应用的解析本节描述 A

11、ngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式:模板(Templates )模板是您用HTML和CSS编写的文件,展现应用的视图。您可给HTML添加新的元素、属性标记,作为 AngularJS 编译器的指令。AngularJS编译器是完全可扩展的,这意味着通过AngularJS 您可以在HTML中构建您自己的HTML标记!应用程序逻辑(Logic )和行为( Behavior )应用程序逻辑和行为是您用JavaScript定义的控制器。不需要另外编写侦听器或DOM空制器,因为它们已经内置到序逻辑很容易编写、测试、维护和理解。AngularJS 与标准 A

12、JAX应用程序不同,您AngularJS中了。这些功能使您的应用程模型数据(Data)模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是类型,这都不重要,重要的是,他们都属于AngularJS 作用域对象。Javascript对象、数组或基本AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。下面的插图显示了AngularJS应用的各部分,以及它们协同工作原理:angular/ Enabled Browser&cope*比 $0woi / KryEvel41

22、。AngularJS表达式是一种类似于JavaScript的代码片段,AngularJS 表达式仅在 AngularJS 的作用域中运行,而不是在整个DOM中运行。引导AngularJS应用通过ngApp指令来自动引导AngularJS应用是一种简洁的方式,适合大多数情况。在高级开发中,例如使用脚本装载应用,您可以使用imperative指令者手动引导AngularJS 应用。AngularJS应用引导过程有3个重要点:1. 注入器 (injector)将用于创建此应用程序的依赖注入(dependencyinjection);2. 注入器将会创建根作用域作为我们应用模型的范围;3. Angul

23、arJS将会链接根作用域中的DOM,从用 ngApp标记的 HTML标签开始,逐步处理DOM中指令和绑定。HTML触发事件,如鼠标点击事件、按键事AngularJS将会自动检测变化,并一旦AngularJS应用引导完毕,它将继续侦听浏览器的件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生,作出相应的处理及更新。上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定,其中的模型也是空的 下一步我们尝试稍复杂的应用!TemplateModel我工作目录中这些文件是干什么的?上面的应用来自于AngularJS种子项目,我们通常可以使用ularJS种子项目创建新项目。种子项目包括最

24、新的 AngularJS代码库、测试库、脚本和一个简单的应用程序示例,它包含了开发一个典型的web应用程序所需的基本配置。对于本教程,我们对AngularJS 种子项目进行了下列更改:1. 删除示例应用程序;2. 添加手机图像到app/img/phones/ ;3. 添加手机数据文件(JSON)到app/phones/4. 添加 Bootstrap 文件到 app/css/ 和 app/img/练习试试把关于数学运算的新表达式添加到index.htmlp 1 + 2 = 1 + 2 /p总结现在让我们转到步骤1,将一些内容添加到web应用程序版权声明:中文文档A

29、动态特性了一一用AngularJS !我们这里为后面要加入的控制器添加了一个测试。一个应用的代码架构有很多种。对于AngularJS 应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注