内容简介

《AngularJS 从入门到项目实战》以零基础讲解为宗旨，用实例引导读者深入学习，深入浅出地介绍Angular框架的各项实战 技能。
《AngularJS 从入门到项目实战》共16章，主要内容有：流行的开发框架Angular 8、掌握TypeScript基础、熟悉模板语法、精通核心组件、玩转核心指令、转换数据的管道、表单的应用、精通组件跳转的路由、自定义服务及 DOM操作、模块和懒加载、借用Bootstrap的组件等。最后讲述了5个行业热点项目实训，包括摄影 相册、Web设计与定制网站、仿星巴克网站、仿支付宝“淘票票电影”APP、仿网易云音乐网站。
《AngularJS 从入门到项目实战》适合任何想学习Angular框架的人员，无论您是否从事计算机相关行业，无论您是否接触过 Angular框架，通过学习本书内容均可快速掌握Angular框架设计的方法和技巧。
 

前 言
“从入门到项目实战”系列图书是专门为网站开发、移动开发和大数据初学者量身定做的一套学习用书。整套书具有以下特点。
前沿科技
无论是网页框架、移动开发还是大数据，精选的都是较为前沿或者用户群最多的领域，可以帮助大家认识和了解最新动态。
权威的作者团队
组织国家重点实验室和资深应用专家联手编著该套图书，融合了丰富的教学经验与优秀的管理理念。
学习型案例设计
以技术的实际应用过程为主线，全程采用图解和多媒体同步结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，以降低难度，提升学习效率。
为什么要写这样一本书
AngularJS是Google公司开发的一款Web前端框架，其源码目前托管在Github上，从其源码的关注度就可以看出AngularJS框架的火热程度。AngularJS提供了一些优秀的特性，例如双向数据绑定、MVC架构模式、指令等，能够在很大程度上降低Web前端开发的难度，因此深受广大Web前端开发人员的喜爱。AngularJS框架的功能虽然强大，但是对于初学者来说入门比较困难，主要是因为AngularJS有别于传统的Web前端框架，指令、路由、服务等概念都是其他前端框架所不具备的。纵观AngularJS图书市场，英文图书居多，而中文图书则以翻译为主，缺少一本真正适合初学者入门的书籍。因此选择精通掌握AngularJS技术作为本书编写的思路，本书知识点从易到难，讲解详细且透彻，结构合理，非常适合没有基础的读者学习。
本书特色
零基础、入门级的讲解
无论您是否从事计算机相关行业，无论您是否接触过Angular框架，都能从本书中找到最佳起点。
实用、专业的范例和项目
本书从Angular框架基本操作开始，带领读者逐步学习Angular框架的各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者学起来简明轻松，操作起来有章可循。
随时随地学习
本书提供了微课视频，通过手机扫码即可观看，随时随地解决学习中的困惑。
细致入微、贴心提示
本书在讲解过程中，安排了“注意”“提示”“技巧”等小栏目，使读者在学习过程中能更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。
超值资源大放送
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分使您得到比书中更多的收获。
超多容量王牌资源
赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88 个实用类网页模板、12 部网页开发必备参考手册、HTML5 标签速查手册、精选的JavaScript 实例、CSS3 属性速查表、JavaScript 函数速查手册、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web 前端工程师常见面试题等。
读者对象
„ 没有任何AngularJS 框架开发基础的初学者。
„ 有一定的AngularJS 框架开发基础，想精通前端框架开发的人员。
„ 有一定的网页前端设计基础，没有项目经验的人员。
„ 大专院校及培训学校的老师和学生。
创作团队
本书由裴雨龙编著，参加编写的人员还有李艳恩、刘春茂、李佳康、刘尧、刘辉。在编写过程中，我们虽竭尽所能将最好的讲解呈现给读者，但难免有疏漏和不妥之处，敬请读者不吝指正。
编者
 

