Angular权威教程【2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载】

Angular权威教程PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 编写你的第一个Angular Web应用1

1.1 仿制Reddit网站1

1.2 起步3

1.2.1 TypeScript3

1.2.2 angular-cli3

1.2.3 示例项目4

1.3 运行应用7

1.3.1 制作Component8

1.3.2 导入依赖9

1.3.3 Component注解10

1.3.4 用templateUrl添加模板11

1.3.5 添加template11

1.3.6 用styleUrls添加CSS样式12

1.3.7 加载组件12

1.4 把数据添加到组件中13

1.5 使用数组15

1.6 使用UserItemComponent组件18

1.6.1 渲染UserItemComponent18

1.6.2 接收输入19

1.6.3 传入Input值20

1.7 “启动”速成班21

1.8 扩展你的应用22

1.8.1 添加CSS24

1.8.2 应用程序组件24

1.8.3 添加互动26

1.8.4 添加文章组件29

1.9 渲染多行36

1.9.1 创建Article类36

1.9.2 存储多篇文章40

1.9.3 使用inputs配置ArticleComponent41

1.9.4 渲染文章列表42

1.10 添加新文章44

1.11 最后的修整44

1.11.1 显示文章所属的域名44

1.11.2 基于分数重新排序45

1.12 全部代码45

1.13 总结45

1.14 获得帮助46

第2章 TypeScript47

2.1 Angular是用TypeScript构建的47

2.2 TypeScript提供了哪些特性48

2.3 类型49

2.4 内置类型50

2.4.1 字符串50

2.4.2 数字50

2.4.3 布尔类型51

2.4.4 数组51

2.4.5 枚举51

2.4.6 任意类型52

2.4.7 “无”类型52

2.5 类52

2.5.1 属性52

2.5.2 方法53

2.5.3 构造函数54

2.5.4 继承55

2.6 工具57

2.6.1 胖箭头函数57

2.6.2 模板字符串58

2.7 总结59

第3章 Angular的工作原理60

3.1 应用60

3.1.1 主导航组件61

3.1.2 面包屑导航组件61

3.1.3 产品列表组件62

3.2 产品数据模型64

3.3 组件64

3.4 组件注解66

3.4.1 组件selector66

3.4.2 组件template67

3.4.3 添加产品67

3.4.4 用模板绑定来查看产品68

3.4.5 添加更多产品69

3.4.6 选择一个产品70

3.4.7 用〈products-list〉列出产品70

3.5 产品列表组件73

3.5.1 设置ProductsList的@Component配置项73

3.5.2 组件的输入74

3.5.3 组件的输出77

3.5.4 触发自定义事件78

3.5.5 编写ProductsList的控制器类79

3.5.6 编写ProdctsList的视图模板80

3.5.7 完整的ProductsList组件81

3.6 产品条目组件83

3.6.1 产品条目的组件配置83

3.6.2 产品条目组件的定义类84

3.6.3 产品条目组件的template84

3.6.4 完整的ProductRow代码清单85

3.7 产品图片组件85

3.8 价格展示组件86

3.9 产品分类组件87

3.10 创建NgModule并启动应用88

3.11 完整的项目89

3.12 关于数据架构的一点说明90

第4章 内置指令91

4.1 简介91

4.2 ngIf91

4.3 ngSwitch92

4.4 ngStyle93

4.5 ngClass95

4.6 ngFor98

4.7 ngNonBindable102

4.8 总结102

第5章 Angular中的表单103

5.1 表单——既重要，又复杂103

5.2 FormControl和FormGroup103

5.2.1 FormControl104

5.2.2 FormGroup104

5.3 我们的第一个表单105

5.3.1 加载FormsModule106

5.3.2 简易SKU表单：@Component注解107

5.3.3 简易SKU表单：template107

5.3.4 简易SKU表单：组件定义类110

5.3.5 试试看110

5.4 使用FormBuilder111

5.5 响应式表单FormBuilder112

5.5.1 使用FormBuilder112

5.5.2 在视图中使用myForm113

5.5.3 试试看114

5.6 添加验证115

5.6.1 显式地把sku设置为实例变量116

5.6.2 自定义验证器120

5.7 监听变化121

5.8 ngModel122

5.9 总结124

