当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

angular-ngrx-data

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 陈嘉荣
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Angular ngrx-data

This repository is now merged with @ngrx into @ngrx/data. You can find the ngrx/data docs here and the github repository with ngrx/data in it here

Please read the note above

Zero Ngrx Boilerplate

You may never write an action, reducer, selector, effect, or HTTP dataservice again.

NgRx helps Angular applications manage shared state in a "reactive" style, following the redux pattern.

But to use it properly requires both a deep understanding of redux/ngrx and a lot of boilerplate code.

Ngrx-data is an ngrx extension that offers a gentle introduction to ngrx/redux without the boilerplate.

Try it! See the Quick Start for instructions on adding NgRx and ngrx-data to your app.

Why use ngrx-data?

Many applications have substantial domain models with 10s or 100s of entity typessuch as Customer, Order, LineItem, Product, and User.

In plain ngrx, to create, retrieve, update, and delete (CRUD) data for every entity type is an overwhelming task. You're writing actions, action-creators, reducers, effects, dispatchers, and selectors as well as the HTTP GET, PUT, POST, and DELETE methods for each entity type.

In even a small model, this is a ton of repetitive code to create, maintain, and test.

The ngrx-data library is one way to stay on the ngrx path while radically reducing the "boilerplate" necessary to manage entities with ngrx.

It's still NgRx

This is a library for ngrx, not an ngrx alternative.

It's easy to combine standard ngrx with ngrx-data.It's easy to take control when you need it and hand control back to ngrx-data when you're done.

Every entity has its own actions. Every operation takes its unique journey through the store, reducers, effects, and selectors. You just let ngrx-data create these for you.

You can add custom store properties, actions, reducers, selectors, and effects. You can override any ngrx-data behavior for an individual entity type or for all entities.You can make your own calls to the server and update the cached entity collections with the results using ngrx-data cache-only actions.

You can see the ngrx machinery at work with the redux developer tools. You can listen to the flow of actions directly. You can intercept and override anything ... but you only have to intervene where you want to add custom logic.

Learn about it

For a hands-on experience, try the QuickStartin the tutorial git repo, ngrx-data-lab,which guides you on the few, simple steps necessary to migrate from a typical service-based Angular app, to an app that manages state with ngrx-data.

This ngrx-data repository has the main documentation and its own sample app.

The sample app in the src/client/app/ folder presents an editor for viewing and changing Heroes and Villains.

The following reduced extract from that demo illustrates the essential mechanics of configuring and using ngrx-data.

You begin with a description of the entity model in a few lines of metadata.

// Metadata for the entity model
export const entityMetadata: EntityMetadataMap = {
  Hero: {},
  Villain: {}
};

// Help ngrx-data pluralize entity type names
// because the plural of "Hero" is not "Heros"
export const pluralNames = {
  Hero: 'Heroes' // the plural of Hero
};

You register the metadata and plurals with the ngrx-data module.

@NgModule({
  imports: [
    NgrxDataModule.forRoot({
      entityMetadata: entityMetadata,
      pluralNames: pluralNames
    })
  ]
})
export class EntityStoreModule {}

Your component accesses each entity data through an EntityCollectionService which you can acquire from the ngrx_data EntityServices.

In the following example,the HeroesComponent injects EntityServices and asks it for an EntityCollectionServiceregistered under the Hero entity name.

The component uses that service to read and save Hero entity datain a reactive, immutable style, without reference to any of the ngrx artifacts.

import { EntityCollectionService, EntityServices } from 'ngrx-data';
import { Hero } from '../../core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeroesComponent implements OnInit {
  heroes$: Observable<Hero[]>;
  heroesService: EntityCollectionService<Hero>;

  constructor(entityServices: EntityServices) {
    this.heroesService = entityServices.getEntityCollectionService('Hero');
    this.heroes$ = this.heroesService.entities$;
  }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes() {
    this.heroesService.getAll();
  }

  addHero(hero: Hero) {
    this.heroesService.add(hero);
  }

  deleteHero(hero: Hero) {
    this.heroesService.delete(hero.id);
  }

  updateHero(hero: Hero) {
    this.heroesService.update(hero);
  }
}

As you explore ngrx-data and its documentation,you'll learn many extension points and customizations thattailor the developer experience to your application needs.

QuickStart

Try the Quick Start to experience NgRx and ngrx-data in your app.

Explore this repository

This repository contains the ngrx-data source code and ademonstration application (the "demo app") that exercises many of the library features.

The key folders in this repository are:

  • docs --> the docs for the library and the demo
  • lib ---> the ngrx-data library source code that we publish to npm
  • src/app ---> the demo app source
  • server ---> a node server for remote data access

Learn more in the docs

Install and run

The demo app is based on the Angular CLI. You may want to install the CLI globally if you have not already done so.

npm install -g @angular/cli

Then follow these steps:

  1. Clone this repository

    git clone https://github.com/johnpapa/angular-ngrx-data.git
    cd angular-ngrx-data
  2. Install the npm packages

    npm install
  3. Build the ngrx-data library

    npm run build-setup
  4. Serve the CLI-based demo app

    ng serve -o

