【镇楼】Angular 基础教程(7.0)

0_1543328572134_11.jpg

内容介绍

7.0 升级记录

花了一些时间,把原来的图文教程升级了一下,对应的实例代码也做了升级,重命名成《Angular 初学者入门教程》。

  • 所有相关项目的代码都已经升级到了当前最新的 Angular 7.0 版本,NiceFish、OpenWMS、learn-*系列,保证文字内容和实例代码同步。
  • 综合最新的版本5、6、7,修订、增补了一些文本,例如 Angular 5.0 新增的8个路由事件,等等。
  • 《Angular 小专题:玩转注射器》里面的内容全部合并过来,作为第 11 章的内容。
  • 修改了一些数据和图表,使用当前最新的数据(2018-10-30)。
  • 修改了一些配图。
  • 增加3个附录,解释5.0、6.0、7.0更新了哪些内容。
  • 修改之后共有 14 章、46 篇文章。

内容特色

你可能会问:Angular的文章到处有,网上一大片,我为什么要来读你这个系列文章?

这是非常好的一个问题,说明你对阅读内容有质量要求。

如果是我,我也会问这个问题。

整体上说,这个系列的文章有以下特色:

  1. 我会按照初学者一般的学习过程,用我自己的语言一步一步进行讲解。如你所知,最近的5年我一直在玩前端方面的东西,从jQuery、SVG、ExtJS、Adobe Flex、Angular,这样一路玩过来。尤其是2016年,这一整年的时间我都代表Angular项目组在中国进行技术推广。在这5年,我在超过40家企业、开源组织、大学里面进行了大量演讲,在网络上发布了大量的视频和文章。在到处流串的过程中,认识了很多人,有经验丰富的后端开发者,也有新入行的初学者,他们跟我讲过很多自己的困惑。所以,这个系列文章里面的内容我至少反复讲过20遍以上,我会把常见的一些疑问融入在内容里面。

  2. 我会帮你扫平日常开发中常见的坑,这些坑大部分都是开发者们反馈给我的,或者说到我这里吐槽过的。举几个典型的例子:

    • 很多开发者到我这里来抱怨说,在Windows平台上安装@angular/cli会报很多error,那是因为@angular/cli在Windows平台上面依赖Python和Visual Studio环境,而很多开发者的机器上并没有安装这些东西。
    • node-sass模块被墙的问题,强烈推荐使用cnpm进行安装,可以非常有效地避免撞墙。
    • 一些开发者来抱怨说@angular/cli在打包的时候加上–prod参数会报错,无法编译。这是一个很常见的问题,因为@angular/cli最新的版本经常会有bug,只要在你项目的package.json里面降低一个小版本号就OK。
    • @angular/cli默认生成的karma.conf.js配置文件里面采用了一个有bug的html报告生成器,导致ng test运行报错,我们需要把这个reporter改成mocha(摩卡)。
    • 有一些朋友说,本地开发的时候运行得很好,上线之后所有请求404。这也是一个常见的坑,因为你需要给WEB容器配置一下处理http请求的规则,把前端路由扔回去交给Angular处理,请参考这份文档:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

    诸如此类的坑还有不少,我都是一个坑一个坑踩过来的。当然,我相信你自己也能踩过来,但是从节约时间的角度看,还是跟着我的思路走一遍更快不是吗?

  3. 这个系列的文章全部聚焦使用层面的话题,覆盖日常开发中使用频最高的特性。除非迫不得已,尽量不扯原理。长期以来,我发现有很多朋友的学习方式存在误区。比如:有一些人上来就去研究“变更检测”的原理,还有RxJS的原理,这种方式除了打击你自己的自信心之外并不能得到任何好处。因为你迟早会发现,在计算机领域,任何东西研究到最底层都和“算法”、“数据结构”、“设计模式”有关。而就我所知,很多朋友并不具备研究这些内容的基础知识,不过是白白浪费自己的时间而已。所以,我推荐采用更加务实一点的方案,首先学会如何使用,等用熟了,有时间、有闲情的时候再去研究那些底层的原理。设计发动机很难,但是学会开车并不难,对吧?所以我写这个系列的目标很简单,就是带你学会开车,而不是教你设计发动机。

  4. 这个系列的文章非常看重“概念模型”(Mental Model)的构建。我发现,很多开发者已经做过非常多的项目,但是当你跟他聊的时候,你很快就会发现他并没有掌握这门框架的精髓。打几个比方,当别人提到Spring的时候,你的大脑里面第一个想到一定是DI、IOC、AOP这些东西;当别人提到Hibernate或者Mybatis的时候,你的大脑里面立即会浮现出ORM的概念;当别人提到React的时候,你想到的应该是VDom、JSX;当别人提到jQuery的时候,你首先想到的应该是$对吧?所以,你可以看到,任何一个成功的框架都有自己独创的“概念模型”,或者叫“核心价值”也可以。这是框架本身存在的价值,也是你掌握这门框架应该紧扣的主线,而不是上来就陷入到茫茫多的技术细节里面去。

  5. 文章里面所涉及到例子总数量大约200个左右,有少量例子来自官方文档,其它都是我自己一点一点手动敲出来的。我把这些例子分成了9个开源项目,它们互相独立,方便大家进行参考和练习。这些教学用的开源项目本身是免费的,列在这篇文章的尾部。

