AngularJS-1.x

下载 1

ccone

发布于

2278

人观看

#信息技术

应用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 -

21点赞

5收藏

1下载