npm 包 angular-ngrx-crud 使用教程

介绍

Angular-ngrx-crud 是一个用于 CRUD 操作的 Angular 应用程序的 npm 包，使用了 ngrx 和 Angular Material。它为开发人员提供了一种快速构建和部署 CRUD 应用程序的方法，并能够在应用程序中实现极端的一致性。

功能列表

  • 列出实体列表
  • 显示实体明细信息
  • 新建实体
  • 编辑实体
  • 删除实体

安装

使用 npm 安装：

--- ------- ----------------- ------

安装依赖

使用 npm install 命令安装依赖包：

--- ------- ------------- ----------- ------------ -------------------- ----------------- -------- ------

快速上手

  1. 导入 Angular-ngrx-crud 的模块：CrudModule。
------ - ---------- - ---- --------------------

-----------
  ------------- ---------------
  -------- --------------- ------------------------ -------------------------
  ---------- --------------
--
------ ----- --------- -
-
  1. 在组件中使用 <ngc-crud> 组件。
-----
  ---------
    ---------------------
    -------------------
    -----------------
    -------------------
    -----------------------------
    -------------------------
    -------------------------
    -------------------------
    --------------------------
  -----------
------
  1. 在组件中定义需要使用的属性。
------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------
------ - ------ - ---- -----------
------ - --------------- - ---- ---------------------

------------
  --------- -----------
  --------- -
    -----
      ---------
        ---------------------
        -------------------
        -----------------
        -------------------
        -----------------------------
        -------------------------
        -------------------------
        -------------------------
        --------------------------
      -----------
    -------
--
------ ----- ------------ -
  --------- ---------
  -------- -------------------------- - -
    -
      ------ -------
      --------- -------
      ----- -------
      --------- ----
    --
    -
      ------ --------------
      --------- --------------
      ----- ------
    -
  --
  ------- -------
  ------- - ------
  ------------ - ---

  ------------------- -------- ---------------- --

  -------------- ------- -
    ---------------------------
      ------------------- -- -
        ----------- - -------
      ---
  -

  -------------- ------- -
    ---------------------------
      ------------------- -- -
        ----------- - -------
      ---
  -

  -------------- ------- -
    ------------------------------
      ------------------- -- -
        ----------- - -----
      ---
  -

  -------------- ------- -
    ----------- - -------
  -
-

示例代码

entities.service.ts

------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------ - ---- -----------
------ - ---------- - ---- ------------------
------ - -- - ---- ---------------------
------ - ----------- --- - ---- -----------------
------ - ----------- - ---- --------------------

-------------
------ ----- --------------- ------- ------------------- -
  --- - ---------------------------------

  ----------------- ----------- -
    ------------
  -
-

entity.ts

------ --------- ------ -
  ---- -------
  ----- -------
  ------------ -------
-

app.component.ts

------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------
------ - ------ - ---- -----------
------ - --------------- - ---- ---------------------

------------
  --------- -----------
  --------- -
    -----
      ---------
        ---------------------
        -------------------
        -----------------
        -------------------
        -----------------------------
        -------------------------
        -------------------------
        -------------------------
        --------------------------
      -----------
    -------
--
------ ----- ------------ -
  --------- ---------
  -------- -------------------------- - -
    -
      ------ -------
      --------- -------
      ----- -------
      --------- ----
    --
    -
      ------ --------------
      --------- --------------
      ----- ------
    -
  --
  ------- -------
  ------- - ------
  ------------ - ---

  ------------------- -------- ---------------- --

  -------------- ------- -
    ---------------------------
      ------------------- -- -
        ----------- - -------
      ---
  -

  -------------- ------- -
    ---------------------------
      ------------------- -- -
        ----------- - -------
      ---
  -

  -------------- ------- -
    ------------------------------
      ------------------- -- -
        ----------- - -----
      ---
  -

  -------------- ------- -
    ----------- - -------
  -
-

总结

Angular-ngrx-crud 使 CRUD 应用程序的开发变得更加容易和快速，并提供了一致性和可维护性的最佳实践。本文介绍了 Angular-ngrx-crud 的安装和使用方法，希望能够对有需要的读者提供指导和帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056e9281e8991b448e7544

阅读全文