Angular的概念模型

既然如此,问题就来了,新版本的Angular的核心概念是什么呢?

非常简单,一切都是围绕着“组件”(Component)的概念展开的:

0_1517362365796_4.png

  • Component(组件)是整个框架的核心,也是终极目标。“组件化”的意义有2个:第一是分治,因为有了组件之后,我们可以把各种逻辑封装在组件内部,避免混在一起;第二是复用,封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用。
  • NgModule(模块)是组织业务代码的利器,按照你自己的业务场景,把组件、服务、路由打包到模块里面,形成一个个的积木块,然后再用这些积木块来搭建出高楼大厦。
  • Router(路由)的角色也非常重要,它有3个重要的作用:第一是封装浏览器的History操作;第二是负责异步模块的加载;第三是管理组件的生命周期。

所以,在这个系列的文章里面,Component、NgModule、Router加起来会占据绝大部分篇幅,而一些琐碎的小特性会被忽略掉。我相信,你只要紧扣“组件化”这个主线,就能站在一个很高的角度统摄全局,从而掌握到这门框架的精髓。

适合阅读的人群

这个系列的文章适合以下人群阅读:

  • Angular新版本的初学者
  • 有AngularJS 1.x经验的开发者
  • 希望了解Angular新版本核心特性的开发者

特别注意:这个系列的文章不是前端入门读物,你至少需要会一门编程语言,无论前端还是后端都可以,如果你曾经使用过一门前端框架,那就更好了。

集中回答一些常见的问题

浏览器兼容性

关于Angular的浏览器兼容性,请看下图:

0_1517362377205_1.png

有一些国内的开发者会来争论兼容IE8的问题,我想给你两个事实:

  • 第一个事实是:截至2017年7月底,Chrome的全球市场份额已经接近60%,加上Firefox的12.28%,真的没有那么多人用IE了。
    0_1517362384496_2.png
    数据来源: https://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0
  • 第二个事实是:天猫已经于2016年4月宣布放弃支持IE6、7、8。而根据百度流量研究院的统计,IE8目前的整体市场份额已经下降到了9.31%:
    0_1517362395667_3.png
    数据来源: http://tongji.baidu.com/data/browser ,不值得为了这么少的市场份额付出那么多的研发和维护成本。

你完全可以以上两点事实去说服你的客户。

命名约定

老版本使用AngularJS指代,所有新版本都叫做Angular。原因很好理解,因为老版本是用JS开发的,所以带一个JS后缀,而新版本是基于TypeScript的,带JS后缀不合适。

关于TypeScript

这个系列的文章不会单独讲TypeScript,正如我一直强调的:TypeScript不难,JavaScript才难。你跟着我的思路,TypeScript绝对不会成为你学习Angular的障碍。相反,一旦你写熟练了之后,TypeScript可以非常有效地提升编码效率和程序可读性。