第6章 HTTP125

6.1 简介125

6.2 使用@angular/http126

6.3 基本请求127

6.3.1 构建SimpleHTTPComponent的@Component127

6.3.2 构建SimpleHTTPComponent的template128

6.3.3 构建SimpleHTTPComponent控制器128

6.3.4 完整的SimpleHTTP-Component130

6.4 编写YouTubeSearchComponent130

6.4.1 编写SearchResult132

6.4.2 编写YouTubeService132

6.4.3 编写SearchBox140

6.4.4 编写SearchResult-Component145

6.4.5 编写YouTubeSearch-Component147

6.5 @angular/http API150

6.5.1 发起一个POST请求150

6.5.2 PUT/PATCH/DELETE/HEAD150

6.5.3 RequestOptions151

6.6 总结151

第7章 路由152

7.1 为什么需要路由152

7.2 客户端路由的工作原理153

7.2.1 初级阶段：使用锚标记153

7.2.2 进化：HTML5客户端路由154

7.3 编写第一个路由配置155

7.4 Angular路由的组成部件155

7.4.1 导入155

7.4.2 路由配置155

7.4.3 安装路由配置156

7.4.4 使用〈router-outlet〉调用RouterOutlet指令157

7.4.5 使用［routerLink］调用routerLink指令158

7.5 整合159

7.5.1 创建组件160

7.5.2 应用程序组件161

7.5.3 配置路由163

7.6 路由策略164

7.7 路径定位策略165

7.8 运行应用程序165

7.9 路由参数167

7.10 音乐搜索应用168

7.10.1 首要步骤169

7.10.2 SpotifyService170

7.10.3 SearchComponent171

7.10.4 尝试搜索179

7.10.5 TrackComponent180

7.10.6 音乐搜索应用小结182

7.11 路由器钩子182

7.11.1 AuthService183

7.11.2 LoginComponent184

7.11.3 ProtectedComponent组件和路由守卫186

7.12 嵌套路由190

7.12.1 配置路由191

7.12.2 ProductsComponent组件191

7.13 总结194

第8章 依赖注入195

8.1 注入示例：PriceService196

8.2 “别打给我们……”197

8.3 依赖注入的部件199

8.4 尝试注入器200

8.5 用NgModule提供依赖201

8.6 提供者202

8.6.1 使用类202

8.6.2 使用工厂203

8.6.3 使用值205

8.6.4 使用别名205

8.7 应用中的依赖注入205

8.8 使用注入器207

8.9 替换值211

8.10 NgModule215

8.10.1 NgModule与JavaScript模块215

8.10.2 编译器与组件215

8.10.3 依赖注入与提供者216

8.10.4 组件可见性217

8.10.5 指定提供者218

8.11 总结219

第9章 Angular数据架构220

第10章 使用可观察对象的数据架构，第1部分：服务222

10.1 可观察对象和RxJS222

10.1.1 注意：一些必备的RxJS相关知识222

10.1.2 学习响应式编程和RxJS223

10.2 聊天应用概览224

10.2.1 组件225

10.2.2 数据模型226

10.2.3 服务226

10.2.4 总结226

10.3 实现数据模型227

10.3.1 User227

10.3.2 Thread227

10.3.3 Message228

10.4 实现UserService228

10.4.1 currentUser流229

10.4.2 设置新用户230

10.4.3 UserService.ts231

10.5 MessagesService231

10.5.1 newMessages流231

10.5.2 messages流233

10.5.3 操作流模式233

10.5.4 共享流234

10.5.5 把Message对象添加到messages流中235

10.5.6 完整的MessagesService238

10.5.7 试用MessagesService241

10.6 ThreadsService242

10.6.1 当前一组Thread的映射（threads流）242

10.6.2 按时间逆序排列的Thread列表（orderedthreads流）246

10.6.3 当前已选的Thread（currentThread流）246

10.6.4 当前已选Thread的Message列表（currentThread-Messages流）248

10.6.5 完整的ThreadsService250

10.7 总结251

第11章 使用可观察对象的数据架构，第2部分：视图组件252

11.1 构建视图：顶层组件ChatApp252

11.2 ChatThreads组件254

11.2.1 ChatThreads控制器255

11.2.2 ChatThreads的template255

