AngularJS从入门到项目实战

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

作者长期从事网站开发工作，数年来承接了大量的项目，具有丰富的实践经验。

目 录 第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