Refer to the troubleshooting section if you run into installation issues.

Run the library tests

The ngrx-data library ships with unit and E2E (end-to-end) tests to validate functionality and guard against regressions.

These tests also demonstrate features of the library that are not covered in the demo app. They're worth reading to discover more advanced techniques.

Run this CLI command to execute the unit tests for the library.

ng test

Run the sample app E2E (end-to-end) tests.

npm run e2e

We welcome PRs that add to the tests as well as those that fix bugs and documentation.

Be sure to run these tests before submitting a PR for review.

Monitor the app with Redux DevTools

The demo app is configured for monitoring with the Redux DevTools.

Follow these instructions to install them in your browser and learn how to use them.

Debug the library in browser dev tools

When running tests, open the browser dev tools, go to the "Sources" tab, and look for the library files by name.

In chrome, type [Command-P] and letters of the file name.

When running the app (e.g., with ng serve), the browser dev tools give you TWO choices for a given TypeScript source file, both claiming to be from .ts.

The one you want for library and app files ends in /lib/src/file-name.ts and /src/client/app/path/file-name.ts respectively.

Hope to solve the two file problem.

Build the app against the source

The demo app is setup to build and run against the ngPackagr artifacts in dist/ngrx-data,the same artifacts delivered in the npm package.

Re-build the library npm run build-lib or npm run build-setup or npm run build-allto update these artifacts.

This approach, while safe, can be inconvenient when you're evolving the library code because"Go to definition" takes you to the d.ts files in dist/ngrx-data rather thanthe source files in lib/src.

If you want to "Go to definition" to take you to the source files,make the following *temporary changes to the TypeScript configuration.

  1. Replace the paths target in the root tsconfig.json so that the IDE (e.g., VS Code) looks for ngrx-data in src/lib.

    "paths": {
        "ngrx-data": ["lib/src"]
      },
  2. Replace that same setting in the config at src/tsconfig.json.

  3. Replace that same setting in src/client/tsconfig.app.json.Now ng build references src/lib when it builds the demo app.

Remember to restore the tsconfig settings when you're done. Do not commit those changes!

Use a real database

The demo app queries and saves mock entity data to an in-memory database with the help of theAngular In-memory Web API.

The "Remote Data" toggle switch in the header switchesto the remote database.

The app fails when you switch to the remote database.

Notice how the app detects errors and pops up a toast message with the failed ngrx Action.type.

The error details are in the browser's console log.

You must first set up a database and launch a web api server that talks to it.

The src/server folder has code for a local node web api server, configured for the demo app.

TODO:Explain how to build and run the server.Explain how to build and serve the mongo db

Bad/surplus npm scripts

We know there are a great many npm script commands in package.json, many (most?) of which don't work.

They're on our list for future cleanup.Please don't create issues for them(although PRs that fix them are welcome).

Troubleshooting

Installation

  1. If you are on Windows and run into this error during npm install: "snyk couldn't patch the specified vulnerabilities because gnu's patch is not available", refer to this issue for the fix. In short, your Git installation is not correct or C:\Program Files\Git\usr\bin (typically) is not added to your system environment variable %PATH%.

Problems or Suggestions

Open an issue here

  • angular ngrx In this tutorial, we’ll learn how to use NgRX store in our Angular 10 example application. We’ll see how we can create actions, reducers, and dispatch actions. 在本教程中,我们将学习如何在Angular 10示例应

  • angular ngrx NgRx framework helps to build reactive angular applications. NgRx框架有助于构建React性角度应用程序。 NgRx Store provides reactive state management for the angular application. NgRx store is the redux im

  • See the current implementaion of code, we have a smart component, and inside the smart component we are using both 'serivce' and 'store'.   In the large application, what we really want is one service

 相关资料
  • This repository is no longer maintained, please refer to https://github.com/avatsaev/angular-contacts-app-example Angular Ngrx Socket.IO Example This Angular project demonstrates the implementation of

  • Angular 12, NgRx and Angular Material Starter by @tomastrajan Table of Content Live Demo Getting Started Useful Commands Make It Your Own Goals Learning Materials List of Projects Built Using This Sta

  • ngrx Style Guide Purpose The idea for this styleguide is to present commonly used techniques for working with ngrx suite and serve as a kind of a cookbook/recipes with a problem/solution theme. The pu

  • NGRX Actions Actions/reducer utility for NGRX. It provides a handful of functions to make NGRX/Redux more Angular-tastic. @Store(MyInitialState): Decorator for default state of a store. @Action(...MyA

  • What is Ngrx?

  • 本文向大家介绍Angular X中使用ngrx的方法详解(附源码),包括了Angular X中使用ngrx的方法详解(附源码)的使用技巧和注意事项,需要的朋友参考一下 前言 ngrx 是 Angular框架的状态容器,提供可预测化的状态管理。下面话不多说,来一起看看详细的介绍: 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule。 包括文件:demopet.html、demo