11.3 单个ChatThread组件256

11.3.1 ChatThread控制器和ngOnInit257

11.3.2 ChatThread的template258

11.3.3 ChatThread的完整代码258

11.4 ChatWindow组件259

11.4.1 ChatWindow组件类属性260

11.4.2 ChatWindow的ngOnInit261

11.4.3 ChatWindow的send-Message261

11.4.4 ChatWindow的onEnter262

11.4.5 ChatWindow的scrollTo-Bottom262

11.4.6 ChatWindow的template263

11.4.7 处理键盘动作264

11.4.8 使用ngModel264

11.4.9 点击Send按钮265

11.4.10 完整的ChatWindow组件265

11.5 ChatMessage组件267

11.5.1 设置incoming属性268

11.5.2 ChatMessage的template268

11.5.3 完整的ChatMessage代码清单270

11.6 ChatNavBar组件273

11.6.1 ChatNavBar的@Component273

11.6.2 ChatNavBar控制器273

11.6.3 ChatNavBar的template274

11.6.4 完整的ChatNavBar组件275

11.7 总结276

11.8 更进一步277

第12章 基于TypeScript的Redux简介278

12.1 Redux279

12.2 Redux核心概念280

12.2.1 reducer是什么280

12.2.2 定义Action和Reducer的接口281

12.2.3 创建第一个Reducer281

12.2.4 运行第一个Reducer282

12.2.5 使用action调整计数器283

12.2.6 reducer的switch284

12.2.7 action的“参数”285

12.3 保存state286

12.3.1 使用store287

12.3.2 使用subscribe进行通知287

12.3.3 Redux核心290

12.4 消息应用291

12.4.1 消息应用的state291

12.4.2 消息应用的action292

12.4.3 消息应用的reducer292

12.4.4 试用action295

12.4.5 action creator296

12.4.6 使用真正的Redux297

12.5 在Angular中使用Redux299

12.6 规划应用299

12.7 组建Redux300

12.7.1 定义应用的state300

12.7.2 定义reducer301

12.7.3 定义action creator301

12.7.4 创建store302

12.8 CounterApp组件303

12.9 提供store304

12.10 启动应用305

12.11 CounterComponent306

12.11.1 import306

12.11.2 模板306

12.11.3 constructor307

12.11.4 整合308

12.12 更进一步310

12.13 参考资源310

第13章 在Angular中引入Redux312

13.1 阅读背景312

13.2 聊天应用概览313

13.2.1 组件313

13.2.2 数据模型314

13.2.3 reducer315

13.2.4 总结315

13.3 实现数据模型315

13.3.1 User315

13.3.2 Thread316

13.3.3 Message316

13.4 应用的state316

13.4.1 关于代码布局317

13.4.2 根reducer317

13.4.3 UserState318

13.4.4 ThreadsState318

13.4.5 可视化AppState319

13.5 构建reducer（和action creator）321

13.5.1 设置当前用户的action creator321

13.5.2 UsersReducer：设置当前用户321

13.5.3 会话和消息概览322

13.5.4 添加新会话的action creator322

13.5.5 添加新会话的reducer323

13.5.6 添加新消息的action creator324

13.5.7 添加新消息的reducer325

13.5.8 选择会话的action creator326

13.5.9 选择会话的reducer327

13.5.10 reducer总结328

13.6 构建Angular聊天应用328

13.6.1 顶层组件ChatApp330

13.6.2 ChatPage330

13.6.3 容器型组件与展示型组件331

13.7 构建ChatNavBar332

13.7.1 Redux选择器334

13.7.2 会话选择器334

13.7.3 未读消息总数选择器336

13.8 构建ChatThreads组件336

13.8.1 ChatThreads控制器337

13.8.2 ChatThreads的template338

13.9 单个ChatThread组件338

13.10 构建ChatWindow组件340

13.10.1 ChatWindow的update-State（）341

13.10.2 ChatWindow的scrollToBottom（）342

13.10.3 ChatWindow的sendMessage342

13.10.4 ChatWindow的onEnter343

13.10.5 ChatWindow的template343

13.10.6 处理键盘动作345

13.10.7 使用ngModel345

13.10.8 点击Send按钮345

13.11 ChatMessage组件345

