打开 Angular2 学习的正确姿势

ps:虽然这个是版本2可是和4差距不大,官网现在是4.0版本,如果和我一样看官网看不懂,可以利用前人的智慧来学习。

利用别人思考总结的检验看,要比自己看官方文档好的多。

如果想一起学习可以叫我qq 3351552193


图片来自自拍

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

1.1 仿制Reddit网站

1.2 起步

1.2.1 TypeScript

1.2.2 angular-cli

1.2.3 示例项目

1.3 运行应用

1.3.1 制作Component

1.3.2 导入依赖

1.3.3 Component注解

1.3.4 用templateUrl添加模板

1.3.5 添加template

1.3.6 用styleUrls添加CSS样式

1.3.7 加载组件

1.4 把数据添加到组件中

1.5 使用数组

1.6 使用UserItemComponent组件

1.6.1 渲染UserItemComponent

1.6.2 接收输入

1.6.3 传入Input值

1.7 “启动”速成班

1.8 扩展你的应用

1.8.1 添加CSS

1.8.2 应用程序组件

1.8.3 添加互动

1.8.4 添加文章组件

1.9 渲染多行

1.9.1 创建Article类

1.9.2 存储多篇文章

1.9.3 使用inputs配置ArticleComponent

1.9.4 渲染文章列表

1.10 添加新文章

1.11 最后的修整

1.11.1 显示文章所属的域名

1.11.2 基于分数重新排序

1.12 全部代码

1.13 总结

1.14 获得帮助

第2章 TypeScript 

2.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 组件selector

3.4.2 组件template

3.4.3 添加产品

3.4.4 用模板绑定来查看产品

3.4.5 添加更多产品

3.4.6 选择一个产品

3.4.7 用列出产品

3.5.1 设置ProductsList的@Component配置项

3.5.2 组件的输入

3.5.3 组件的输出

3.5.4 触发自定义事件

3.5.5 编写ProductsList的控制器类

3.5.6 编写ProdctsList的视图模板

3.6 产品条目组件

3.6.1 产品条目的组件配置

3.6.2 产品条目组件的定义类

3.6.3 产品条目组件的template

3.6.4 完整的ProductRow代码清单

3.8 价格展示组件

3.9 产品分类组件

3.10 创建NgModule并启动应用

3.11 完整的项目

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

第4章 内置指令 

4.1 简介

4.2 ngIf

4.3 ngSwitch

4.4 ngStyle

4.5 ngClass

4.6 ngFor

4.7 ngNonBindable

4.8 总结

第5章 Angular中的表单 

5.1 表单——既重要,又复杂

5.2 FormControl和FormGroup

5.2.1 FormControl

5.2.2 FormGroup

5.3 我们的第一个表单

5.3.1 加载FormsModule

5.3.2 简易SKU表单:@Component注解

5.3.3 简易SKU表单:template

5.3.4 简易SKU表单:组件定义类

5.4 使用FormBuilder

5.5 响应式表单 FormBuilder

5.5.1 使用FormBuilder

5.5.2 在视图中使用myForm

5.5.3 试试看

5.6 添加验证

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

5.6.2 自定义验证器

5.7 监听变化

5.8 ngModel

第6章 HTTP

6.1 简介

6.2 使用@angular/http

6.3 基本请求

6.3.1 构建SimpleHTTPComponent的@Component

6.3.2 构建SimpleHTTPComponent的template

6.3.3 构建SimpleHTTPComponent控制器

6.3.4 完整的SimpleHTTPComponent

6.4 编写YouTubeSearchComponent

6.4.1 编写SearchResult

6.4.2 编写YouTubeService

6.4.3 编写SearchBox

6.4.4 编写SearchResultComponent

6.4.5 编写YouTubeSearchComponent

6.5 @angular/http API

6.5.1 发起一个POST请求

6.5.2 PUT/PATCH/DELETE/HEAD

6.5.3 RequestOptions

6.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 使用调用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 SpotifyService

7.10.3 SearchComponent

7.10.4 尝试搜索

7.10.5 TrackComponent

7.10.6 音乐搜索应用小结

7.11 路由器钩子

7.11.1 AuthService

7.11.2 LoginComponent

7.11.3 ProtectedComponent组件和路由守卫

7.12 嵌套路由

7.12.1 配置路由

7.12.2 ProductsComponent组件

7.13 总结

第8章 依赖注入

8.1 注入示例:PriceService

8.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 NgModule

8.10.1 NgModule与JavaScript模块

8.10.2 编译器与组件

8.10.3 依赖注入与提供者

8.10.4 组件可见性

8.10.5 指定提供者

8.11 总结

第9章 Angular数据架构

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

