小苏子
小苏子PDF在线图书

Angular权威教程 内容简介

Angular权威教程 内容简介

Angular权威教程 目录

Angular权威教程 精彩文摘

本书堪称Angular领域的里程碑式著作,涵盖了关于Angular的几乎所有内容。对于没有经验的人,本书平实、通俗的讲解,递进、严密的组织,可以让人毫无压力地登堂入室,迅速领悟新一代Web应用开发的精髓。如果你有相关经验,那本书对Angular概念和技术细节的全面剖析,以及引人入胜、切中肯綮的讲解,将帮助你彻底掌握这个框架,在自己职业技术修炼之路上更进一步。第1章 编写你的第一个Angular Web应用1.1 仿制Reddit网站1.2 起步1.2.1 TypeScript1.2.2 angular-cli1.2.3 示例项目1.3 运行应用1.3.1 制作Component1.3.2 导入依赖1.3.3 Component注解1.3.4 用templateUrl添加模板1.3.5 添加template1.3.6 用styleUrls添加CSS样式1.3.7 加载组件1.4 把数据添加到组件中1.5 使用数组1.6 使用UserItemComponent组件1.6.1 渲染UserItemComponent1.6.2 接收输入1.6.3 传入Input值1.7 “启动”速成班1.8 扩展你的应用1.8.1 添加CSS1.8.2 应用程序组件1.8.3 添加互动1.8.4 添加文章组件1.9 渲染多行1.9.1 创建Article类1.9.2 存储多篇文章1.9.3 使用inputs配置ArticleComponent1.9.4 渲染文章列表1.10 添加新文章1.11 最后的修整1.11.1 显示文章所属的域名1.11.2 基于分数重新排序1.12 全部代码1.13 总结1.14 获得帮助第2章 TypeScript2.1 Angular是用TypeScript构建的2.2 TypeScript提供了哪些特性2.3 类型2.4 内置类型2.4.1 字符串2.4.2 数字2.4.3 布尔类型2.4.4 数组2.4.5 枚举2.4.6 任意类型2.4.7 “无”类型2.5 类2.5.1 属性2.5.2 方法2.5.3 构造函数2.5.4 继承2.6 工具2.6.1 胖箭头函数2.6.2 模板字符串2.7 总结第3章 Angular的工作原理3.1 应用3.1.1 主导航组件3.1.2 面包屑导航组件3.1.3 产品列表组件3.2 产品数据模型3.3 组件3.4 组件注解3.4.1 组件selector3.4.2 组件template3.4.3 添加产品3.4.4 用模板绑定来查看产品3.4.5 添加更多产品3.4.6 选择一个产品3.4.7 用〈products-list〉列出产品3.5 产品列表组件3.5.1 设置ProductsList的@Component配置项3.5.2 组件的输入3.5.3 组件的输出3.5.4 触发自定义事件3.5.5 编写ProductsList的控制器类3.5.6 编写ProdctsList的视图模板3.5.7 完整的ProductsList组件3.6 产品条目组件3.6.1 产品条目的组件配置3.6.2 产品条目组件的定义类3.6.3 产品条目组件的template3.6.4 完整的ProductRow代码清单3.7 产品图片组件3.8 价格展示组件3.9 产品分类组件3.10 创建NgModule并启动应用3.11 完整的项目3.12 关于数据架构的一点说明第4章 内置指令4.1 简介4.2 ngIf4.3 ngSwitch4.4 ngStyle4.5 ngClass4.6 ngFor4.7 ngNonBindable4.8 总结第5章 Angular中的表单5.1 表单——既重要,又复杂5.2 FormControl和FormGroup5.2.1 FormControl5.2.2 FormGroup5.3 我们的第一个表单5.3.1 加载FormsModule5.3.2 简易SKU表单:@Component注解5.3.3 简易SKU表单:template5.3.4 简易SKU表单:组件定义类5.3.5 试试看5.4 使用FormBuilder5.5 响应式表单FormBuilder5.5.1 使用FormBuilder5.5.2 在视图中使用myForm5.5.3 试试看5.6 添加验证5.6.1 显式地把sku设置为实例变量5.6.2 自定义验证器5.7 监听变化5.8 ngModel5.9 总结第6章 HTTP6.1 简介6.2 使用@angular/http6.3 基本请求6.3.1 构建SimpleHTTPComponent的@Component6.3.2 构建SimpleHTTPComponent的template6.3.3 构建SimpleHTTPComponent控制器6.3.4 完整的SimpleHTTP-Component6.4 编写YouTubeSearchComponent6.4.1 编写SearchResult6.4.2 编写YouTubeService6.4.3 编写SearchBox6.4.4 编写SearchResult-Component6.4.5 编写YouTubeSearch-Component6.5 @angular/http API6.5.1 发起一个POST请求6.5.2 PUT/PATCH/DELETE/HEAD6.5.3 RequestOptions6.6 总结第7章 路由7.1 为什么需要路由7.2 客户端路由的工作原理7.2.1 初级阶段:使用锚标记7.2.2 进化:HTML5客户端路由7.3 编写第一个路由配置7.4 Angular路由的组成部件7.4.1 导入7.4.2 路由配置7.4.3 安装路由配置7.4.4 使用〈router-outlet〉调用RouterOutlet指令7.4.5 使用[routerLink]调用routerLink指令7.5 整合7.5.1 创建组件7.5.2 应用程序组件7.5.3 配置路由7.6 路由策略7.7 路径定位策略7.8 运行应用程序7.9 路由参数7.10 音乐搜索应用7.10.1 首要步骤7.10.2 SpotifyService7.10.3 SearchComponent7.10.4 尝试搜索7.10.5 TrackComponent7.10.6 音乐搜索应用小结7.11 路由器钩子7.11.1 AuthService7.11.2 LoginComponent7.11.3 ProtectedComponent组件和路由守卫7.12 嵌套路由7.12.1 配置路由7.12.2 ProductsComponent组件7.13 总结第8章 依赖注入8.1 注入示例:PriceService8.2 “别打给我们⋯⋯”8.3 依赖注入的部件8.4 尝试注入器8.5 用NgModule提供依赖8.6 提供者8.6.1 使用类8.6.2 使用工厂8.6.3 使用值8.6.4 使用别名8.7 应用中的依赖注入8.8 使用注入器8.9 替换值8.10 NgModule8.10.1 NgModule与JavaScript模块8.10.2 编译器与组件8.10.3 依赖注入与提供者8.10.4 组件可见性8.10.5 指定提供者8.11 总结第9章 Angular数据架构第10章 使用可观察对象的数据架构,第1部分:服务10.1 可观察对象和RxJS10.1.1 注意:一些必备的RxJS相关知识10.1.2 学习响应式编程和RxJS10.2 聊天应用概览10.2.1 组件10.2.2 数据模型10.2.3 服务10.2.4 总结10.3 实现数据模型10.3.1 User10.3.2 Thread10.3.3 Message10.4 实现UserService10.4.1 currentUser流10.4.2 设置新用户10.4.3 UserService.ts10.5 MessagesService10.5.1 newMessages流10.5.2 messages流10.5.3 操作流模式10.5.4 共享流10.5.5 把Message对象添加到messages流中10.5.6 完整的MessagesService10.5.7 试用MessagesService10.6 ThreadsService10.6.1 当前一组Thread的映射(threads流)10.6.2 按时间逆序排列的Thread列表(orderedthreads流)10.6.3 当前已选的Thread(currentThread流)10.6.4 当前已选Thread的Message列表(currentThread-Messages流)10.6.5 完整的ThreadsService10.7 总结第11章 使用可观察对象的数据架构,第2部分:视图组件11.1 构建视图:顶层组件ChatApp11.2 ChatThreads组件11.2.1 ChatThreads控制器11.2.2 ChatThreads的template11.3 单个ChatThread组件11.3.1 ChatThread控制器和ngOnInit11.3.2 ChatThread的template11.3.3 ChatThread的完整代码11.4 ChatWindow组件11.4.1 ChatWindow组件类属性11.4.2 ChatWindow的ngOnInit11.4.3 ChatWindow的send-Message11.4.4 ChatWindow的onEnter11.4.5 ChatWindow的scrollTo-Bottom11.4.6 ChatWindow的template11.4.7 处理键盘动作11.4.8 使用ngModel11.4.9 点击Send按钮11.4.10 完整的ChatWindow组件11.5 ChatMessage组件11.5.1 设置incoming属性11.5.2 ChatMessage的template11.5.3 完整的ChatMessage代码清单11.6 ChatNavBar组件11.6.1 ChatNavBar的@Component11.6.2 ChatNavBar控制器11.6.3 ChatNavBar的template11.6.4 完整的ChatNavBar组件11.7 总结11.8 更进一步第12章 基于TypeScript的Redux简介12.1 Redux12.2 Redux核心概念12.2.1 reducer是什么12.2.2 定义Action和Reducer的接口12.2.3 创建第一个Reducer12.2.4 运行第一个Reducer12.2.5 使用action调整计数器12.2.6 reducer的switch12.2.7 action的“参数”12.3 保存state12.3.1 使用store12.3.2 使用subscribe进行通知12.3.3 Redux核心12.4 消息应用12.4.1 消息应用的state12.4.2 消息应用的action12.4.3 消息应用的reducer12.4.4 试用action12.4.5 action creator12.4.6 使用真正的Redux12.5 在Angular中使用Redux12.6 规划应用12.7 组建Redux12.7.1 定义应用的state12.7.2 定义reducer12.7.3 定义action creator12.7.4 创建store12.8 CounterApp组件12.9 提供store12.10 启动应用12.11 CounterComponent12.11.1 import12.11.2 模板12.11.3 constructor12.11.4 整合12.12 更进一步12.13 参考资源第13章 在Angular中引入Redux13.1 阅读背景13.2 聊天应用概览13.2.1 组件13.2.2 数据模型13.2.3 reducer13.2.4 总结13.3 实现数据模型13.3.1 User13.3.2 Thread13.3.3 Message13.4 应用的state13.4.1 关于代码布局13.4.2 根reducer13.4.3 UserState13.4.4 ThreadsState13.4.5 可视化AppState13.5 构建reducer(和action creator)13.5.1 设置当前用户的action creator13.5.2 UsersReducer:设置当前用户13.5.3 会话和消息概览13.5.4 添加新会话的action creator13.5.5 添加新会话的reducer13.5.6 添加新消息的action creator13.5.7 添加新消息的reducer13.5.8 选择会话的action creator13.5.9 选择会话的reducer13.5.10 reducer总结13.6 构建Angular聊天应用13.6.1 顶层组件ChatApp13.6.2 ChatPage13.6.3 容器型组件与展示型组件13.7 构建ChatNavBar13.7.1 Redux选择器13.7.2 会话选择器13.7.3 未读消息总数选择器13.8 构建ChatThreads组件13.8.1 ChatThreads控制器13.8.2 ChatThreads的template13.9 单个ChatThread组件13.10 构建ChatWindow组件13.10.1 ChatWindow的update-State()13.10.2 ChatWindow的scrollToBottom()13.10.3 ChatWindow的sendMessage13.10.4 ChatWindow的onEnter13.10.5 ChatWindow的template13.10.6 处理键盘动作13.10.7 使用ngModel13.10.8 点击Send按钮13.11 ChatMessage组件13.11.1 设置incoming属性13.11.2 ChatMessage的template13.12 总结第14章 高级组件14.1 样式14.1.1 视图(样式)封装14.1.2 Shadow DOM封装14.1.3 不使用封装14.2 创建popup指令:引用并修改宿主元素14.2.1 popup指令的结构14.2.2 使用ElementRef14.2.3 绑定到host属性14.2.4 添加按钮并使用exportAs14.3 使用内容投影创建消息面板14.3.1 改变host属性的CSS类14.3.2 使用ng-content14.4 查询相邻的指令:编写标签页14.4.1 Tab组件14.4.2 Tabset组件14.4.3 使用Tabset14.5 生命周期钩子14.5.1 OnInit和OnDestroy14.5.2 OnChanges14.5.3 DoCheck14.5.4 AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked14.6 高级模板14.6.1 重写ngIf:ngBookIf14.6.2 重写ngFor:ngBook-Repeat14.7 变更检测14.7.1 自定义变更检测14.7.2 Zones14.7.3 可观察对象和OnPush14.8 总结第15章 测试15.1 测试驱动?15.2 端对端测试与单元测试15.3 测试工具15.3.1 Jasmine15.3.2 Karma15.4 编写单元测试15.5 Angular单元测试框架15.6 测试前准备15.7 测试服务类和HTTP15.7.1 HTTP要点15.7.2 伪装15.7.3 模拟15.7.4 Http MockBackend15.7.5 TestBed.configureTes-tingModule和提供者15.7.6 测试getTrack方法15.8 测试组件间的路由15.8.1 为测试创建路由器15.8.2 模拟依赖15.8.3 探子15.9 回到测试代码15.9.1 fakeAsync和advance15.9.2 inject15.9.3 测试ArtistComponent组件初始化15.9.4 测试ArtistComponent方法15.9.5 测试ArtistComponent DOM模板值15.10 测试表单15.10.1 创建一个ConsoleSpy15.10.2 安装ConsoleSpy15.10.3 配置测试模块15.10.4 测试表单15.10.5 重构表单测试15.11 测试HTTP请求15.11.1 测试POST方法15.11.2 测试DELETE方法15.11.3 测试HTTP头15.11.4 测试YouTubeService15.12 总结第16章 把AngularJS应用升级到Angular16.1 周边概念16.2 我们要构建什么16.3 把AngularJS映射到Angular16.4 关于互操作性的需求16.5 AngularJS应用16.5.1 AngularJS应用的HTML16.5.2 代码概览16.5.3 AngularJS:PinsService16.5.4 AngularJS:配置路由16.5.5 AngularJS:HomeContro-ller16.5.6 AngularJS:HomeContro-ller模板16.5.7 AngularJS:pin指令16.5.8 AngularJS:pin指令模板16.5.9 AngularJS:AddContro-ller16.5.10 AngularJS:AddContro-ller模板16.5.11 AngularJS:总结16.6 构建混合式应用16.6.1 混合式应用的结构16.6.2 引导混合式应用16.6.3 我们要升级什么16.6.4 插一小段内容:类型文件16.6.5 写Angular的PinControls-Component16.6.6 使用Angular的PinCon-trolsComponent16.6.7 把Angular的PinControls-Component降级到AngularJS16.6.8 用Angular添加图钉16.6.9 把AngularJS的PinsSer-vice和$state升级到Angular16.6.10 写Angular版的AddPin-Component16.6.11 使用AddPinComponent16.6.12 把Angular的服务暴露给AngularJS16.6.13 实现AnalyticsService16.6.14 把Angular的Analytics-Service降级到AngularJS16.6.15 在AngularJS中使用AnalyticsService16.7 总结16.8 参考资源附录1.1 仿制Reddit网站在本章中,我们将构建一个应用,它能让用户发表推荐文章(包括标题和URL)并对每篇文章投票。你可以把该应用看作类似于Reddit 或Product Hunt 的起步版网站。这个简单的应用将涵盖Angular中的大部分基本要素,包括:构建自定义组件;从表单中接收用户输入;把对象列表渲染到视图中;拦截用户的点击操作,并据此作出反应。读完本章之后,你将掌握如何构建基本的Angular应用。图1-1展示了该应用最终完成后的界面截图。首先,用户将提交一个新的链接。之后,其他用户可以对每篇文章投票:“顶”或“踩”。每个链接都有一个最终得票数,我们可以对自己认为有用的链接投票(如图1-2所示)。图1-1 完成后的应用图1-2 包含新文章的应用在本项目和整本书中,我们都将使用TypeScript。TypeScript是JavaScript ES6版的一个超集,增加了类型支持。本章不会深入讲解TypeScript;如果你熟悉ES5(“普通”的JavaScript)或ES6(ES2015),那么在后续的学习过程中应该不会有什么问题。在第2章中,我们将更深入地学习TypeScript。因此,即使你对某些新语法不太熟悉,也不必担心。

赞(0)
未经允许不得转载:小苏子图书 » Angular权威教程 内容简介