Angular权威教程 读后感(下)@阿狸不歌

Angular权威教程 读后感(上)

第六章 Http  

除非只是一个Demo,否则你的Angular程序总要和后端数据打交道,这个时候就离不开Http模块了。  本章主要是通过一些相对简单的例子来介绍Angular Http模块的使用,包括:  

(1)如何注入HttpModule

(2)编写最基本的http request,请求一个网址,并获得JSON响应数据

(3)编写高级一些的带参数的 http 请求,但是要注意 ⚠️  的是该例子访问的是youtube的API,所以你要想获得code example里的响应数据就得搭梯子。

(4)用RxJS处理返回数据(response)。

如果没有接触过RxJS,对于Observable(可观察对象) 这样的写法可能会感到不适应,不过也没有太大关系,本书作者非常体贴的拿出了两个章节的篇幅来介绍“可观察对象”架构,更深入的资料可以参考RxJS文档(⚠️ 要看rxjs 5.x的),还有中文参考


第七章 路由

如果是了解Angular.JS 1.x 的朋友会熟悉基于锚点标记的路由(hash-based routing)方式,例如 http://domain.com/#/login

在Angular 2/4 当中,这种方式依然是得到支持的,但是官方文档里强烈建议我们采用HTML5路由模式,即更加自然的路由:

http://domain.com/login

本章对于两种实现方式都给出了例子,那么——

哪种策略更好?

我们必须选择一种策略,并且在项目的早期就这么干。一旦该应用进入了生产阶段,要改起来可就不容易了,因为外面已经有了大量对应用URL的引用。

目前看来,几乎所有的Angular项目都会使用默认的HTML 5风格。它生成的URL更易于被用户理解,它也为将来做服务端渲染预留了空间。

在服务器端渲染指定的页面,是一项可以在该应用首次加载时大幅提升响应速度的技术。那些原本需要十秒甚至更长时间加载的应用,可以预先在服务端渲染好,并在少于一秒的时间内完整呈现在用户的设备上。

