正版 MEAN全栈开发:使用Mongo、Express、Angular和Node

第Ⅰ部分 设置基线

章 全栈开发介绍 3

1.1 为何学习全栈 4

1.1.1 Web开发简史 4

1.1.2 全栈开发的趋势 6

1.1.3 学习全栈开发的益处 7

1.1.4 为何专门介绍MEAN 7

1.2 Node.js介绍 8

1.2.1 JavaScript：MEAN技术栈中唯一的语言 9

1.2.2 快速、高效和可扩展 9

1.2.3 通过npm使用预构建的包 12

1.3 Express介绍 13

1.3.1 简化服务器配置 13

1.3.2 路由响应URL 13

1.3.3 视图：HTML响应 13

1.3.4 通过会话记录访问者的信息 14

1.4 MongoDB介绍 14

1.4.1 关系数据库与文档数据库 14

1.4.2 MongoDB文档：JavaScript数据存储 15

1.4.3 不止是文档数据库 16

1.4.4 MongoDB的不足之处 16

1.4.5 Mongoose：关于数据建模更多的事 16

1.5 Angular介绍 17

1.5.1 jQuery和Angular 18

1.5.2 双向数据绑定：处理页面中的数据 18

1.5.3 使用Angular加载新页面 18

1.5.4 Angular的缺陷 19

1.5.5 使用TypeScript进行开发 20

1.6 相关配套支持 20

1.6.1 使用Twitter Bootstrap创建用户界面 20

1.6.2 使用Git管理源代码的版本 21

1.6.3 使用Heroku作为主机 22

1.7 结合实际示例将它们结合到一起 22

1.7.1 介绍应用程序示例 22

1.7.2 MEAN技术栈组件如何协同工作 24

1.8 本章小结 24

第2章 设计MEAN技术栈架构 27

2.1 通用的MEAN技术栈架构 27

2.2 进一步了解单页面应用 28

2.2.1 对搜索引擎不友好 29

2.2.2 Google Analytics和浏览器历史记录 30

2.2.3 初始化速度 30

2.2.4 选择单页面应用还是非单页面应用 31

2.3 设计一种灵活的MEAN架构 32

2.3.1 博客引擎需求 32

2.3.2 博客引擎架构 33

2.3.3 最佳实践：为数据层构建内部API 36

2.4 规划真实的应用程序 37

2.4.1 整体规划应用程序 38

2.4.2 设计应用程序的架构 39

2.4.3 将所有内容封装到Express项目中 41

2.4.4 最终产品 42

2.5 将开发按阶段规划 42

2.5.1 快速成型的开发阶段 43

2.5.2 构建Loc8r的步骤 44

2.6 硬件架构 50

2.6.1 开发环境需要的硬件 50

2.6.2 生产环境需要的硬件 50

2.7 本章小结 52

第Ⅱ部分 构建Node Web应用程序

第3章 创建并设置MEAN项目 55

3.1 Express、Node和npm简介 57

3.1.1 使用package.json定义包 57

3.1.2 package.json文件中的依赖版本号 58

3.1.3 使用npm安装Node依赖 58

3.2 创建Express项目 60

3.2.1 安装工具 60

3.2.2 查看安装状态 61

3.2.3 创建项目文件夹 61

3.2.4 配置Express 61

3.2.5 创建并运行Express项目 63

3.2.6 重启应用程序 66

3.3 支持MVC的Express 67

3.3.1 MVC总览 68

3.3.2 改变文件夹结构 68

3.3.3 使用改变位置后的视图和路由 69

3.3.4 从路由中拆分控制器 71

3.4 导入Bootstrap以快速实现响应式布局 74

3.4.1 下载并添加Bootstrap到应用程序中 74

3.4.2 在应用程序中使用Bootstrap 75

3.5 使用Heroku 78

3.5.1 设置Heroku 78

3.5.2 使用Git将网站发布到线上URL 80

3.6 本章小结 83

第4章 使用Node和Express构建静态站点 85

4.1 定义Express路由 86

4.2 构建基本控制器 89

4.2.1 设置控制器 89

4.2.2 测试控制器和路由 91

4.3 创建视图 92

