ngRx 的官方示例演示了在具体的场景中,如何使用 ngRx 管理应用的状态。

示例介绍

示例允许用户通过查询 google 的 book  API  来查询图书,并保存自己的精选书籍列表。

菜单有两个菜单项,分别是我的精选和图书浏览。

进入图书浏览页面后,可以输入搜索的书名。应用将在线搜索匹配的图书。

点击图书之后,可以得到图书的详细信息。如果图书还没有被收藏,则提示添加到收藏中。

如果已经添加到收藏中,则变成从收藏中移除。

在我的收藏中,可以看到当前收藏的图书列表。

示例快速上手

  1. # clone the repo
  2. git clone https://github.com/ngrx/example-app.git
  3.  
  4. # change directory to repo
  5. cd example-app
  6.  
  7. # Use npm or yarn to install the dependencies:
  8. npm install
  9.  
  10. # OR
  11. yarn
  12.  
  13. # start the server
  14. 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. jquery学习总结(超级详细)

    本文仅针对jquery的部分知识点做总结,更为全面的可以去官网看中文文档.可以更为详细的了解jquery及其特性.       window.onload $(document).ready() 执行 ...

  2. php 运行的四种模式

    1)cgi 通用网关接口(Common Gateway Interface)) CGI即通用网关接口(Common Gateway Interface),它是一段程序, 通俗的讲CGI就象是一座桥,把 ...

  3. 鸟哥的linux私房菜学习-(二)VMware虚拟机及linux系统安装过程

    一.安装虚拟机 1.虚拟机常用版本及注册码地址:https://pan.baidu.com/s/1dFnkBrN#list/path=%2FSoftware%20Big%2FVMware%20Work ...

  4. 神经网络 误差逆传播算法推导 BP算法

      误差逆传播算法是迄今最成功的神经网络学习算法,现实任务中使用神经网络时,大多使用BP算法进行训练.   给定训练集\(D={(x_1,y_1),(x_2,y_2),......(x_m,y_m)} ...

  5. 微信小程序之HTTPS请求

    1.wx.request wx.request发起的是 HTTPS 请求,以下是它的基本用法,这里不再啰嗦 https://mp.weixin.qq.com/debug/wxadoc/dev/api/ ...

  6. 高效的CSS代码(2)

    ——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...

  7. [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格

    在canvas中,要画出1px的线条,默认情况下是不行的 context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 1 ...

  8. TreeMap 源码分析

    简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现.TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey.get.p ...

  9. Web程序员必备的CSS工具

    对于web开发来说,CSS是最有效的美化页面.设置页面布局的技术.但问题是,CSS是一种标记性语言,语法结构非常的松散.不严谨.WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或 ...

  10. 关于Tsung脚本无法停止的问题

    最近,利用tsung测试cm的时候,脚本是这样配置的: <load> 28 <arrivalphase phase="1" duration="2&qu ...