当然,现在 angular 最新的版本已经出到 5.0 了,现在才来说 ng2 有点老套了,只是最近忽然的从 react 的项目组转到了做 angular v2 (ng2) 的项目组,同时对谷歌和微软的”孩子”也比较感兴趣,所以还是有必要好好学习一下的。
上手了一阵子,大概摸清了 ng2 的套路,其实在此之前,对于习惯了 React、 Vue 开发模式的我来说,对于 ng2 是有一定的误解的。过去的我一直以为 ng2 只是简单的视图框架,就是一个简单的模板系统,现在看来我是错了,较之于 React、 Vue 复杂的项目构建来说, ng2 才是真正的框架啊,如果你有一定的后端基础,你一定能很快的理解 ng2 知识体系, 而且你也会明白 ng2 作为一个框架对于开发效率的提升。
关于学习网站
学习 ng2 最好的就是看官网了,当然所有的语言都是一样的,以下是几个可能需要经常去逛的网站。
- angular-cli 脚手架工具,快速构建项目;
- angular 官网,最新的已经是 V5 版本了,可以继续深入学习;
- Rx.js 中文速查手册;
- javascript 的超集 typescript;
- 待补……
重要概念
有关于 ng2 几个重要的概念如下:
- 脚手架 ( scaffold )
- 指令( directive )
- 管道 ( pipe )
- 路由 ( router )
- 父子组件通信 ( @input & @output )
- 模块 ( model )
- 服务 ( service )
- Rxjs ( Oberverable )
- 依赖注入 ( injectable )
当然,赘述官方的文档不是我想要的,我更希望通过我个人的理解来介绍这几个知识点(或许有错误)
脚手架 ( scaffold )
唠叨一句:一般来说,脚手架这个东西,只有新手小白或者大牛会喜欢用,往往处于中间层的大佬们是比较鄙视的,因为这让程序变得没有技术含量,或者,被一些低级的脚手架给坑到。不过话说回来,使用好的脚手架的确能让让你的开发更加幸福,与其打开另一个文件复制代码,为何不让脚手架来给你生成呢。
ng2 (angular) 使用的脚手架是官方提供的 angular-cli ,常用的几个操作如下:
生成对象 | 命令 | 注意事项 |
---|---|---|
project | ng new PROJECT-NAME | 生成新项目 |
debug | ng serve –host 0.0.0.0 –port 4201 | 启动本地服务 |
Component | ng g component my-new-component | 生成 component |
Directive | ng g directive my-new-directive | 生成自定义指令 |
Pipe | ng g pipe my-new-pipe | 生成自定义管道 |
Service | ng g service my-new-service | 生成服务 |
Class | ng g class my-new-class | 生成类,几乎不用 |
Guard | ng g guard my-new-guard | 生成自定义路由向导,通用拦截等 |
Interface | ng g interface my-new-interface< |