angular4 的学习笔记

原创 tianxiaofeng747 随笔 技术 386阅读 2017-05-02 18:41:51 举报

ng2 的断崖式升级,给我们开发者带来很大的学习成本,so 。 现在用ng 的都跑去学 vue了。react 貌似某些大厂在用, 小厂的同学也在用vue。

然而,我有的时候在想, 我们学一个框架, 到底是为了什么?是为了找工作的时候可以吹b ,拿高薪? 还是为了项目中要用到它?还是纯属兴趣?亦或者是都有把,可能大家都是这样想的: 不学不行呀,前端发展这么快,无论出于什么目的,我们都不希望自己被淘汰。是吧。
我们先思考几个问题

我们为啥要用spa 框架?它是解决什么问题的?
知乎的回答

我们为啥要用 typescript , 学习成本如此高? 对于没写过java 或者类似语言的同学是个不小的挑战。 ng2 推荐用ts 这条路真的对吗?

知乎的回答

ng2 为啥要用rx.js ,它又是干啥的,
知乎的回答

从目前的趋势来看,
前端工程化已经是大势所趋, 前端框架有助于我们更好更迅速的开发项目, 组件化开发是以后的方向。深入一点的,前端与后端的界限也会更加模糊。

废话少续,我们还是谈项目把
这个项目是我看着 官网 撸的。
技术栈: ngcli + ng2 + ts + bt + less 目前就这些把。
学习路径:

1、ng -cli 脚手架的应用,

包括如何创建一个项目 ng newproject 如何创建一个组件

angular4的学习笔记

2、ng2 的基本指令

html 代码

参考地址
ng2 的模版文件里面是可以声明变量的, 而ng1 中 是不可以的。
比如:
javascript 代码

ng1 直接给 form 名字, 它会自动帮我们创建 。 比如

angular4的学习笔记

注意: ng2 的模版文件是区分大小写的, 这个有点坑 比如 ngIf 你写成 ngif 是不能执行的, 建议 用vs code 编辑器, 或者 ws 装插件, 它会帮我们检测到这些小 bug。

3、http 客户端 如何与服务器通信

基本代码:
javascript 代码

这里提一下,ng2 没有系统内置的 拦截器 ,这点与ng1 不同, 需要自己实现, 不过呢, 大神已经给我们实现了, 地址:
ng2 拦截器

4、 路由

ng2 已经支持多级路由了,目测可以应对基本需求, 当然了, ui-router 也有ng2 的版本, 还没有研究比 官方的 路由好到那里了。
举个例子:
javascript 代码

5、其他,

包括 组件间通信 、管道,声明周期钩子,依赖注入,服务的创建, 特性模块 还有 rx 的相关操作,
相关链接:
ng模块系统

组件通讯

如何理解rx

6、ui 框架

上面这些都学会后,基本上就可以完成项目了, 但是我们需要一个 ng2 的 ui 框架,正所谓,工欲善其事必先利其器,别人造好的轮子,能用就用,节省时间。

手机端推荐用
material2

pc端推荐用
primeng 或者 bootstrap

安利下自己的demo:
angular2-spa demo

现在只是搭了一个架子,并不是一个完整的项目。
会不断迭代升级,希望找到同样爱好ng 的小伙伴一起研究学习。

番外篇:给前端网提个bug 切换私信的时候上面的 名字没改变:
@管理员。 我单纯的认为这样他能知道

angular4的学习笔记

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复