4.3.1 使用Bootstrap 93

4.3.2 使用Pug模板和Bootstrap设置HTML框架 94

4.3.3 构建模板 99

4.4 添加其他视图 103

4.4.1 地点详情页 104

4.4.2 添加评论页 108

4.4.3 添加关于页 109

4.5 将数据从视图中分离，让视图更智能 111

4.5.1 将数据从视图移到控制器 113

4.5.2 处理复杂的重复数据模型 115

4.5.3 操作数据和视图 119

4.5.4 使用include和mixin创建可重用的布局组件 120

4.5.5 查看主页 122

4.5.6 更新其他视图和控制器 124

4.6 本章小结 125

第5章 使用MongoDB和Mongoose构建数据模型 127

5.1 使用Mongoose将Express应用程序连接到MongoDB 129

5.2 为什么要为数据建模 137

5.3 定义简单的Mongoose模式 141

5.4 使用MongoDB shell创建MongoDB数据库并添加数据 156

5.5 将数据库发布到线上环境 161

5.6 本章小结 169

第6章 编写REST API：向应用程序公开MongoDB数据库 171

6.1 REST API规则 172

6.2 在Express中设置API 177

6.3 GET请求方式：从MongoDB读取数据 184

6.4 Post请求方式：向MongoDB添加数据 198

6.5 PUT请求方式：更新MongoDB数据 206

6.6 DELETE请求方式：删除MongoDB数据 211

6.7 本章小结 215

第7 章 消费REST API：使用来自 Express内部的API 217

7.1 如何调用Express API 218

7.2 使用API返回列表数据：Loc8r主页 221

7.3 从API获取单个文档：Details页面 232

7.4 通过API向数据库添加数据：添加Loc8r用户评论 242

7.5 通过数据验证保护数据完整性 249

7.6 本章小结 256

第Ⅲ部分 使用Angular创建动态页面

第8章 使用TypeScript开发Angular应用程序 259

8.1 创建并运行Angular 260

8.2 开发 Angular 组件 269

8.3 从API接口中获取数据 284

8.4 在生产环境中部署Angular应用程序 292

8.5 本章小结 295

第9章 使用Angular开发单页面应用：基础 297

9.1 为Angular SPA添加跳转功能 298

9.2 使用多个嵌套组件构建模块化的应用程序 306

9.3 根据地理位置查找附近地点 316

9.4 安全绑定 HTML片段 324

9.5 挑战 328

9.6 本章小结 329

0章 使用Angular开发单 页面应用：进阶 331

10.1 处理更复杂的视图和路由参数 332

10.2 处理表单和提交数据 349

10.3 优化现有架构 362

10.4 使用SPA替换服务器端应用程序 371

10.5 本章小结 375

第Ⅳ部分 管理身份认证和用户会话

1章 认证用户、管理会话和 API安全 379

11.1 如何在MEAN技术栈中实现身份认证功能 380

11.2 为MongoDB创建user模式 384

11.3 使用Passport创建身份认证API 391

11.4 保护相关的API终端 400

11.5 本章小结 406

2章 在Angular应用程序中 使用身份认证API 407

12.1 创建Angular身份认证服务 407

12.2 创建Register和Login页面 414

12.3 在Angular应用程序中使用身份认证 423

12.4 本章小结 434

附录A 安装MEAN技术栈 435

附录B 安装其他技术栈 439

附录C 改造所有视图 447

附录D 再次介绍JavaScript 457

"Simon Holmes从2000年开始从事全栈开发工作，同时也是一名解决方案架构师、讲师、团队领导和项目经理。他还经营着一家培训公司，名为Full Stack Training Ltd。Simon 的开发经验很好丰富，通过实际工作中的指导和训练，他很好了解人们的痛点。 Clive Harber从13岁开始编写计算机程序。他从威尔士斯望西大学取得化学工程硕士学位，多年来为体育和博彩业、电信、医疗保健和零售业编写过使用多种编程语言和不同范例的代码。现阶段，他希望能够为编程社区贡献自己的力量。Clive曾担任Manning出版社其他书籍的审校者和技术审校者，包括《Vue.js实战》、Testing Vue.js Applications、《React实战》、Elixir in Action、Mesos in Action、Usability Matters、《Mountebank微服务测试》、Cross-Platform Desktop Applications和Web Components in Action。 "