猜你喜欢

  • npm 包 angular-slick-slider 使用教程

    在前端开发中，轮播图组件是非常常见的需求，其中 Slick Carousel 是目前应用最广泛的一款轮播图组件。而 angular-slick-slider 是一个使用了 Slick Carousel...

    3 年前
  • npm 包 is-node-package 使用教程

    在前端开发过程中，我们经常会使用 npm 包来引用第三方库或者工具。但是在有些场景下，我们需要判断一个模块是否是 Node.js 的模块，为了解决这个问题，有一个非常好用的 npm 包叫做 is-no...

    3 年前
  • npm 包 `js-css-units` 使用教程

    在前端开发中，我们经常需要对不同的尺寸单位进行转换或计算，例如将像素（px）转换为 em、rem 或百分比等单位。为了方便实现这些操作，我们可以使用 js-css-units 这个 npm 包。

    3 年前
  • npm包pipe-helper使用教程

    介绍 pipe-helper是一个npm包，它提供了一组工具函数，可用于在使用管道函数时轻松创建嵌套函数组。 pipe-helper可以轻松地将函数组合成一个管道，更好地理解和维护代码，提高代码重用性...

    3 年前
  • npm 包 numposz 使用教程

    在前端开发中，数字格式化是一个经常需要处理的问题。而 numposz 这个 npm 包则提供了一个方便的解决方案，可以帮助开发者快速简便的对数字进行格式化操作。本篇文章将详细介绍 numposz 的使...

    3 年前
  • npm 包 simple-request-crawler 使用教程

    在前端开发中，经常需要获取外部网站上的数据。而网站上数据的分布形式多种多样，如 json 数据、xml 数据、html 数据等等。在获取这些数据时，我们可以自己编写代码去发起请求并解析响应结果。

    3 年前
  • npm包 object-extra 使用教程

    在前端开发中，我们经常需要处理对象，比较、查找、去重等操作都需要用到对象，而 JavaScript 中的对象操作相对来说比较麻烦，需要写很多针对不同情况的代码，那么有没有一个可以简化这些操作的工具呢？...

    3 年前
  • npm 包 object-findall 使用教程

    1. 简介 npm 包 object-findall 是一种用于查找 JavaScript 对象中符合特定条件的所有元素的工具。它提供了多种查找方法，可以根据对象的属性和值、嵌套层级等特点进行查找，十...

    3 年前
  • npm 包 object-extra.min 使用教程

    在前端开发过程中，经常需要对对象进行操作，例如对象合并、属性过滤、深度复制等。而 npm 包 object-extra.min 提供了这些常用的操作，并且使用起来非常方便。

    3 年前
  • npm 包 Object-Format 使用教程

    介绍 Object-Format 是一个 npm 包，它是一个可以将 JavaScript 对象格式化的工具。它可以将 JavaScript 对象转换成可读性更好的字符串，并且支持多种自定义格式化选项...

    3 年前
  • npm 包 quark-db-json 使用教程

    前言 当今互联网时代，数据是无处不在且不断增长，因此数据库已成为一个重要的组件，而 NoSQL 数据库则逐渐流行起来。其中，JSON 格式的文档数据库逐渐成为主流。

    3 年前
  • npm 包 @manuel-m/m-es 使用教程

    简介 NPM（Node Package Manager）是一个包管理器，可用于安装和管理 Node.js 模块。npm 包 @manuel-m/m-es 是一个用 TypeScript 编写的库，可用...

    3 年前
  • npm 包 et-es 使用教程

    前言 随着前端开发的日益成熟，我们越来越需要一个完善的工具链来支持我们的开发工作。npm 作为前端开发必备的包管理工具，为我们提供了很多优秀的第三方插件和工具库，这些插件和库提供了非常便捷的解决方案，...

    3 年前
  • npm 包 generator-angular-cli-webpack 使用教程

    随着前端开发的火热和大量的开源项目，npm 包成为了给前端开发者提供便利的一种方式。generator-angular-cli-webpack 是一种可以帮助前端开发者快速搭建 Angular 应用的...

    3 年前
  • NPM 包 lazymention 使用教程

    在前端开发中，我们经常需要使用 @ 符号来提及指定的用户或对象。然而，在文本输入框或编辑器中实现 @ 提及功能通常会涉及到一些繁琐的代码。为了解决这个问题，出现了一个名为 lazymention 的 ...

    3 年前
  • npm 包 barecss 使用教程

    在前端开发中，CSS 是一项非常重要的技能。而使用 CSS 可以让我们的网站变得更有吸引力和可读性。然而，根据不同的项目需求，我们有时需要快速地搭建一个基础的样式框架。

    3 年前
  • npm 包 reactjs-simple-spinner 使用教程

    随着 Web 2.0 时代的到来，前端开发受到了越来越多的关注，越来越多的开发者开始关注如何使用 npm 包来提高开发效率。在本文中，我们将介绍如何使用一个名为 reactjs-simple-spin...

    3 年前
  • npm包array-to使用教程

    在前端开发中，我们经常需要对数组进行操作，而JavaScript数组操作中的语法和方法也相当丰富。为了更加方便地处理数组，npm上有许多可以帮助我们处理数组的可重用代码，其中最常用的就是array-t...

    3 年前
  • npm 包 @ematipico/js-performance 使用教程

    简介 @ematipico/js-performance 是一个 JavaScript 性能优化库，能够帮助开发者在浏览器中更高效地使用 JavaScript。它包含一系列实用工具和优化的技术，可用于...

    3 年前
  • npm 包 Emojo 使用教程

    什么是 Emojo？ Emojo 是一个基于 Node.js 的 npm 包，用于将文本中的表情符号转换为对应的 Unicode 编码，从而解决不同平台之间 emoji 兼容性不一致的问题。

    3 年前

相关推荐

    暂无文章