您的位置:首页 >  新闻中心 > 行业动态
  行业动态
 

Angular 初学者如何快速上手?

来源:原创    时间:2017-11-16    浏览:0 次

你可能会问: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 处理,请参考这份文档。
 
诸如此类的坑还有不少,我都是一个坑一个坑踩过来的。当然,我相信你自己也能踩过来,但是从节约时间的角度看,还是跟着我的思路走一遍更快不是吗?
 
3)这个系列的文章全部聚焦使用层面的话题,覆盖日常开发中使用频最高的特性。除非迫不得已,尽量不扯原理。长期以来,我发现有很多朋友的学习方式存在误区。比如:有一些人上来就去研究“变更检测”的原理,还有 RxJS 的原理,这种方式除了打击你自己的自信心之外并不能得到任何好处。因为你迟早会发现,在计算机领域,任何东西研究到最底层都和“算法”、“数据结构”、“设计模式”有关。而就我所知,很多朋友并不具备研究这些内容的基础知识,不过是白白浪费自己的时间而已。所以,我推荐采用更加务实一点的方案,首先学会如何使用,等用熟了,有时间、有闲情的时候再去研究那些底层的原理。设计发动机很难,但是学会开车并不难,对吧?所以我写这个系列的目标很简单,就是带你学会开车,而不是教你设计发动机。
 
4)这个系列的文章非常看重“概念模型”( Mental Model )的构建。我发现,很多开发者已经做过非常多的项目,但是当你跟他聊的时候,你很快就会发现他并没有掌握这门框架的精髓。打几个比方,当别人提到 Spring 的时候,你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西;当别人提到 Hibernate 或者 Mybatis 的时候,你的大脑里面立即会浮现出 ORM 的概念;当别人提到 React 的时候,你想到的应该是 VDom、JSX;当别人提到 jQuery 的时候,你首先想到的应该是$对吧?所以,你可以看到,任何一个成功的框架都有自己独创的“概念模型”,或者叫“核心价值”也可以。这是框架本身存在的价值,也是你掌握这门框架应该紧扣的主线,而不是上来就陷入到茫茫多的技术细节里面去。
 
5)文章里面所涉及到例子总数量大约 200 个左右,有少量例子来自官方文档,其它都是我自己一点一点手动敲出来的。我把这些例子分成了9个开源项目,它们互相独立,方便大家进行参考和练习。这些教学用的开源项目本身是免费的,列在这篇文章的尾部。
 
Angular 的概念模型
既然如此,问题就来了,新版本的 Angular 的核心概念是什么呢?
 
非常简单,一切都是围绕着“组件”( Component )的概念展开的:
 
 
Component(组件)是整个框架的核心,也是终极目标。“组件化”的意义有2个:第一是分治,因为有了组件之后,我们可以把各种逻辑封装在组件内部,避免混在一起;第二是复用,封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用。
 
NgModule(模块)是组织业务代码的利器,按照你自己的业务场景,把组件、服务、路由打包到模块里面,形成一个个的积木块,然后再用这些积木块来搭建出高楼大厦。
 
Router(路由)的角色也非常重要,它有3个重要的作用:第一是封装浏览器的 History 操作;第二是负责异步模块的加载;第三是管理组件的生命周期。
 
所以,在这个系列的文章里面,Component、NgModule、Router 加起来会占据绝大部分篇幅,而一些琐碎的小特性会被忽略掉。我相信,你只要紧扣“组件化”这个主线,就能站在一个很高的角度统摄全局,从而掌握到这门框架的精髓。
 
适合阅读的人群
这个系列的文章适合以下人群阅读:
Angular 新版本的初学者
 
有 AngularJS 1.x 经验的开发者
 
希望了解 Angular 新版本核心特性的开发者
 
特别注意:这个系列的文章不是前端入门读物,你至少需要会一门编程语言,无论前端还是后端都可以,如果你曾经使用过一门前端框架,那就更好了。
 
集中回答一些常见的问题
浏览器兼容性
 
关于 Angular 的浏览器兼容性,请看下图:
 
 
有一些国内的开发者会来争论兼容 IE8 的问题,我想给你两个事实:
第一个事实是:截至2017年7月底,Chrome 的全球市场份额已经接近60%,加上 Firefox 的 12.28%,真的没有那么多人用 IE 了。
 
 
 
数据来源
 
第二个事实是:天猫已经于2016年4月宣布放弃支持 IE6、7、8。而根据百度流量研究院的统计,IE8目前的整体市场份额已经下降到了9.31%:
 
 
 
数据来源
 
不值得为了这么少的市场份额付出那么多的研发和维护成本。
 
你完全可以以上两点事实去说服你的客户。
 
命名约定
 
老版本使用 AngularJS 指代,所有新版本都叫做 Angular。原因很好理解,因为老版本是用 JS 开发的,所以带一个 JS 后缀,而新版本是基于 TypeScript 的,带 JS 后缀不合适。
 
关于 TypeScript
 
这个系列的文章不会单独讲 TypeScript,正如我一直强调的:TypeScript 不难,JavaScript 才难。你跟着我的思路,TypeScript 绝对不会成为你学习 Angular 的障碍。相反,一旦你写熟练了之后,TypeScript 可以非常有效地提升编码效率和程序可读性。
 
关于版本号
 
根据官方的解释,Angular 从 2.0 之后会保证向下兼容,每隔半年会升级一个大版本,只有升级大版本的时候才会做一些 breaking change。
 
所以这个系列文章里面不再强调版本号,涉及到的所有实例代码都基于目前(2017-10)最新的 4.x 版本。