JavaScript已经很完善了。开发时，从前端到后端都可以使用 JavaScript(即使采用TypeScript开发)。MEAN技术栈由Web领域中*的那些技术组合而成。数据库采用MongoDB，服务器端Web服务框架选择Express，客户端框架则是Angular，而Node.js则是服务器端运行平台。 《MEAN全栈开发（第2版）》将分别介绍这些技术，还将介绍如何将它们集成在一起。通过《MEAN全栈开发（第2版）》，你将会创建一个可运行的应用程序，逐一学习构建这个应用程序的每项技术，并学习如何将这些技术集成到应用程序的整体架构中。因此，这是一本实用的书，旨在让你实践所有这些技术，并将它们结合起来使用。 贯穿《MEAN全栈开发（第2版）》的主题思想就是“*实践”。希望借此能够帮助读者使用 MEAN 技术栈创造的应用程序。因此，《MEAN全栈开发（第2版）》将会关注如何建立良好的开发习惯、正确的开发方式，以及如何制订开发计划。 我们假设读者已经具备HTML、CSS(Cascading Style Sheets，层叠样式表)和JavaScript方面的基础知识，因此不会对它们进行过多解释。《MEAN全栈开发（第2版）》会简单介绍 Twitter 的BootStrap CSS框架和TypeScript。附录D将全面讨论JavaScript理论知识、*实践、开发技巧，以及开发过程中经常遇到的陷阱。尽可能提前阅读附录D。 《MEAN全栈开发（第2版）》组织结构 《MEAN全栈开发（第2版）》分为四大部分，共12章。 第Ⅰ部分包括第1和2章，其中第1章将会介绍学习全栈开发的好处，并探讨MEAN技术栈的组件。第2章则会根据第1章介绍如何使用这些组件，并将它们集成在一起。 第Ⅱ部分包括第3～7章，其中第3章将通过创建一个MEAN项目，让你了解Express。第4章将会创建一个静态的应用程序，以便你更加深入地学习Express。第5章则会将之前介绍的知识与MongoDB以及Mongoose整合在一起，根据需求设计并实现一个数据模型。第6章将会介绍如何建立数据API(Application Programming Interface，应用程序编程接口)以及数据API的优点，之后将会使用Express、MongoDB 以及Mongoose创建一个REST(Representational State Transfer，表述性状态转移)API。第7章会将这个REST API集成到Express应用程序中。 第Ⅲ部分包括第8～10章，第8章介绍Angular和TypeScript，主要内容包括如何使用这两种技术为已有的网页创建组件，并调用REST API以获取数据。第9章涵盖使用Angular创建单页面应用(Single Page Application，SPA)的基础知识。第10章则以第9章为基础，更深入地介绍一些关键技术，并进一步开发这个SPA应用程序，添加实用的功能。 第Ⅳ部分包括第11和12章，在第11章中将为应用程序增加一个身份认证API，以实现用户注册和登录功能。在第11章中，你将全面了解MEAN技术栈。第12章则会开发这个身份认证API，完成后将在Angular应用程序中调用它，创建仅注册用户才能使用的功能，并介绍SPA中的其他*实践。 关于代码 书中的代码可通过扫描封底的二维码来。 应用程序的每一个里程碑都有单独的文件夹(GitHub中有对应的分支)，通常在每章的结尾处可以找到。为了遵循*实践，这些文件夹(或分支)中不会包含 node_modules文件夹。需要在命令行中使用npm install命令安装依赖，才能运行应用程序。书中将会具体讲解以及演示这么做的必要性。

本书使用Mongo、Express、Angular和Node》将指导你使用MEAN技术栈开发Web应用程序。本书秉承实用的原则，*开始的几章将引导你使用Express和Node搭建一个静态。之后以这个静态为基础，整合MongoDB数据库，构建 API 并增加身份验证功能。随着学习的深入，你将掌握关于创建动态、响应式以及数据驱动的Web应用程序的大量专业知识。