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/store in GitHub

ngrx/example-app in GitHub

ngRx 官方示例分析 - 1. 介绍的更多相关文章

  1. ngRx 官方示例分析 - 3. reducers

    上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...

  2. ngRx 官方示例分析 - 2. Action 管理

    我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...

  3. ngRx 官方示例分析 - 6 - Effect

    @ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...

  4. ngRx 官方示例分析 - 4.pages

    Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...

  5. ngRx 官方示例分析 - 5. components

    组件通过标准的 Input 和 Output 进行操作,并不直接访问 store. /app/components/book-authors.ts import { Component, Input ...

  6. RocketMQ源码分析之从官方示例窥探:RocketMQ事务消息实现基本思想

    摘要: RocketMQ源码分析之从官方示例窥探RocketMQ事务消息实现基本思想. 在阅读本文前,若您对RocketMQ技术感兴趣,请加入RocketMQ技术交流群 RocketMQ4.3.0版本 ...

  7. Halcon斑点分析官方示例讲解

    官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...

  8. DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...

  9. DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

随机推荐

  1. C#-判断Shift,Alt,Ctrl是否被按下,确定所按下的组合键

    在创建接受用户击键的应用程序时,您还可能希望监视 SHIFT.ALT 和 CTRL 键等组合键.当一个组合键与其他键同时按下,或在单击鼠标的同时按下时,您的应用程序能够做出适当响应:字母 S 可能仅导 ...

  2. thinkphp5使用PHPExcel导入Excel数据

    安装PHPExcel扩展类 地址:https://github.com/PHPOffice/PHPExcel ①通过composer安装 ②手动下载, 放在项目的extend目录下 代码中引入 由于P ...

  3. XUL透明异形旋转窗体

    200行不到的代码,实现透明异形旋转窗体. 下载(25MB): http://oltag.com:8080/yaolixing/18/11/00/OHUIv52.0.1_3_webTrans20180 ...

  4. 转: 谈JAVA_OPTS环境变量不起作用

    谈JAVA_OPTS环境变量不起作用 2016-6-14 11:12 最近在处理运行一个java应用时,老是出现java.lang.OutOfMemoryError: Java heap space. ...

  5. hadoop的安装和配置(三)完全分布式模式

    博主会用三篇文章为大家详细说明hadoop的三种模式: 本地模式 伪分布模式 完全分布模式 完全分布式模式: 前面已经说了本地模式和伪分布模式,这两种在hadoop的应用中并不用于实际,因为几乎没人会 ...

  6. python中的深拷贝和浅拷贝理解

    在python中,对象赋值实际上是对象的引用.当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用.以下分两个思路来分别理解浅拷贝和深拷贝: 利用切 ...

  7. css的学习笔记

    CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(tra ...

  8. linux报错:命令未找到

    前段时间看到一个比较好玩的项目:[musicbox](https://github.com/darknessomi/musicbox) 开始用git clone安装,输入命令无法运行.开始以为安装有问 ...

  9. 学Java必看,不看的人都后悔了

    什么是Java? Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向 ...

  10. 洛谷 P1598 垂直柱状图【字符串+模拟】

    P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...