关于版本号

根据官方的解释,Angular从2.0之后会保证向下兼容,每隔半年会升级一个大版本,只有升级大版本的时候才会做一些breaking change。

所以这个系列文章里面不再强调版本号,涉及到的所有实例代码都基于目前(2017-10)最新的4.x版本。

课程结构

本课程共分3大部分、14课、46篇:

  • 第一部分:从第1课到第10课,围绕组件、模块、路由3大概念,兼顾服务、RxJS、表单、i18n等小工具,全面解释Angular的基本用法。
  • 第二部分:第11课,专门解释依赖注入,这是Angular比较有特色的内容。这部分内容比较有深度,虽然在日常开发中使用不多,但是理解它能够更加深入理解Angular。
  • 第三部分:从第12课到第14课,介绍产品级案例项目OpenWMS、一些参考资源、以及3个新版本特性附录。

本课程对应的所有示例项目列表:

  1. https://gitee.com/mumu-osc/learn-component
  2. https://gitee.com/mumu-osc/learn-directive
  3. https://gitee.com/mumu-osc/learn-router
  4. https://gitee.com/mumu-osc/learn-module
  5. https://gitee.com/mumu-osc/learn-form
  6. https://gitee.com/mumu-osc/learn-service
  7. https://gitee.com/mumu-osc/learn-test
  8. https://gitee.com/mumu-osc/learn-webpack
  9. https://gitee.com/mumu-osc/learn-dependency-injection
  10. https://github.com/damoqiongqiu/angular-seo
  11. https://gitee.com/mumu-osc/OpenWMS-Frontend
  12. https://gitee.com/mumu-osc/NiceFish

作者介绍

大漠穷秋,自由职业者。

大漠老师从业10年,5年后端开发,5年前端开发。工作期间参与或领导过多个核心业务系统和前端框架的研发工作,个人技术全面。

  • 后端方熟悉Java相关的技术体系:SpringBoot、SpringCloud、MyBatis、ElasticSearch、Mysql、Linux等。
  • 前端方面依次玩过这些技术:jQuery、Adobe Flex、Bootstrap、ExtJS、React、Angular、NodeJS、Webpack、Electron、Koa、HTML5、CSS3等。

大漠老师发起翻译过 ExtJS 2.2、ExtJS 3.2、ExtJS 4.0,总共3个版本的中文API文档,总字数超过100万,下载量超过50万份,迄今为止这些文档仍然是市面上最完善的ExtJS中文文档。

在ZTEsoft工作期间,大漠老师曾担任“产品技术战略规划委员会”常务委员,先后参与并主导了公司内部两个版本前端框架的研发工作。基于Adobe Flex的R13框架和基于jQuery体系的FISH框架都获得了非常大的成功,目前FISH已经是全公司的统一框架,被应用在超过200个项目和产品中,其中包括N个合同金额过亿元人民币的项目。

大漠老师出版过4本技术书籍:《Ext江湖》、《ActionScript 3.0 游戏设计基础(第二版)》、《用AngularJS开发下一代WEB应用》、《迈向Angular2》,更多资料和照片请看这里:http://damoqiongqiu.github.io ,大漠搭建并维护的专业Angular技术论坛在这里:http://www.ngfans.net

大漠老师曾经在包括台湾在内的50多家央企、民企、外企、开源组织等表过大量演讲,深受社区好评。2016到2017年,大漠老师曾经担任过Google Angular框架在中国的专职推广工作,title 是 Angular Developer PM。

我买啦,买了有一段时间了

NICE

小白一只,请多关照

谢谢,写得很系统、很简明,真心节省了我不少学习时间。

已经购买过了,注明了一些坑,挺好的

按照官方的计划,9月底或10月初会发布Angular 7.0 。

届时大漠老师会花时间把所有收费的视频教程、图文教程、实例代码全部升级到7.0,你们刷新就可以了,不需要再次购买。

谢谢支持!

此回复已被删除!
登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待