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_冰河之刃重打包版-------------- ...
随机推荐
- centos6快速搭建nginx
step1:配置本地 yum库,保存 $vi /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://ngin ...
- BASIC-2 01字串
基础练习 01字串 时间限制:1.0s 内存限制:256.0MB 问题描述 对于长度为5位的一个01串,每一位都可能是0或1,一共有32种可能.它们的前几个是: 00000 ...
- 【转】 Git——如何将本地项目提交至远程仓库
1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...
- [Spark内核] 第34课:Stage划分和Task最佳位置算法源码彻底解密
本課主題 Job Stage 划分算法解密 Task 最佳位置算法實現解密 引言 作业调度的划分算法以及 Task 的最佳位置的算法,因为 Stage 的划分是DAGScheduler 工作的核心,这 ...
- 设计模式学习(三): 装饰者模式 (附C#实现)
需求 做一个咖啡店的订单系统. 买咖啡时,可以要求加入各种调料,如奶,豆浆,摩卡等.咖啡店会根据调料的不同收取不同的费用.订单系统要考虑这些. 初版设计 然后下面就是所有的咖啡....: cost方法 ...
- ASP.NET 设计模式:应用程序分层与关注点分离(SoC)
应用程序分层设计 应用程序分层属于关注点分离的一种形式,可以通过命名空间.文件夹或采用单独的项目来实现. 下图为一个采用分层设计的项目结构 ASPPatterns.Chap3.Layered.Repo ...
- 使用Python实现的杨辉三角
def triangel(): print ' '*(20*3)+str(1) #定义起始两行 print ' '*(19*3)+str(1)+' '*5+str(1) for i in range( ...
- Java JSON数据处理
比方说要处理这么 {"data":[{"salt":"","plaintext":"xiaoxu", ...
- springboot(十七):使用Spring Boot上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spring Boot上传文件的小案例. 1.pom包配置 我们使用Spring Boot最新版本1.5.9. ...
- JSP和Servlet笔记
一.JSP的3个编译指令 作用:page指令用于设置整个jsp页面相关的属性,比如页面的编码格式.所包含的文件等等,它们包含在<%@ page %>标记中. 1)page 指令 以 ...