ngRx 官方示例分析 - 1. 介绍
ngRx 的官方示例演示了在具体的场景中,如何使用 ngRx 管理应用的状态。
示例介绍
示例允许用户通过查询 google 的 book API 来查询图书,并保存自己的精选书籍列表。
菜单有两个菜单项,分别是我的精选和图书浏览。
进入图书浏览页面后,可以输入搜索的书名。应用将在线搜索匹配的图书。
点击图书之后,可以得到图书的详细信息。如果图书还没有被收藏,则提示添加到收藏中。
如果已经添加到收藏中,则变成从收藏中移除。
在我的收藏中,可以看到当前收藏的图书列表。
示例快速上手
# clone the repo
git clone https://github.com/ngrx/example-app.git # change directory to repo
cd example-app # Use npm or yarn to install the dependencies:
npm install # OR
yarn # start the server
ng serve
Navigate to http://localhost:4200/ in your browser
下一篇:ngRx 官方示例分析 - 2. Action 管理
参考资源:
ngRx 官方示例分析 - 1. 介绍的更多相关文章
- ngRx 官方示例分析 - 3. reducers
上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...
- ngRx 官方示例分析 - 2. Action 管理
我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...
- ngRx 官方示例分析 - 6 - Effect
@ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
- ngRx 官方示例分析 - 5. components
组件通过标准的 Input 和 Output 进行操作,并不直接访问 store. /app/components/book-authors.ts import { Component, Input ...
- RocketMQ源码分析之从官方示例窥探:RocketMQ事务消息实现基本思想
摘要: RocketMQ源码分析之从官方示例窥探RocketMQ事务消息实现基本思想. 在阅读本文前,若您对RocketMQ技术感兴趣,请加入RocketMQ技术交流群 RocketMQ4.3.0版本 ...
- Halcon斑点分析官方示例讲解
官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...
- DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...
- DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
随机推荐
- HBase资料
http://blog.csdn.net/ymh198816/article/details/51244911 https://www.cnblogs.com/JingJ/p/4521245.html ...
- Python文件读写 - 读一个文件所有行,加工后写另一个文件
#Filename: file_read_and_write.py #打开文件,cNames读取所有行,储存在列表中,循环对每一行在起始处加上序号1,2,3,4 with open(r'file/co ...
- Oracle绑定变量优缺点
参考:http://f.dataguru.cn/thread-208881-1-1.html 参考:http://blog.sina.com.cn/s/blog_4d9ece9a0100caw8.ht ...
- JavaScript、ES5和ES6的介绍和区别
JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...
- Struts2学习笔记(1)---相关配置
Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架. 1创建action对象(三种) 1 创建普通的类,不继承任何类, ...
- 带以太网的MicroPython开发板:TPYBoardv201建立云加法器实例
转载请注明文章来源,MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇 前面的一篇文档向大家介绍了v201的开发板作为客户端终端向TCPS上传数据的基本过程 ...
- 横向、纵向时间轴timeline系列
近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...
- [Spark内核] 第28课:Spark天堂之门解密
本課主題 什么是 Spark 的天堂之门 Spark 天堂之门到底在那里 Spark 天堂之门源码鉴赏 引言 我说的 Spark 天堂之门就是SparkContext,这篇文章会从 SparkCont ...
- C和Lua之间的相互调用
前面的话 第一次接触Lua是因为Unity游戏中需要热更,但是一直没搞懂Lua是怎么嵌入到别的语言中执行的,如何互相调用的.这次打算好好了解一下C跟lua是如何交互的 那么如何使用Lua语言? lua ...
- 积累jquery一些有意思的函数
$("#btn").unbind("click"); // 让btn这个元素的点击事件失效 $("#btn").unbind(); // 让 ...