This project was generated with Angular CLI.
This project demonstrates how to use the ngrx-entity-crud library to create an CRUD + Angular + NgRx project
The project was made through PrimeNg, if you want other versions just ask me. Creating a repository GitHub from a template:
- Navigate to https://github.com/jucasoft/ngrx-entity-crud-prime-ng-boilerplate
- Above the file list, click: "Use this template".
- Use the Owner drop-down menu, and select the account you want to own the repository.
- Type a name for your repository/projectName, and an optional description.
- Choose a repository visbility.
- Click Create repository from template. For more information (help.github.com creating-a-repository-from-a-template)
git clone https://github.com/{account}/{repository}.git {projectName}
cd {projectName}
npm i
For more information (help.github.com cloning-a-repository)
npm run start:dev
if there are no errors, we can continue
dist/ compiled version
e2e/ end-to-end tests
src/ project source code
|- app/ app components
| |- core/ core module (singleton services and single-use components)
| | |- components/
| | |- directive/
| | |- interceptors/
| | |- models/
| | |- pipe/
| | +- utils/
| |- shared/ shared module (common components, directives and pipes)
| |- main/
| | |- components/
| | |- models/
| | |- services/
| | +- views/
| |- root-store/ as indicated in the article https://itnext.io/ngrx-best-practices-for-enterprise-angular-applications-6f00bcdf36d7
| | |- router-store/
| | |- index.ts
| | |- root-reducer.ts
| | |- root-store.module.ts
| | |- selectors.ts
| | +- state.ts
| |- app.component.* app root component (shell)
| |- app.module.ts app root module definition
| |- app.routing.ts app routes
| +- ... additional modules and components
+ ...
In this project we will use jsonserver:
Edit the /db.json file add some data:
{
"coin": [
{ "id": 1, "value": "10", "name": "xxxx", "description": "xxxx" },
{ "id": 2, "value": "20", "name": "xxxx", "description": "xxxx" },
{ "id": 3, "value": "30", "name": "xxxx", "description": "xxxx" }
]
}
Start JSON Server
npm run start
Now if you go to http://localhost:3000/api/v1/coin/1, you'll get:
{
"data": {
"id": 1,
"value": "10",
"name": "xxxx",
"description": "xxxx"
}
}
the command to use: ":store" and the parameters to pass: "--type=CRUD", "--clazz=Coin" and "--name=coin"
ng generate ngrx-entity-crud:store --name=coin --clazz=Coin --type=CRUD
the list of created and modified files will appear in the console
CREATE src/app/root-store/coin-store/coin-store.module.ts (787 bytes)
CREATE src/app/root-store/coin-store/actions.ts (462 bytes)
CREATE src/app/root-store/coin-store/effects.ts (1186 bytes)
CREATE src/app/root-store/coin-store/index.d.ts (265 bytes)
CREATE src/app/root-store/coin-store/index.ts (267 bytes)
CREATE src/app/root-store/coin-store/names.ts (46 bytes)
CREATE src/app/root-store/coin-store/reducer.ts (162 bytes)
CREATE src/app/root-store/coin-store/selectors.ts (543 bytes)
CREATE src/app/root-store/coin-store/state.ts (385 bytes)
CREATE src/app/main/services/coin.service.ts (347 bytes)
CREATE src/app/main/models/vo/coin.ts (221 bytes)
UPDATE src/app/root-store/index.ts (309 bytes)
UPDATE src/app/root-store/index.d.ts (309 bytes)
UPDATE src/app/root-store/state.ts (217 bytes)
UPDATE src/app/root-store/selectors.ts (665 bytes)
UPDATE src/app/root-store/root-store.module.ts (1051 bytes)
Open the class Coin "src/app/main/models/vo/coin.ts" Add the attributes (present in the DB JSON file):
public value:string = undefined;
public name:string = undefined;
public description:string = undefined;
why set the default value for class members: "undefined"?
if we were to have a class:
class Dog{
public id:string = undefined;
public name:string = undefined;
public description:string; // in this attribute we do not set the default value
}
when we create a new instance (new Dog()):
{
id:undefined
name:undefined
}
the description attribute will not be present
The command to use: "section" and the parameters to pass: "--clazz=Coin" and "--lib=primeng"
ng generate ngrx-entity-crud:section --clazz=Coin --lib=primeng
the list of created and modified files will appear in the console
CREATE src/app/main/views/coin/coin-routing.module.ts (722 bytes)
CREATE src/app/main/views/coin/coin.module.ts (1102 bytes)
CREATE src/app/main/views/coin/coin-edit/coin-edit.component.html (1325 bytes)
CREATE src/app/main/views/coin/coin-edit/coin-edit.component.ts (1626 bytes)
CREATE src/app/main/views/coin/coin-list/coin-list.component.html (706 bytes)
CREATE src/app/main/views/coin/coin-list/coin-list.component.ts (2254 bytes)
CREATE src/app/main/views/coin/coin-main/coin-main.component.html (188 bytes)
CREATE src/app/main/views/coin/coin-main/coin-main.component.ts (536 bytes)
UPDATE src/app/app-routing.module.ts (517 bytes)
ng build --aot --prod
npm run start
Go to http://localhost:3000/coin
You have finished creating the new crud section, now you can filter, create, edit and delete coins.
The application (FE and BE) is ready to be started on heroku, register on heroku and run this guide github-integration
compile the library:
npm run build
publish library:
go to the "libs/ngrx-entity-crud" folder.
npm login (authentication)
npm publish
Package linking:
cd <library-compiled>
npm link
go to the main folder of the project where to use the library:
npm link <library-name>
if the error appears:
... 'No provider for Injector!' ...
edit the file angular.json, set the value of "projects/*/architect/build/options":
"preserveSymlinks": true.
if you don't see changes to the library under development:
temporarily remove the library reference from the "package.json" file and rerun "npm link ".