本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list
angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀缺,流程较为复杂,这里我用计数器和在线获取用户数据并渲染成列表这两个案例来帮大家快速入手angular2+。
在开始之前,希望你能先掌握rxjs以及typescript,否则对其中的一些写法可能会觉得难以理解。
rxjs英文向导:
rxjs中文向导:
typescipt w3cschool教程:https://www.w3cschool.cn/typescript/
在开始之前,需要先安装@ngrx/store和@ngrx/effects
yarn add @ngrx/store @ngrx/effects
本教程使用的 ngrx/effects和ngrx/store版本均为5.2.0。
先来大致说一下开发流程:
开始 -> 编写数据模型 -> 编写action -> 编写redurces并配置到相应module -> 编写services -> 编写effects并配置到相应module -> 创建组件 -> 组件绑定数据模型 -> 渲染
我们先完成计数器案例。此案例由于没有异步任务,所以可以省略掉services和effects。
从创建项目到启动初始页面之间的步骤这里就不讲了。注意style要使用scss。还有不要使用cnpm安装包。改用yarn或者npm,这样后期使用不容易报错。
ng new your-project --style scss