应用AngularJS 1.x的基本教程和Directive的深入学习

注脚

展开查看详情

1. 目 录 致谢 简介 环境的准备 项目的创建和配置 AngularJS的第一步 学习和使用AngularJS 基本表达式 AngularJS初始化 ng-app 控制器 ng-controller 数据绑定 data-binding 条件判断 ng-if / ng-show / ng-hide 重复语句 ng-repeat 过滤器 filter 样式选择器 ng-class/ng-style 下拉列表选项 ng-options 引入ng-include和模板ng-template 本章总结 深入学习AngularJS - Directive 制作一个自定义的Directive Directive的命名和使用规则 让Directive支持传入数据 使用templateUrl获取模板 让Directive动起来link() 把Directive变为一个容器transclude Directive之间互相通讯 本章总结 本文档使用 书栈(BookStack.CN) 构建 - 1 -

2.致谢 致谢 当前文档 《学习AngularJS 1.x》 由 进击的皇虫 使用 书栈 (BookStack.CN) 进行构建,生成于 2018-04-18。 书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能,以 及对文档内容的生成和导出工具。 文档内容由网友们编写和整理,书栈(BookStack.CN) 难以确认 文档内容知识点是否错漏。如果您在阅读文档获取知识的时候,发现文 档内容有不恰当的地方,请向我们反馈,让我们共同携手,将知识准 确、高效且有效地传递给每一个人。 同时,如果您在日常生活、工作和学习中遇到有价值有营养的知识 文档,欢迎分享到 书栈(BookStack.CN) ,为知识的传承献上您的 一份力量! 如果当前文档生成时间太久,请到 书栈(BookStack.CN) 获取 最新的文档,以跟上知识更新换代的步伐。 文档地 址:http://www.bookstack.cn/books/learning_angular 书栈官网:http://www.bookstack.cn 书栈开源:https://github.com/TruthHun 分享,让知识传承更久远! 感谢知识的创造者,感谢知识的分享 者,也感谢每一位阅读到此处的读者,因为我们都将成为知识的传承 者。 本文档使用 书栈(BookStack.CN) 构建 - 2 -

3.致谢 本文档使用 书栈(BookStack.CN) 构建 - 3 -

4.简介 简介 学习AngularJS 1.x Learning AngularJS 1.x 本书地址 本书的读者 我应用AngularJS的方法 这样做的好处 为什么选择AngularJS 1.x 我选择AngularJS的历程 为什么写这本书 另:为什么没有选择Angular 2 版权声明 LICENSE 来源(书栈小编注) 学习AngularJS 1.x Learning AngularJS 1.x 本书是我在学习和应用AngularJS 1.x 的过程中的资料梳理。希望 能对大家学习AngularJS有一定帮助。 1. 如果您在阅读过程中,有任何疑问或者发现错误,可联系: 2. 作者: Harry<harry@andtoo.net> 3. 微信: hharry 本书地址 本书使用GitBook和GitHub托管。 本文档使用 书栈(BookStack.CN) 构建 - 4 -

5.简介 GitBook地址:hairui219/learning_angular GitHub地址:hairui219/learning_angular 本书的读者 本书会介绍如何应用AngularJS,但是本书不会涉及到JavaScript 语法以及HTML和CSS的布局模式。因此,本书对读者有一定的前置技术 要求: 1. 您需要知道和理解HTML和CSS布局的方法 2. 您需要知道JavaScript的基本语法 3. (推荐)您知道一些Node.js的使用方法 4. (推荐)您知道控制台命令如何使用 如果您需要对以上某方面内容入门,我向您推荐W3School网站。您可 以在这个网站上快速的了解相关的知识。 另外,在JavaScript方面,如果您有一定的PHP经验,我向您推荐这 本书(如果您没有PHP经验,这本书也可以阅读): JavaScript for PHP Developers (中文版) - Stoyan Stefanov 著 - 李强 译 这本书只有141页(定价28元,网站还有折扣),阅读起来非常轻松, 如果您有编程经验,一个下午就可掌握JavaScript的基本语法和用法 (同时也可能学会PHP的语法)。 京东特价优惠时我购买了几十本与JavaScript相关的书籍,这本是我认为最靠谱的入门书。 我应用AngularJS的方法 在进行前端开发的工作之前,我担任过几年的移动互联网产品经理,设 本文档使用 书栈(BookStack.CN) 构建 - 5 -