只有当应用的URL看起来像是标准的Web URL,中间没有hash(#)时,这个选项才能生效。

除非你有强烈的理由不得不使用锚点标记路由,否则就应该坚决使用默认的HTML 5路由风格。

本章还非常详细的介绍了嵌套路由的开发过程,使得我们能够结合组件(component)开发出具有非常复杂UI的单页面系统,这在angular1.x时是一级很麻烦的事情,然而我们新版的路由系统已经把这件事解决的很好了,甚至为了兼顾路由系统的版本号,把Angular的版本号从2.x直接跳级到4.x,所以大家就放心的用吧。

对于需要更深入了解Angular路由的朋友,建议看看Angular团队重要成员Victor Savkin 的写的Angular路由一书。

图5 Angular Router

第八章 依赖注入

依赖注入(Dependency injection)是重要的程序设计模式。 Angular 有一套自己的依赖注入框架,离开了它,你就没法玩 Angular 程序了。 实际上DI在angular.js 1.x的时候被引入的,而且也是ng1.x的最重要特色之一,但是写起来有时候挺麻烦的;而在Angular2/4中,DI的使用就大大的被化简了。

我们可以把注入器看作new操作符的替代品,也就是说,不依赖于使用语言提供的new操作符,依赖注入让我们配置并创建对象。

本章开头以一个PriceService为例,介绍了使用依赖注入的好处:依靠DI我们可以得到一个更加松耦合的架构。这时,当修改某个单一部件(component)时,对程序中其他区域的影响就小多了。同时,只要这些部件之间的接口没有变,我们甚至可以在不修改其他部件中实现代码的情况下集体更换它们。

对于PriceService这个例子,需要指出的是,中文版书中的代码与英文最新版有些差异(英文版中采用了了“价格接口” IPriceService),所以要想更好的理解这个例子请阅读源代码。

图6 依赖注入的组成过程

如图6所示:在Angular的DI系统中,我们不是直接导入和创建一个类的新实例,而是通过以下步骤:

(1)注册“依赖关系”

(2)描述如何注入依赖关系

(3)用注入器注入依赖关系

本章后半部分则介绍了如何用NgModule来组织注入依赖,关于NgModule的内容,大家还可以参考Angular中文官网的文档。



第九章 Angular数据架构

实际上这一章是一个Angular高级编程的入口,介绍了Angular数据架构的几种方式,这些不同的方式代表着解决问题的不同思路:

第十、十一章介绍的是官方的可观察者模式(Observable),通过RxJS来实现。

第十二、十三章则介绍的是React上大火的Redux模式。 

鉴于本书的这几章写的已经很详细,笔者主要补充一些自己收集到的资料并谈谈看法。


第十、十一章 使用可观察对象的数据架构

如果没有接触过响应式编程(reactive programming),则你可能需要看看一些预备材料,比如《你不容错过的响应式编程入门(中文版)》。

在异步数据处理方式上有很多种方式:回调、Promise、Observable...

Callback对于写JS的人来说都不会陌生,Promise相比Callback在代码可读性和可维护性上都提高了不少,能够避免回调陷阱。

Promise是ng1.x里主要采用的方法,下面谈谈Promise和Observable的区别:

Promise的特点:(1)一次请求返回一个值;(2)不可被撤销。

Observable的特点:(1)随着时间的推移可以使用多个值;(2)可以被撤销;(3)支持map、 filter,、reduce、forEach等操作符。

那么是不是在Angular2/4中就一定要使用Observable呢?

这可不一定,还是要分使用场景的,如果你的数据就是需要发出一次请求获得一个结果,依然可以用Promise,其实我们很多情况下就是这种场景,我们只需要关心这个数据是获取成功还是没有成功就行了。关于这点可以参看这篇文章《Stop using observable when you should use a promise(该用promise的时候就别用observable)》。

大部分时候,使用Promise 是更好地选择,我们通常会用http.get()获取单块数据。只要接收到数据,就算完成。 使用Promise这种形式的结果是让调用方更容易写,并且Promise已经在 JavaScript 程序员中被广泛接受了。

但是请求并非总是“一次性”的。我们可以开始一个请求, 并且取消它,在服务器对第一个请求作出回应之前,再开始另一个不同的请求 。 

一个请求-取消-新请求的序列用Promise是很难实现的,但是对Observable来说则很容易。

Observable适合用在数据以Stream(流式数据)出现的实时应用场景,比如聊天室、股票、游戏…… 在这些场景下,数据会从服务端源源不断的推送过来,而用户的响应也随时会改变所需要的数据和数据的展现形式,这个时候Observable的强大功能就发挥出来了。第十章的例子就是一个比较经典的聊天室场景,如果写个支持websocket的服务端,那就是一个聊天室的雏形了;第十一章则是在视图层面,用组件(component)配合聊天数据的展现。


第十二、十三章 Angular 与 Redux

第十二章介绍了怎样用TypeScript来写Redux,并且结合Angular实现了一个迷你计数器。

第十三章则用Redux的方式把第十、十一章的聊天室程序重构了一遍。

Redux的设计思想能在Angular中实现,表明Angular架构具有很大的灵活性,实际上把React.JS和Angular2/4放在一起也没有问题,有兴趣的可以参考ngReact项目。


第十四章 高级组件

组件(component)是Angular2/4的基石,事实上,我们前面的每一个章节都离不开组件,而我们也可以利用Angular提供给我们的API根据需要去构建更加复杂、漂亮、功能更加强大的高级组件,我们甚至可以自定义模版语法,比如像例子中的在“ngIf”的基础上构造出“ngBookIf”语法。

在这个方面 ionic 2/3 可以说是非常经典的例子,这是一套深度实践并封装了Angular 2/4的高级框架,特别适用于移动开发。

Angular Material 项目则是Angular官方支持的以Material风格定义的组件库。

如果要深入学习Angular高级组件开发,还可以参考下面这本书 《Angular 2 Components

图7 Angular 组件开发

第十五章 测试

驱动测试开发(TDD)现在已经是非常主流的开发方式了,而且从产品角度出发,为了提高代码的质量,甚至很多开发者提倡测试要写在开发的前面。

熟悉JS自动测试的朋友一定很熟悉Jasmine和Karma这两个工具。

Angular自身提供了一套基于Jasmine框架的辅助类,位于@angular/core/testing包当中,我们照着书上一步步来就可以比较轻松的学习到Angular的测试流程。

Angular2/4在提供测试功能方面做了大量的工作,使得我们可以轻松地测试应用程序的方方面面:从控制器到服务类、表单和HTTP、异步代码测试等等……。

Angular Test-Driven Development》此书深入介绍了用TDD的方式开发Angular,指导我们何时,为什么以及如何应用测试技术和最佳实践来创建优质清洁代码。

图8 Angular 驱动测试开发

第十六章 从Angular.JS 1.x 升级到 Angular 2/4

如果你已经有Angular.JS 1.x 的项目,需要向Angular 2/4 过渡,没关系,Angular.JS 1.x 和Angular 2/4 的互操作性已经相当完善。

Angular提供了一种方式来启动你的Angular.JS 1.x应用,然后在其中写Angular的组件和服务。写完Angular组件,只要把它和Angular.JS 1.x 组件混在一起就可以了。另外,依赖注入体系也支持在Angular.JS和Angular之间双向传递数据,因此你写的服务在AngularJS和Angular中都能运行。



最后:

由于已经拜读过了ng book 2/4 的英文版,所以此次我对中文版的阅读速度其实是挺快的,在读后感写作过程中也添加了一些我个人收集的一些资料,希望对大家有所帮助。在中文版阅读过程中,我着重注意英文版中一些比较难理解的地方在中文版里的翻译情况,总体而言,我感觉翻译的还是比较流畅自然的,这确实是一本译者们注入了心血的大作,所以在读后感最后再次表示对他们的感谢🙏  ,同时也感谢图灵出了这么一本好书。💻📖



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

推荐阅读更多精彩内容