AngularJS--入门

AngularJS入门教程：导言和准备发表于2012年9月2日angularjs学习AngularJS的一个好方法是逐步完成本教程，它将引导您构建一个完整的AngularJSweb应用程序。该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介绍文档，请查看快速开始文档。搭建学习环境无论是Mac、Linux或Windows环境中，您均可遵循本教程学习编程。您可以使用源代码管理版本控制系统Git获取本教程项目的源代码文件，或直接从网上下载本教程项目源代码文件的镜像归档压缩包。1.在Mac、Linux或Windows系统中安装Java运行环境，进行单元测试时需要运行Java程序，以下命令可检测您的系统是否已安装Java运行环境：← 上一篇下一篇 →资讯文档社区关于搜索注册登录AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607]关于angularjsAngularJS中国社区查看angularjs发表的文章→java-version2.安装Git工具，然后用以下命令从Github复制本教程项目的源代码文件：gitclonegit://github.com/angular/angular-phonecat.git您也可以直接从网上下载本教程项目源代码文件的镜像归档压缩包。3.您的系统需运行HTTP服务器程序，如Apache等。如果您的系统没有安装HTTP服务器程序，建议安装Node.js，它是一个运行JavaScript的高性能HTTP服务器程序。4.最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。5.进入教程源代码文件包angular-phonecat，开始学习AngularJS！cdangular-phonecat版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MITLicense&&文档许可CC BY 3.0angularjs发表在入门教程分类，标签AngularJS、入门教程。将本文加入收藏夹。要发表评论，您必须先登录。AngularJS快速开始发表于2012年9月4日angularjsHello World!开始学习AngularJS的一个好方法是创建经典应用程序“HelloWorld!”：1.使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。2.将下面的源代码复制到您的HTML文件。3.在web浏览器中打开这个HTML文件。源代码!doctypehtmlhtmlng-appheadscriptsrc={{'World'}}!/body/html运行效果HelloWorld!打开网页应看到如下效果：现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：htmlng-app这行载入AngularJS脚本：scriptsrc=（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）最后，标签中的正文是应用的模板，在UI中显示我们的问候语：Hello{{'World'}}!注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。Hello AngularJS World!本示例演示AngularJS的双向数据绑定（bi-directionaldatabinding）：1.编辑前面创建的helloworld.html文档。2.将下面的源代码复制到您的HTML文件。3.刷新浏览器窗口。← 上一篇下一篇 →资讯文档社区关于搜索注册登录源代码!doctypehtmlhtmlng-appheadscriptsrc=:inputtype=textng-model=yournameplaceholder=WorldhrHello{{yourname||'World'}}!/body/html运行效果Yourname:WorldHelloWorld!打开网页应看到如下效果：该示例有一下几点重要的注意事项：文本输入指令inputng-model=yourname/绑定到一个叫yourname的模型变量。双大括号标记将yourname模型变量添加到问候语文本。你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。这就是AngularJS双向数据绑定的概念。输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。AngularJS应用的解析本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：模板（Templates）模板是您用HTML和CSS编写的文件，展现应用的视图。您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！应用程序逻辑（Logic）和行为（Behavior）应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。模型数据（Data）模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。下面的插图显示了AngularJS应用的各部分，以及它们协同工作原理：AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607]《AngularJS快速开始》上有1条评论关于angularjsAngularJS中国社区查看angularjs发表的文章→此外，AngularJS还提供了一些非常有用的服务特性：1.底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。2.您还可以扩展和添加自己特定的应用服务。3.这些服务可以让您非常方便的编写WEB应用。版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MITLicense&&文档许可CC BY 3.0angularjs发表在入门教程分类，标签AngularJS、入门教程。将本文加入收藏夹。angularjs在2012年9月16日09:53说道：登录以回复朋友们有疑问或者建议尽管留言要发表评论，您必须先登录。AngularJS入门教程00：引导程序发表于2012年9月15日angularjs我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。1.进入angular-phonecat目录，运行如下命令：gitcheckout-fstep-0该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。1.按照下面的操作您可以在浏览器中运行应用：node.js用户：A.可以在独立的命令行终端运行./scripts/web-server.js/pre或者nodescripts/web-server.js来启动服务器，启动后命令行终端将会提示HttpServerrunningat请不要关闭该终端，关闭该终端即关闭了服务器；B.在浏览器中输入来访问我们的应用。使用其它HTTP服务器的用户：A.请配置服务器使其驱动angular-phonecat项目；B.在浏览器中输入[port-number]/[context-path]/app/index.html来访问我们的应用。现在，在浏览器中您应该已经看到了我们的初始应用，很简单，但说明我们的项目已经可以运行了。应用中显示的“Nothinghereyet!”是由如下HTML代码构建而成，代码中包含了AngularJS的关键元素，正是我们需要学习的。app/index.html：!doctypehtmlhtmllang=enng-appheadmetacharset=utf-8titleMyHTMLFile/titlelinkrel=stylesheethref=css/app.csslinkrel=stylesheethref=css/bootstrap.cssscriptsrc=lib/angular/angular.js/script/headbodypNothinghere{{'