6.简介 计了几款应用(参与了一小部分的开发工作)。之后我改做应用和手机 游戏的后端开发(主要使用PHP)。 在这几年的工作经验中,我形成了一套app的构建思路。因此,在制作 网站前端时,我也希望采用类似的方法(我不喜欢直接在php代码中直 接嵌入html模板的方案,那样做感觉上比较混乱,难以管理。 因此,我将AngularJS作为一个类似于app的载体,当网站代码在客户 端载入完成后,再通过api请求获取数据。 这样做的好处 这样实现后,我认为主要有以下几个方面的好处: 1. 数据通过API(https)获取,过程并不向用户开放,起到了隐蔽后 端服务器的效果 2. 可以对API的访问限制和安全性进行更完善的设计实现 3. 前端网站托管在阿里云的OSS上(以静态网站的方式部署),这样 页面部分不再占用服务器的流量和空间 4. 便于之后的扩展,前端网站可以使用阿里云的CDN直接进行访问加 速;后端在使用API模式通讯的情况下,本来就可以极大的提高负 载能力(网络带宽优化),如果需要扩展,可以提高机器配置或者 增加机器数量。 幸运的是,AngularJS推荐这么做。 为什么选择AngularJS 1.x 对于选择AngularJS,业(zhi)界(hu)其实有一个调侃的说法: 写Java的写不来JavaScript的用AngularJS 虽然这个说法比较武断,但是其中也体现出来一个明显的信息,如果你 本文档使用 书栈(BookStack.CN) 构建 - 6 -

7.简介 之前有Java或其他后端语言的编程经验,AngularJS是让你快速上手 Web前端开发的很好的选择。至少对我而言是如此。 我选择AngularJS的历程 以下内容部分读者可能会感到有些偏激,但是这是对我(一个拥有一些其他编程经验的前端入门 者)的心路记录。 2015年初,在准备通过完全的Web方式实现一个B/S模式的企业服务网 站之后,我开始进行技术方面的准备。在此之前,我只有Android客户 端和PHP服务端的工作经验。另外,我对web的基本开发技能使用过一 些,掌握了HTML+CSS的一些应用技巧。JavaScript的语法和基本特 性方面也通过Node.js在工作中的应用熟悉了。 但是,在网站前端技术准备过程中,我发现我对DOM的操作一窍不通。 即使是购买了若干本入门的书籍,通过阅读书籍,我知道了如何通过 document.getElementById(‘xxx’)或者jQuery的$(‘xxx’)来 获取元素和填入代码之类的工作。但学会基本的语法之后,我仍然是对 于具体如何操作DOM来实现具体的功能完全没有头绪。这是一种什么感 觉呢?就像是在读大学时学习C/C++/Java语言,我们可以手工的去实 现一些基本的算法或数据结构。但是学完了之后,我们可以直接使用 C/C++或Java制作基于Windows的客户端程序了吗?一点也不。学习 DOM入门给我的感觉与之一模一样。 因为当时并不知道还有JavaScript框架这种东西存在,我去网上搜索 教程时也是一头雾水。因此,我想了一个笨办法,直接在一个国外的网 站上购买了一套后台管理系统界面的模板。浏览了下源代码之后,我发 现源码提供了两套版本,一套完全基于jQuery+BootStrap的版本, 和一套基于AngularJS的版本。两个版本的界面布局一模一样,但是 基于AngularJS的版本提供了一些如单页应用(在同一个界面直接刷 新部分界面而不是整页刷新)的特性。 本文档使用 书栈(BookStack.CN) 构建 - 7 -

8.简介 然后便是一系列的在网上搜索了解AngularJS的过程,看完它基本的 Tutorial(PhoneCat)之后,我马上被它的特性震惊了。因为, 1. AngularJS的整个结构体系非常符合我的思路 2. 双向绑定的特性实在是太和我胃口了,这让我完全不用再操心DOM 因为这两点特性,我义无反顾的加入了使用AngularJS的大军。 题外话: 国外网站购买的这种模板,都是由专业的前端人员开发,提供的功能都非常丰富完整。另外,他 们对管理工具的使用也很正规(使用bower或其他工具来管理第三方库等),代码结构和注释也 非常完善。 对我而言,这笔投资绝对物有所值(当时花费了我19美金)。 接下来我所做的事情,就是拿着这个模板的代码,修改html和增加 controller/service,调整ui-router的配置,最终完成了网站的 第一个版本。花的时间大约是2个月出头(前端+后端+部署调试,开发 工作全部由我一人完成)。 从今天来看,我的做法完全不符合AngularJS的最佳实践。虽然我未 在网站中使用jQuery等类库,但是我也同样没有使用AngularJS推荐 使用的directive方式(完全没有使用,这也是我准备在更深入的学 习AngularJS和重新构建网站的第二版的主要原因)。 但是,不管怎么说,我把东西做出来了,而且整个网站是可用的,从程 序结构上也是可维护和修改的。 为什么写这本书 由于业务需要,我准备重新制作网站的v2版本。在这个版本中,会有很 多新的功能需求(功能扩大非常多)。因此,完全重构整个网站是可以 接受的。另外,我之前只是误打误撞的制作出来一个”可用”的网站,为 本文档使用 书栈(BookStack.CN) 构建 - 8 -

9.简介 了使用更地道的方式制作这个新版网站,我现在正在重新学习 AngularJS。 写这本书,一方面是为了记录学到的AngularJS的技术,便于我日后 查询;另一方面也是为了给自己一点压力,让自己沉下心来掌握这门技 术。 我在AngularJS方面也是一名菜鸟,虽然我会尽力保证信息的正确 性,但也还请您在阅读的过程中批判的接收信息。如果有何问题,请通 过邮件或微信联系我(联系地址在此页面上方)。 另:为什么没有选择Angular 2 其实在重构时,我优先的选择是Angular 2 & TypeScript。因为它 引入了很多新的特性,比如应用了最新的ES标准,大量优化了 Angular工作的效率等等。 但是,下面3个原因导致了我放弃了Angular 2作为新版本网站的技术 选择。 1. 我自认为是一个比较追求新技术的人,但是当我测试Angular 2 时,发现我电脑上安装的Chrome v44版本无法运行,当我下载更 新到v47后才能正常运行(官网介绍v46以上才支持es6)。 2. 新版本Angular 2抛弃了controller/service,完全用 directive,这点与我的技术构想不符。 3. 即使在我评估Angular 2时已经是beta版本,但是官网仍然推荐 不要将其用于生产环境。 我的网站运行的是对公业务,且对合作方使用的浏览器有一定的影响能 力,但是我没有信心让所有客户都安装上Chrome的最新版本。 与我技术构想不符则是对我本人来说更重要的一个原因,因为我无法认 本文档使用 书栈(BookStack.CN) 构建 - 9 -

10.简介 同Angular 2的优化方向。同时,根据我的工作经验来看,这样革命 性的优化通常是内部一群理念不合的人另起炉灶,结果可能喜忧参半, 不一定会最终成功。 TypeScript的引入我不好评价,但是强类型定义和模型化并不太符合 我的业务模式(api一次性获取界面需要的所有数据,这些数据已经在 服务端进行好了类型定义和完整性处理,本地主要是实现对CRUD的调 用)。 综上,我放弃了在新版本的网站中应用Angular 2技术,而选择继续 使用AngularJS 1.x。 版权声明 LICENSE 1. 署名-非商业性使用 4.0 国际 2. 版权所有 (c) 2016 Harry<harry@andtoo.net> 3. 本作品采用知识共享 署名-非商业性使用 4.0 国际 许可协议进行许可。访问 4. http://creativecommons.org/licenses/by-nc/4.0/ 查看该许可协议。 5. 6. Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) 7. Copyright (c) 2016 Harry<harry@andtoo.net> 8. This work is licensed under the Creative Commons Attribution- NonCommercial 4.0 9. International License. To view a copy of this license, visit 10. http://creativecommons.org/licenses/by-nc/4.0/. 来源(书栈小编注) https://github.com/hairui219/learning_angular 本文档使用 书栈(BookStack.CN) 构建 - 10 -

11.环境的准备 环境的准备 环境的准备 WebStorm Chrome Node.js 其他工具 其他工具 环境的准备 开发Web网站,使用合适的工具和环境会极大的提升开发的效率。本章 将讲述如何准备用于AngularJS项目开发的环境。 本书将会使用如下工具和库: WebStorm - 前端开发 Chrome - Google Chrome浏览器 AngularJS - 前端JS框架 Angular Material - 前端界面框架 bower - 获取包括AngularJS在内的各种开发库 为了使用bower,您可能还需要安装如下工具: cnpm - 国内用户推荐,淘宝的npm加速服务 npm - Node.js的包管理软件 Node.js - 基于Chrome V8引擎的本地/服务端JS运行环境 1. 以上内容除去WebStorm外,都可以免费获得。WebStorm可以获取免费试用30天的版本。 2. 因此,您在学习本书的过程中,并不需要花费购买任何软件。 本文档使用 书栈(BookStack.CN) 构建 - 11 -

12.环境的准备 WebStorm 在过去的开发中,WebStorm一直是我对编辑器的首选。WebStorm是 商业化的产品,如果长期使用,需要花钱购买(目前已经支持支付宝购 买)。价格的话,如果你是一名专职的前端工作人员,可以自行购买或 者要求公司购买,个人购买的费用是第一年$59美金,我个人认为还是 非常超值的(对比工作效率的提升而言)。另外,出于个人习惯,我使 用的是英文版的WebStorm,目前网络上也存在有汉化包,如果希望使 用汉化界面的朋友可以自行搜索尝试。 在学习本书的过程中,您可以使用WebStorm的30天尝试版本(直接下 载安装即可)。30天的时间对于学习AngularJS和进行一些初级的开 发尝试完全足够了。 本书写作时使用的WebStorm版本是11.0.3。 WebStorm自8.x版本起就可以正确的开发AngularJS网站(再往前的版本没有评估)。 使用最新的11.0.3版本是在准备本书内容过程中,评估了Angular 2。 而WebStorm是从11版本才开始部分支持Angular 2的TypeScript开发。 1. 另:使用哪种编辑器更多的是个人的偏好。如果您有其他喜欢的编辑器,可以自行选择。 Chrome Chrome浏览器的开发者工具可以极大的方便开发时的调试工作,目前 国内大量浏览器也是基于Chrome的开源内核开发,在通用性上也有保 证。另外,Chrome上有支持WebStorm的插件“JetBrains IDE Support”。 由于国内网络原因,Chrome浏览器必须要连接至国外路由才能下载。 另外推荐您点击以下链接进行下载,这样可以直接下载完整的安装包 (直接在Google搜索Chrome的官网页面下载的是一个小型下载器,在 本文档使用 书栈(BookStack.CN) 构建 - 12 -

13.环境的准备 国内无法正确安装)。 Chrome完整版本下载链接 1. https://www.google.com/chrome/browser/desktop/index.html? standalone=1 本书写作时使用的Chrome版本是47.0.2526.106 m。 Chrome的版本对于应用AngularJS并不关键,本书特意安装目前的最新版本,是因为要同时评 估Angular 2, 而Angular 2必须要在非常新的浏览器上才能正确运行(v 46+)。 Node.js Node.js在本书中主要的使用用途是运行bower工具,用以安装 AngularJS极其相关的库文件。通过官网可以直接下载Node.js的安 装包(Windows/OS X都有对应的安装包)。 本书使用的Node.js版本是5.4.1(目前最新的Stable稳定版本)。 推荐安装较新的稳定版本。 其他工具 在安装好Node.js后,可以通过Node.js的npm命令安装最新版本的 npm/cnpm/bower(如果已经存在,自动安装最新版本)。 使用命令如下: Windows上打开cmd,OS X上打开Terminal。 1. //Windows 2. > npm install -g npm --registry=https://registry.npm.taobao.org 3. > npm install -g cnpm --registry=https://registry.npm.taobao.org 4. > npm install -g bower --registry=https://registry.npm.taobao.org 本文档使用 书栈(BookStack.CN) 构建 - 13 -

14.环境的准备 5. 6. //可选,将npm默认设置从淘宝服务器上获取数据 7. > npm config set registry "https://registry.npm.taobao.org" 8. 9. 10. 11. //OS X (会需要您输入本机的密码) 12. $ sudo npm install -g npm -- registry=https://registry.npm.taobao.org 13. $ sudo npm install -g cnpm -- registry=https://registry.npm.taobao.org 14. $ sudo npm install -g bower -- registry=https://registry.npm.taobao.org 15. 16. //可选,将npm默认设置从淘宝服务器上获取数据 17. $ npm config set registry "https://registry.npm.taobao.org" 所有命令后面都跟上了一个— registry=https://registry.npm.taobao.org标志,这是使用 了淘宝提供的npm镜像服务来安装所需的软件,这样访问的速度会加快 非常多。如果您优先运行了后面的可选的命令,那么之前三个命令的此 标志项都可以去除。 OS X的命令和Windows类似,但是前面都加了一个sudo,用于提权后 把这些工具安装到Node.js的公共库中。 安装完成后,请手动命令确认这几个工具的版本。(如果您安装时不成 功,请先确认Node.js工具的版本是否是最新的) 安装好后,您的几个工具的版本应该如下(或者更高): 1. $ npm -v 2. 3.5.3 3. 4. $ cnpm -v 5. 3.4.0 本文档使用 书栈(BookStack.CN) 构建 - 14 -

15.环境的准备 6. 7. $ bower -v 8. 1.7.2 其他工具 其他的工具和库,我们将不再需要从网站上下载安装,直接通过bower 在项目内进行下载使用。 本文档使用 书栈(BookStack.CN) 构建 - 15 -

16.项目的创建和配置 项目的创建和配置 项目的创建和配置 创建基本的文件结构 public 目录设置的意义 配置并初始化bower 打开命令行工具 初始化bower .bowerrc 配置文件 配置完成 项目的创建和配置 使用WebStorm可以直接创建AngularJS项目,且会自动帮助你配置好 项目并自动下载AngularJS等库。但是我们这里将创建一个新的空项 目(Empty Project),然后一步一步的将各个需要的内容填充进 来,这样我们会对使用AngularJS开发有一个更好的了解。 在WebStorm中,选择 File > New Project ,然后选择Empty Project,在右边的Location设置好项目的位置,然后点击界面右下 角的Create即可。 本文档使用 书栈(BookStack.CN) 构建 - 16 -

17.项目的创建和配置 下面我们将一步一步的完善整个项目的结构。 创建基本的文件结构 首先建立一个 public 目录,并在 public 目录中建 立 js 、 css 、 img 三个目录。如下图所示: 大家对于 js/css/img 三个目录的设置应该比较熟悉,他们分别用于存 放对应的文件, img 用于存放图片文件。 但是,为什么要把他们放置到 public 目录中呢? 本文档使用 书栈(BookStack.CN) 构建 - 17 -

18.项目的创建和配置 public 目录设置的意义 从字面意思即可理解, public 目录是用来存放供外部用户访问的内容 的根目录。非 public 目录下的内容,既是我们不期望用户通过网络链 接直接可以访问到的内容。会有哪些内容呢? 产品的文档 一些项目配置文件(如 bower 的配置文件) 测试文档 这些文件我们是绝对不希望用户可以直接访问到的,通过设置一个 public目录,并在部署时将网站的根目录直接指向到 public 目录, 即可保证目录外的内容不被暴露到网络当中。 另外,这样设置的主要原因是为了使用git将整个项目都管理起来。通 过git版本控制的方式来保证项目代码的完整性和安全性。具体的git 的操作方法就不在本文中叙述了。 配置并初始化bower bower的配置可以通过手动创建文件或者命令行的方法来进行。我推荐 使用命令行的方式来进行创建,这样可以更好的理解配置生成的文件的 内容。如果不想通过命令行创建,也可以跳过下面命令行创建的部分, 直接在下方生成的文件解析的部分,将文档内容拷贝过去。 打开命令行工具 WebStorm内置了命令行工具(调用系统的命令行功能),在左下角点 击 Terminal 即可启用。 本文档使用 书栈(BookStack.CN) 构建 - 18 -

19.项目的创建和配置 初始化bower 在命令行下运行 bower init ,你将会看到如下的若干选项,并会自动 的在项目的根目录生成一个 bower.json 。 注:以下的汉字部分都是额外加入的注释。 1. //运行命令 2. >bower init 3. 4. //第一次运行的时候会弹出,是否愿意提交匿名的统计信息。随意选择 5. ? May bower anonymously report usage statistics to improve the tool over time? Yes 6. //项目名称 7. ? name learning_angularjs 8. //项目说明 9. ? description 10. //主文件 11. ? main file 12. //项目的类型 13. ? what types of modules does this package expose? 14. //项目的关键字 15. ? keywords 16. //作者和联系方式 17. ? authors Harry <harry@andtoo.net> 本文档使用 书栈(BookStack.CN) 构建 - 19 -

20.项目的创建和配置 18. //授权方式,如果您期望这是一个私人项目,可以输入No License 19. ? license MIT 20. //项目主页 21. ? homepage 22. //是否要把当前已经安装的模块设置为项目的依赖项? 23. ? set currently installed components as dependencies? Yes 24. //将常用的忽略文件项添加到列表? 25. ? add commonly ignored files to ignore list? Yes 26. //将项目设置为私有,防止其被误发布到网络上? 27. ? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes 28. 29. //以下是生成的配置文件的预览 30. { 31. name: 'learning_angularjs', 32. authors: [ 33. 'Harry <harry@andtoo.net>' 34. ], 35. description: '', 36. main: '', 37. moduleType: [ 38. ], 39. license: 'MIT', 40. homepage: '', 41. private: true, 42. ignore: [ 43. '**/.*', 44. 'node_modules', 45. 'bower_components', 46. 'test', 47. 'tests' 48. ] 49. } 50. 51. ? Looks good? Yes 命令运行完毕后,会在项目的根目录生成一个 bower.json 文件,里面 的内容如下: 本文档使用 书栈(BookStack.CN) 构建 - 20 -

21.项目的创建和配置 1. //bower.json 2. { 3. "name": "learning_angularjs", 4. "authors": [ 5. "Harry <harry@andtoo.net>" 6. ], 7. "description": "", 8. "main": "", 9. "moduleType": [ 10. ], 11. "license": "MIT", 12. "homepage": "", 13. "private": true, 14. "ignore": [ 15. "**/.*", 16. "node_modules", 17. "bower_components", 18. "test", 19. "tests" 20. ] 21. } 如果您不希望bower配置文件这么复杂,那么可以手工最简化的创 建 bower.json 。 1. //最简化bower.json 2. { 3. "name": "learning_angularjs" 4. } 只需要一个 name 字段即可让bower好好工作了。 .bowerrc 配置文件 由于我们建立了 public 目录,并且项目的根目录与网站根目录不同, 本文档使用 书栈(BookStack.CN) 构建 - 21 -

22.项目的创建和配置 因此,我们需要新建一个额外的 .bowerrc 文件,告诉 bower 将组件库 下载到特定的目录。 在项目根目录创建 .bowerrc 文件,并在其中加入如下内容: 1. //.bowerrc 2. { 3. "directory": "public/components" 4. } 以上配置文件会告诉 bower 将文档下载到 ./public/components 目录 中。 配置完成 至此,我们对 bower 的配置已经全部结束!现在项目看起来应该长这 个样子: 本文档使用 书栈(BookStack.CN) 构建 - 22 -

23.AngularJS的第一步 AngularJS的第一步 AngularJS的第一步 在项目中安装AngularJS的基本库 建立 index.html 文件 引入AngularJS的库文件 第一个程序Hello World 运行Hello World AngularJS的第一步 在前面的章节,我们已经创建好了项目,并配置好了bower工具。本章 开始,我们将进入正式的学习使用AngularJS的过程。首先,我们将 从安装AngularJS开始。 在项目中安装AngularJS的基本库 AngularJS官网提供了通过Bower安装的命令行,我们需要做的,就 是在WebStorm的命令行工具中,运行如下命令: 1. $ bower install angular#1.5.0-rc.0 --save 结果如下所示: 1. >bower install angular#1.5.0-rc.0 --save 2. 3. bower angular#1.5.0-rc.0 cached git://github.com/angular/bower-angular.git#1.5.0-rc.0 4. bower angular#1.5.0-rc.0 validate 1.5.0-rc.0 against git://github.com/angular/bower-angular.git#1.5.0-rc.0 5. bower angular#1.5.0-rc.0 cached git://github.com/angular/bower-angular.git#1.5.0-rc.0 本文档使用 书栈(BookStack.CN) 构建 - 23 -

24.AngularJS的第一步 6. bower angular#1.5.0-rc.0 validate 1.5.0-rc.0 against git://github.com/angular/bower-angular.git#1.5.0-rc.0 7. bower angular#1.5.0-rc.0 install angular#1.5.0-rc.0 8. 9. angular#1.5.0-rc.0 public\components\angular 命令解释 这行命令告诉 bower 在这个项目中安装 angular#1.5.0-rc.0 ,也即是 AngularJS的1.5.0-rc.0版本(当前的最新版本)。 --save 标志 这个额外的标志,是告诉 bower 把我们的安装记录放置 入 bower.json 文件。这样,我们以后可以直接通过 bower 对此项目使 用的AngularJS或其他库进行更新。 此时,当我们打开 bower.json ,我们会发现文档中的内容变多了,如 下所示: 1. //bower.json 2. { 3. "name": "learning_angularjs", 4. "dependencies": { 5. "angular": "1.5.0-rc.0" 6. } 7. } 同时,项目中会多出 ./public/components/angular 目录,所有的 AngularJS的文件都在这个目录中存放。 本文档使用 书栈(BookStack.CN) 构建 - 24 -

25.AngularJS的第一步 建立 index.html 文件 在 ./public 目录下建立 index.html 文件(右键public目录, New > HTML File ,然后输入 index ,点击 OK )。WebStorm会自动帮助我 们加入基本的HTML内容。 1. <!DOCTYPE html> 2. <html lang="zh"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>学习AngularJS 1.x</title> 6. </head> 7. <body> 8. 9. </body> 10. </html> 本文档使用 书栈(BookStack.CN) 构建 - 25 -

26.AngularJS的第一步 我将 lang 从 en 改为了 zh ,标明此网站是简体中文的。同时调整 了 title 。HTML的基础并不属于本书的范围,因此不在此细述。 引入AngularJS的库文件 引入AngularJS库文件很简单,一行HTML语言加入HTML的head部分 即可: 1. <script type="text/JavaScript" src="components/angular/angular.js"> </script> 注:这里引入的angular.js是完整的版本(1M大小),如果在运行环 境中,您应该将angular.js替换为angular.min.js(148KB)。 小贴士: 将js文件放在head部分和body部分有何区别? >放在head部分的JavaScript文 件,会在body渲染完毕后才开始执行。从AngularJS工作的特性来看,推荐所有的 JavaScript文件都放在body部分引入。 第一个程序Hello World 是时候来测试下我们是否成功的引入了AngularJS了。我们在元素中 加入一个ng-app=””,然后加入一行代码 {{"Hello World!"}} 。如下 所示: 1. <!DOCTYPE html> 2. <html lang="zh"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>学习AngularJS 1.x</title> 6. </head> 7. <body ng-app=""> 8. <h1>{{"Hello World!"}}</h1> 9. <script type="text/JavaScript" src="components/angular/angular.js"></script> 本文档使用 书栈(BookStack.CN) 构建 - 26 -

27.AngularJS的第一步 10. </body> 11. </html> 运行Hello World 右键选择 index.html ,然后选择 run "index.html" ,然后你就可以在 新打开的浏览器中看到运行的效果。 如果浏览器没有自动打开? 我在Windows电脑上遇到了相同的问题,请将WebStorm使用管理员权限打开。 本文档使用 书栈(BookStack.CN) 构建 - 27 -

28.AngularJS的第一步 运行效果如下图所示: 看不到 {{ 和 }} ,就说明AngularJS已经成功运行起来了! 如果AngularJS没有成功运行,那么您看到的应该是如下内容: 1. {{"Hello World!"}} 如果出现以上结果,请您按书的前面内容仔细检查您的代码。 Hello World到此结束,下面我们将进入AngularJS的世界,学习 它,理解它,使用它! 本文档使用 书栈(BookStack.CN) 构建 - 28 -

29. 学习和使用AngularJS 学习和使用AngularJS 学习AngularJS的规划 学习AngularJS的规划 我们已经完成了基本的准备工作,从本章开始,我们将专注于学习和应 用AngularJS。 作为一个功能完整的框架,AngularJS提供了一套开发理念和方法, 我们只需要掌握这套理念和方法即可明确如何实现我们需要的功能。 根据我个人的认知,我设计了如下的学习路线图: 第四章 基本语法 1. 基本表达式 2. AngularJS初始化 ng-app 3. 控制器 ng-controller 4. 数据绑定 data-binding 5. 条件判断语句 ng-if / ng-show / ng-hide 6. 重复语句 ng-repeat 7. 过滤器 filter 8. 样式选择器 ng-class / ng-style 9. 下拉列表选项 ng-options 10. 引入 ng-include 和模板 ng-template 深入学习 1. Directive 2. 数据获取$http 3. 如何使用第三方的AngularJS扩充库 本文档使用 书栈(BookStack.CN) 构建 - 29 -