10.1 可观察对象和RxJS

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

10.1.2 学习响应式编程和RxJS

10.2 聊天应用概览

10.2.1 组件

10.2.2 数据模型

10.2.3 服务

10.2.4 总结

10.3 实现数据模型

10.3.1 User

10.3.2 Thread

10.3.3 Message

10.4 实现UserService

10.4.1 currentUser流

10.4.2 设置新用户

10.4.3 UserService.ts

10.5 MessagesService

10.5.1 newMessages流

10.5.2 messages流

10.5.3 操作流模式

10.5.4 共享流

10.5.5 把Message对象添加到messages流中

10.5.6 完整的MessagesService

10.5.7 试用MessagesService

10.6 ThreadsService

10.6.1 当前一组Thread 的映射(threads流)

10.6.2 按时间逆序排列的Thread列表(orderedthreads流)

10.6.3 当前已选的Thread(currentThread流)

10.6.4 当前已选Thread的Message列表(currentThreadMessages流)

10.6.5 完整的ThreadsService

10.7 总结 251

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

11.1 构建视图:顶层组件ChatApp

11.2 ChatThreads组件

11.2.1 ChatThreads控制器

11.2.2 ChatThreads的template

11.3.1 ChatThread控制器和ngOnInit

11.3.2 ChatThread的template

11.3.3 ChatThread的完整代码

11.4 ChatWindow组件

11.4.1 ChatWindow组件类属性

11.4.2 ChatWindow的ngOnInit

11.4.3 ChatWindow的sendMessage

11.4.4 ChatWindow的onEnter

11.4.5 ChatWindow的scrollToBottom

11.4.6 ChatWindow 的template

11.4.7 处理键盘动作

11.4.8 使用ngModel

11.4.9 点击Send按钮

11.4.10 完整的ChatWindow组件

11.5.1 设置incoming属性

11.5.2 ChatMessage的template

11.6 ChatNavBar组件

11.6.1 ChatNavBar的@Component

11.6.3 ChatNavBar的template

11.6.4 完整的ChatNavBar组件

11.7 总结

11.8 更进一步

第12章 基于TypeScript的Redux简介

12.1 Redux

12.2 Redux核心概念

12.2.1 reducer是什么

12.2.2 定义Action和Reducer的接口

12.2.3 创建第一个Reducer

12.2.4 运行第一个Reducer

12.2.5 使用action调整计数器

12.2.6 reducer的switch

12.2.7 action的“参数”

12.3 保存state

12.3.1 使用store

12.3.2 使用subscribe进行通知

12.3.3 Redux核心

12.4 消息应用

12.4.1 消息应用的state

12.4.2 消息应用的action

12.4.3 消息应用的reducer

12.4.4 试用action

12.4.5 action creator

12.4.6 使用真正的Redux

12.5 在Angular中使用Redux

12.6 规划应用

12.7 组建Redux

12.7.1 定义应用的state

12.7.2 定义reducer

12.7.3 定义action creator

12.7.4 创建store

12.8 CounterApp组件

12.9 提供store

12.10 启动应用

12.11 CounterComponent

12.11.1 import

12.11.2 模板

12.11.3 constructor

12.11.4 整合

12.12 更进一步

12.13 参考资源

第13章 在Angular中引入Redux

13.1 阅读背景

13.2 聊天应用概览

13.2.1 组件

13.2.2 数据模型

13.2.3 reducer

13.2.4 总结

13.3 实现数据模型

13.3.1 User

13.3.2 Thread

13.3.3 Message

13.4 应用的state

13.4.1 关于代码布局

13.4.2 根reducer

13.4.3 UserState

13.4.4 ThreadsState

13.4.5 可视化AppState

13.5 构建reducer(和action creator)

13.5.1 设置当前用户的action creator

13.5.2 UsersReducer:设置当前用户

13.5.3 会话和消息概览

13.5.4 添加新会话的action creator

13.5.5 添加新会话的reducer

13.5.6 添加新消息的action creator

13.5.7 添加新消息的reducer

13.5.8 选择会话的action creator

13.5.9 选择会话的reducer

13.5.10 reducer总结

13.6 构建Angular聊天应用

13.6.1 顶层组件ChatApp

13.6.2 ChatPage

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

13.7.1 Redux选择器

13.7.2 会话选择器

13.7.3 未读消息总数选择器

13.8 构建ChatThreads组件

13.8.1 ChatThreads控制器

13.8.2 ChatThreads的template

13.10 构建ChatWindow组件

13.10.1 ChatWindow的updateState()

13.10.2 ChatWindow的scrollToBottom()

13.10.3 ChatWindow的sendMessage

13.10.4 ChatWindow的onEnter