目 录
第1章 Angular 的基础知识         001
1.1 Angular简介     001
1.1.1　AngularJS是什么       001
1.1.2　Angular+和AngularJS的区别        002
1.1.3　Angular的发展历程           002
1.2 环境搭建          003
1.2.1　安装Node.js        003
1.2.2　安装Angular-cli         006
1.2.3　安装开发工具     007
1.3 创建第一个项目       009
1.3.1　创建项目      009
1.3.2　运行项目      010
1.3.3　项目结构介绍     011
第2章 TypeScript基础知识        014
2.1 基础类型          014
2.2 变量声明          017
2.2.1　var声明        017
2.2.2　let声明          019
2.3 类     021
2.3.1　属性     021
2.3.2　方法     022
2.3.3　构造函数      023
2.3.4　继承     024
2.3.5　修饰符          025
2.4 函数           027
2.4.1　函数类型      028
2.4.2　可选参数和默认参数         029
2.4.3　剩余参数      030
第3章 熟悉模板语法            031
3.1 模板中的HTML       031
3.2 插值与模板表达式   032
3.2.1　插值表达式         032
3.2.2　模板表达式         033
3.2.3　表达式上下文     033
3.3 模板语句          034
3.4 绑定语法          035
3.5 属性绑定([属性名])         036
3.5.1　单向输入      037
3.5.2　绑定目标      037
3.5.3　选择属性绑定还是插值     038
3.6 attribute、class和style绑定         038
3.6.1　attribute绑定       039
3.6.2　CSS类绑定         040
3.6.3　样式绑定      040
3.7 事件绑定(event)     041
3.8 双向数据绑定([(  )])         042
3.9 内置模板函数          046
3.10 生命周期        046
第4章 精通核心组件            049
4.1 了解组件          049
4.1.1　创建组件      049
4.1.2　导入依赖      051
4.1.3　Component 注解         051
4.1.4　添加template       052
4.1.5　用styleUrls 添加CSS 样式       052
4.2 挂载组件          053
4.3 组件中的模板          054
4.3.1　绑定数据      054
4.3.2　绑定属性      056
4.3.3　绑定HTML         057
4.3.4　引入图片      058
4.4 父子组件之间的通信         058
4.4.1　父组件给子组件传值         059
4.4.2　父组件通过@ViewChild 主动获取子组件的数据和方法        062
第5 章 玩转核心指令             064
5.1 内置指令          064
5.1.1　ngIf       064
5.1.2　ngSwitch       065
5.1.3　ngStyle          066
5.1.4　ngClass          067
5.1.5　ngFor             068
5.1.6　ngNonBindable           071
5.2 自定义指令      072
5.3 案例实战：实现任务“备忘录”     073
第6 章 转换数据的管道               076
6.1 使用管道          076
6.2 内置的管道       077
6.2.1　大小写转换管道        077
6.2.2　日期格式转换管道    078
6.2.3　小数位数管道     078
6.2.4　货币管道      079
6.2.5　对象序列化管道        080
6.2.6　slice 管道             080
6.3 管道参数          081
6.4 链式管道          082
6.5 自定义管道       083
6.5.1　实现自定义管道        083
6.5.2　组合双向数据绑定    085
第7 章 表单的应用     087
7.1 Angular 表单简介    087
7.2 响应式表单      089
7.2.1　添加表单控件     090
7.2.2　管理控件的值     091
7.2.3　把表单控件分组        092
7.2.4　保存表单数据     094
7.2.5　嵌套的表单组     095
7.2.6　部分模型更新     097
7.2.7　使用FormBuilder 生成表单控件     098
7.2.8　表单验证      099
7.2.9　使用表单数组管理动态控件    101
7.2.10　响应式表单API       103
7.3 模板驱动表单          104
第8 章 精通组件跳转的路由          112
8.1 路由的意义        112
8.2 路由的定义        113
8.2.1　创建带路由的项目    113
8.2.2　routerLinkActive 指令         116
8.3 路由嵌套（父子路由）      116
8.4 路由的对象       120
8.5 辅助路由          123
8.6 路由守卫          126
8.6.1　CanActivate 守卫        127
8.6.2　CanDeactivate      128
第9 章 自定义服务及DOM 操作           130
9.1 自定义服务       130
9.1.1　仿京东APP 搜索缓存数据功能      130
9.1.2　实现任务备忘录功能         132
9.2 DOM 操作        134
9.2.1　原生JS 操作DOM    134
9.2.2　使用ViewChild 操作DOM       136
9.2.3　父子组件中通过ViewChild 调用子组件的方法     137
9.2.4　实现轮播图效果        139
第10 章 模块和懒加载           143
10.1 自定义模块     143
10.1.1　自定义模块的意义  144
10.1.2　自定义一个模块      145
10.1.3　在自定义模块中创建组件      146
10.1.4　挂载自定义模块及组件          147
10.1.5　自定义模块访问自身组件      149
10.2 配置路由模块懒加载       150
10.2.1　创建懒加载项目      150
10.2.2　实现模块懒加载      151
10.2.3　在子模块中配置路由       153
第11 章 借用Bootstrap 的组件           156
11.1 配置环境         156
11.2 按钮组件         157
11.2.1　定义按钮            158
11.2.2　设计按钮风格           158
11.3 按钮组组件     161
11.3.1　定义按钮组        161
11.3.2　定义按钮组工具栏   162
11.3.3　设计按钮组布局和样式           163
11.4 导航组件         165
11.4.1　定义导航            165
11.4.2　设计导航的布局       166
11.4.3　设计导航的风格       167
11.4.4　设计导航选项卡       170
11.5 徽章         172
11.5.1　定义徽章            172
11.5.2　设置颜色            174
11.5.3　椭圆形徽章        174
11.6 警告框            175
11.6.1　定义警告框        175
11.6.2　添加链接            177
11.6.3　关闭警告框        178
11.7 进度条            178
11.7.1　定义进度条        179
11.7.2　设计进度条样式       179
11.7.3　设计进度条风格       181
11.8 列表组            183
11.8.1　定义列表组        183
11.8.2　设计列表组的风格样式           184
11.8.3　定制内容            187
11.9 面包屑            188
11.9.1　定义面包屑        188
11.9.2　设计分隔符        189
11.10 分页       190
11.10.1　定义分页          190
11.10.2　使用图标          191
11.10.3　设计分页风格         192
11.11 旋转器特效          195
11.11.1　定义旋转器      195
11.11.2　设计旋转器风格     196
11.11.3　对齐旋转器      198
11.11.4　按钮旋转器      199
11.12 卡片       200
11.12.1　定义卡片          200
11.12.2　卡片风格          201
第12 章 摄影相册      204
12.1 项目概述        204
12.1.1　设计效果           204
12.1.2　设计准备           207
12.2 设计导航栏     207
12.3 首页         209
12.3.1　设计相册展示          209
12.3.2　添加Swipebox 灯箱插件        211
12.4 分类页            214
12.4.1　设计相册分类展示  214
12.4.2　添加Swipebox 灯箱插件        217
12.5 博客         219
12.6 联系页            220
12.7 项目重要文件        222
12.7.1　根模块（app.module.ts）        222
12.7.2　路由文件（app-routing.module.ts）        223
第13 章 Web 设计与定制网站             224
13.1 网站概述        224
13.1.1　网站布局           224
13.1.2　设计准备           224
13.2 设计主页面导航     224
13.3 设计主页面内容     227
13.3.1　设计首页           227
13.3.2　关于我们           229
13.3.3　我们的团队       230
13.3.4　我们的服务       233
13.3.5　我们的博客       234
13.3.6　我们的定制       235
13.4 设计脚注        237
第14 章 仿星巴克网站           239
14.1 网站概述        239
14.1.1　设计效果           239
14.1.2　设计准备           240
14.2 设计首页布局        241
14.3 设计可切换导航     242
14.4 主体内容        247
14.4.1　设计轮播广告区      248
14.4.2　设计产品推荐区      249
14.4.3　设计登录注册和logo       250
14.4.4　设计特色展示区      251
14.4.5　设计产品生产流程区       253
14.5 设计底部隐藏导航          255
第15 章 仿支付宝“淘票票电影”APP         257
15.1 准备工作        257
15.1.1　开发环境           257
15.1.2　搭建Angular 脚手架        257
15.1.3　创建项目组件          261
15.2 设计项目组件        262
15.2.1　设计头部和底部导航组件      262
15.2.2　设计电影页面组件  265
15.2.3　设计影院页面组件  276
15.2.4　设计我的页面组件  279
15.3 设计主组件     281
15.3.1　电影页面组件          281
15.3.2　影院页面组件          284
15.3.3　我的页面组件          285
15.4 项目的重要文件     286
15.4.1　主页面（index.html）      286
15.4.2　根模块（app.module.ts）        287
15.4.3　路由文件（app-routing.
module.ts）        287
15.4.4　项目公共样式（style.css）     288
15.4.5　根组件（app.component）      288
第16 章 仿网易云音乐网站            290
16.1 准备工作        290
16.1.1　开发环境           290
16.1.2　创建项目           290
16.1.3　模块设计           293
16.1.4　数据来源           295
16.1.5　定义数据的类型      297
16.2 页面的头部和脚注设计          299
16.3 轮播组件        301
16.4 推荐歌单        305
16.5 歌手列表        308
16.6 底部播放器      311
16.7 滑块组件        315
16.8 ngrx 状态管理        316
16.9 实现播放器功能     319
16.10 播放列表和歌词   325
16.11 歌单列表       331
16.12 歌单详情页          333
16.13 歌曲的详情页面   339
16.14 搜索功能      343