13.11.1 设置incoming属性346

13.11.2 ChatMessage的template346

13.12 总结347

第14章 高级组件349

14.1 样式349

14.1.1 视图（样式）封装351

14.1.2 Shadow DOM封装354

14.1.3 不使用封装355

14.2 创建popup指令：引用并修改宿主元素357

14.2.1 popup指令的结构357

14.2.2 使用ElementRef359

14.2.3 绑定到host属性360

14.2.4 添加按钮并使用exportAs362

14.3 使用内容投影创建消息面板363

14.3.1 改变host属性的CSS类364

14.3.2 使用ng-content364

14.4 查询相邻的指令：编写标签页366

14.4.1 Tab组件367

14.4.2 Tabset组件367

14.4.3 使用Tabset369

14.5 生命周期钩子370

14.5.1 OnInit和OnDestroy371

14.5.2 OnChanges374

14.5.3 DoCheck378

14.5.4 AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked386

14.6 高级模板391

14.6.1 重写ngIf：ngBookIf392

14.6.2 重写ngFor：ngBook-Repeat394

14.7 变更检测398

14.7.1 自定义变更检测401

14.7.2 Zones405

14.7.3 可观察对象和OnPush406

14.8 总结409

第15章 测试410

15.1 测试驱动？410

15.2 端对端测试与单元测试411

15.3 测试工具411

15.3.1 Jasmine411

15.3.2 Karma412

15.4 编写单元测试412

15.5 Angular单元测试框架412

15.6 测试前准备413

15.7 测试服务类和HTTP415

15.7.1 HTTP要点416

15.7.2 伪装417

15.7.3 模拟417

15.7.4 Http MockBackend418

15.7.5 TestBed.configureTes-tingModule和提供者418

15.7.6 测试getTrack方法419

15.8 测试组件间的路由424

15.8.1 为测试创建路由器424

15.8.2 模拟依赖427

15.8.3 探子427

15.9 回到测试代码429

15.9.1 fakeAsync和advance431

15.9.2 inject432

15.9.3 测试ArtistComponent组件初始化432

15.9.4 测试ArtistComponent方法433

15.9.5 测试ArtistComponent DOM模板值434

15.10 测试表单436

15.10.1 创建一个ConsoleSpy438

15.10.2 安装ConsoleSpy439

15.10.3 配置测试模块439

15.10.4 测试表单440

15.10.5 重构表单测试441

15.11 测试HTTP请求444

15.11.1 测试POST方法445

15.11.2 测试DELETE方法446

15.11.3 测试HTTP头447

15.11.4 测试YouTubeService448

15.12 总结452

第16章 把AngularJS应用升级到Angular453

16.1 周边概念453

16.2 我们要构建什么454

16.3 把AngularJS映射到Angular455

16.4 关于互操作性的需求456

16.5 AngularJS应用456

16.5.1 AngularJS应用的HTML458

16.5.2 代码概览458

16.5.3 AngularJS：PinsService459

16.5.4 AngularJS：配置路由460

16.5.5 AngularJS：HomeContro-ller461

16.5.6 AngularJS：HomeContro-ller模板461

16.5.7 AngularJS：pin指令462

16.5.8 AngularJS：pin指令模板462

16.5.9 AngularJS：AddContro-ller463

16.5.10 AngularJS：AddContro-ller模板465

16.5.11 AngularJS：总结467

16.6 构建混合式应用468

16.6.1 混合式应用的结构468

16.6.2 引导混合式应用471

16.6.3 我们要升级什么473

16.6.4 插一小段内容：类型文件475

16.6.5 写Angular的PinControls-Component479

16.6.6 使用Angular的PinCon-trolsComponent481

16.6.7 把Angular的PinControls-Component降级到AngularJS482

16.6.8 用Angular添加图钉483

16.6.9 把AngularJS的PinsSer-vice和$state升级到Angular484

16.6.10 写Angular版的AddPin-Component485

16.6.11 使用AddPinComponent490

16.6.12 把Angular的服务暴露给AngularJS490

16.6.13 实现AnalyticsService491

16.6.14 把Angular的Analytics-Service降级到AngularJS491

16.6.15 在AngularJS中使用AnalyticsService492

16.7 总结493

16.8 参考资源493