13.10.6 处理键盘动作

13.10.7 使用ngModel

13.10.8 点击Send按钮

13.11 ChatMessage组件

13.11.1 设置incoming属性

13.11.2 ChatMessage的template

13.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 使用ElementRef

14.2.3 绑定到host属性

14.2.4 添加按钮并使用exportAs

14.3.1 改变host属性的CSS类

14.3.2 使用ng-content

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

14.4.1 Tab组件

14.4.2 Tabset组件

14.4.3 使用Tabset

14.5 生命周期钩子

14.5.1 OnInit和OnDestroy

14.5.2 OnChanges

14.5.3 DoCheck

14.5.4 AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked

14.6 高级模板

14.6.1 重写ngIf:ngBookIf

14.6.2 重写ngFor:ngBookRepeat

14.7 变更检测

14.7.1 自定义变更检测

14.7.2 Zones

14.7.3 可观察对象和OnPush

14.8 总结

第15章 测试 

15.1 测试驱动?

15.2 端对端测试与单元测试

15.3 测试工具

15.3.1 Jasmine

15.3.2 Karma

15.4 编写单元测试

15.5 Angular单元测试框架

15.6 测试前准备

15.7 测试服务类和HTTP

15.7.1 HTTP要点

15.7.2 伪装

15.7.3 模拟

15.7.4 Http MockBackend

15.7.5 TestBed.configureTestingModule和提供者

15.7.6 测试getTrack方法

15.8 测试组件间的路由

15.8.1 为测试创建路由器

15.8.2 模拟依赖

15.8.3 探子

15.9 回到测试代码

15.9.1 fakeAsync和advance

15.9.2 inject

15.9.3 测试ArtistComponent组件初始化

15.9.4 测试ArtistComponent方法

15.9.5 测试ArtistComponent DOM模板值

15.10 测试表单

15.10.1 创建一个ConsoleSpy

15.10.2 安装ConsoleSpy

15.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 测试YouTubeService

15.12 总结

第16章 把AngularJS应用升级到Angular

16.1 周边概念

16.2 我们要构建什么

16.3 把AngularJS映射到Angular

16.4 关于互操作性的需求

16.5 AngularJS应用

16.5.1 AngularJS应用的HTML

16.5.2 代码概览

16.5.3 AngularJS:PinsService

16.5.4 AngularJS:配置路由

16.5.5 AngularJS:HomeController

16.5.6 AngularJS:HomeController模板

16.5.7 AngularJS:pin指令

16.5.8 AngularJS:pin指令模板

16.5.10 AngularJS:AddController模板

16.5.11 AngularJS:总结

16.6 构建混合式应用

16.6.1 混合式应用的结构

16.6.2 引导混合式应用

16.6.3 我们要升级什么

16.6.4 插一小段内容:类型文件

16.6.6 使用Angular的PinControlsComponent

16.6.7 把Angular的PinControlsComponent 降级到AngularJS

16.6.8 用Angular添加图钉

16.6.9 把AngularJS的PinsService和$state升级到Angular

16.6.10 写Angular版的AddPinComponent

16.6.11 使用AddPinComponent

16.6.12 把Angular的服务暴露给AngularJS

16.6.13 实现AnalyticsService

16.6.14 把Angular的AnalyticsService降级到AngularJS

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,576评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,515评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,017评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,626评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,625评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,255评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,825评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,729评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,271评论 1 320
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,363评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,498评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,183评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,867评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,338评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,458评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,906评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,507评论 2 359

推荐阅读更多精彩内容

  • 曾经有一份美好的爱情放在我的面前我没有珍惜。等到失去后才后悔莫及。如果可以再对小李说。毛欣想说。这辈子无缘再牵手。...
    毛欣与小李阅读 2,622评论 0 13
  • 【1】7,9,-1,5,( ) A、4;B、2;C、-1;D、-3 分析:选D,7+9=16;9+(-1)=8;(...
    Alex_bingo阅读 18,953评论 1 19
  • 说一个装逼的故事《佩珀勒罗》,这是男猪脚的名字,说实话,我丈夫名字要是这么难念,分分钟就离婚。 男猪脚...
    纳儿青阅读 242评论 0 0
  • 刚刚阅读完刘同的《向着光亮那方》,抱怨身处黑暗,不如提灯前行。不论是《你的孤独 虽败尤荣》,还是《向着光亮那方》,...
    坨坨坨阅读 155评论 0 0
  • 青春是什么颜色? 为什么总用绚烂去衬托? 它不是人们用来回忆的吗? 那它应该是记忆中泛黄颜色。 都说爱情是青春里必...
    一步一小步阅读 305评论 0 1