【镇楼】Angular 初学者快速上手教程(图文版)

内容介绍

特色

你可能会问: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版本。

内容列表

这个系列文章一共分11章,34个小节。

  • 1 搭建开发环境
  • 2-1 组件概述
  • 2-2 把CSS预编译器改成SASS
  • 2-3 模板
  • 2-4 组件间通讯
  • 2-5 生命周期钩子
  • 2-6 动效
  • 2-7 动态组件
  • 2-8 ShadowDOM
  • 2-9 内容投影
  • 2-10 @ContentChild@ContentChildren
  • 2-11 @ViewChild与@ViewChildren
  • 2-12 与Polymer封装组件的方式简单对比
  • 2-13 封装并发布你自己的组件库
  • 3-1 指令简介
  • 3-2 自定义指令
  • 3-3 直接在组件里面操作DOM
  • 4 模块@NgModule
  • 5-1 路由概述
  • 5-2 路由基本用法
  • 5-3 模块预加载
  • 5-4 路由守卫
  • 5-5 多重出口
  • 6-1 表单快速上手
  • 6-2 双向数据绑定
  • 6-3 表单校验
  • 6-4 模型驱动型表单
  • 6-5 动态表单
  • 7 服务
  • 8 RxJS快速上手教程
  • 9 国际化
  • 10 自动化测试
  • 11 参考资源

本系列文章对应的所有示例项目列表:

  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://github.com/damoqiongqiu/angular-seo

最后是那一句套话:水平有限,错漏难免,欢迎指正。

-------------------------------------------------这是广告分割线-------------------------------------------------

请用微信扫描以下二维码:

0_1515388785604_1.jpg

或者, 直接点这里

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

NICE

小白一只,请多关照

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

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

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

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

谢谢支持!

登录后回复

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