哈哈[一脸尬笑],算了,还是别学angular了,来跟我学react吧。
修改于2017-11-29
为什么还要选择angular
我知道这个时间段学习angular在大环境来看似乎比较尴尬,并非明智之举,react如日中天,angular2即将发布,angular1.x 已经过了大热期,这是一个后angular时代。也有认真拜读过网上各路大神的文章,对react的肯定似乎更多一点。
因此在决定学习angular之前,我有认真的学习过一段时间react。
react有许多非常优秀的特性,比如上手很容易,需要掌握的新东西并不多,我们只需要跟着官方文档动手写一些demo就能够对react有一个比较直观的了解,加上有平时许多的项目积累,往往在学习的时候就会不由自主的想到用react来处理这些问题会如何,这种思考让我更加快速的上手。由于react自身的api并不多,因此常常需要借助原生的js方法,这让熟悉js的我感觉更加亲切。当然,因为没有实际的将react运用于正式项目中,导致还有许多优点我暂时体会不到,比如优秀的性能等。
但是对我个人来说,react还是有许多我不太喜欢的特点。
react将大量html代码,通过jsx写在js文件里,可我是一个重度依赖emmet插件写html的人,html代码跑到js文件里去了,我就没办法快速的敲出html代码了,必须一个字母一个字母的敲,这严重影响了我的开发效率。为了找到能够弥补这块的插件,我几乎放弃atom,因为听说vscode对于jsx的支持程度很高,因此花了一整天的时间研究vscode,找相关的插件,但是无果。因此,如果使用react,就表示我的开发效率会严重受到影响,但愿以后能够有强大的插件能够解决这个问题吧!
和angular相比,react并不是一个完整的框架,它仅仅只是一个框架的v层。也就是常说的UI层。也就是说,如果我们想要掌握好react,除了学习react本身,我还需要学习大量的其他插件来扩充react的功能。这直接导致了学习成本的剧增。
react的组装特性让我没有信心能够掌握好他。大一的时候上计算机组装的某节课,有个十分令人讨厌的老师在课上问我:我们班有没有同学已经买过自己的电脑了? 我举手。 老师问:你是怎么买的。 我很直接的回答道: 给了学校教学楼下那个商店老板3000块钱,给他说我想弄一台玩游戏的电脑,然后就让他帮我弄了。被老师当面嘲笑。他认为我们学计算机的怎么好意思让别人组装电脑!一定会被坑。然而事实证明,在玩了几年大型烧显卡游戏之后,只有我的电脑还能够继续high。一起玩的那些同学的电脑因为各种原因早就歇菜了。 所以我一直认为组装是一个非常考验水平的事情,并不是谁都能够掌握好。
因为没有过实际经验,因此在面对一个项目的时候,我也不知道如何用react去构建一个项目才算是一个比较好的方案,这让我非常困惑,不知如何下手。
总之,诸多的原因,让我确定,通过自学,也许我能够将react学会,但一定没能力把它用好。因为我早早就感受过,如果水平不够,就算用世界上最优秀的框架,照样能够写出屎一样的代码。
从国内的实际环境来说,一个稳定的东西,才是最值得信赖的,所以目前来说,至少还没有哪个团队会低看一个angular水平很高的人。
而且angular还有许多十分优秀的特点。
angular足够稳定成熟,这么多年来有许许多多的人分享了大量的使用经验,我们可以找到许多优秀的文章。虽然初学angular时对于这种模式的不适应感比较明显,因此造成了学习成本高的假象,但是认真学过来之后,感觉其实将angular运用到一个比较好的程度,所花费的时间与精力肯定要比react要少很多。对我来说,感受最深的是在学自定义服务的时候,发现其实都是返回一个单例,这对于已经能够熟练使用js单例模式的我来说,就感觉十分轻松了。
angular的官方文章足够详细。也就是说,如果我们的英语足够好,学习angular也会变得很容易。
angular的社区足够成熟,目前已经有非常多成熟的第三方模块,基本上可以解决前端遇到的各种问题。
对我来说,还有一个重要的因素就是,住在我隔壁的大神强哥,以及办公室坐在我背后老大,对angular的掌握都已经到了炉火纯青的地步,遇到什么难以解决的问题,问一问立马就能够得到解决[一脸贱笑]。
还有最重要的一点那就是:学好了angular,依然能够找到工作。
因此,全面分析了react与angular,并结合自身的实际情况,最终还是觉得,先把angular学好比较靠谱。
学前准备
废话了那么多,这篇文章其实主要是跟大家分享一下angular的学前准备的。下面一一列举。
学习资源:
英语好的,直接官方文档
docs.angularjs.cn/有秒味vip的可以直接看视频入门学习
angular中文社区
angularjs.cn/ 有许多有价值的文章。- google 搜索
遇到的问题百度搜索找到的东西大多数都跟屎一样!所以,google搜索还是很重要的,它能够带我们找到许多非常有价值的文章。 - Plunker
plnkr.co/
专门用angular开发的在线coding工具,虽然界面比较丑,但是上面有许多有价值的demo,而且支持多文件,比如我们需要写一个路由相关的demo,那么在Plunker上完成是最合适的。
插件
angular-ui
在Atom上搜索 angularjs,作者名叫做angular-ui
为angular指令和angular的api提供代码高亮的插件,方便我们识别。atom-ternjs
api补全插件,支持包括ES5, ES6, node.js,angular等
- Batarang
Batarang 是一个chrome插件。是对chrome开发者工具的一个扩展。可用于视察基于angular的web应用程序,方便查看并可视化应用的运行时的特征。
入门学习期间可重点关注的一些知识点:
整个应用程序的执行顺序
config -> run -> directive compile -> controller -> directive link数据绑定及其原理
关键词:dirty checking, $diget, $watch, $apply作用域
关键词:$rootScope, $scope自定义指令
关键词:directive, $compile, link自定义服务
关键词:provider, factory, service指令间如何交互
关键词:require, controller, link如何有效的分层
如何进行DOM操作
关键词:directive link路由
ngRoute事件
如何实现动画
关键词 ng-if/ng-show/ng-hide ngAnimate异步编程
$q, $http
因为我也刚开始学习不到半个月,因此如果在学习中大家发现更多值得学习的点,欢迎相互交流补充!
给自己准备一些实战项目
我用angular将自己以前工作中做过的东西都抽空重做了一遍,感觉学到了很多,对angular的掌握也逐步熟练,因此在这里建议大家初学时能够找一些小项目来做,帮助很大。
比如官方为大家提供的:phonecat
比如我想搞一个账号密码管理小工具,这是我正在准备抽空给自己做的,如果哪天弄完了可以分享给大家
当然也可以借助angular将自己的个人博客弄成一个单页应用。