@shivay_18/ng-crud 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -46
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# ng-crud
|
|
1
|
+
# @shivay_18/ng-crud
|
|
2
2
|
|
|
3
3
|
Angular CRUD generator using Angular Schematics and Angular Material.
|
|
4
4
|
|
|
5
5
|
Generates a **complete, production-ready CRUD** (List, Create, Edit, Delete) with:
|
|
6
6
|
|
|
7
|
-
- Angular Material UI (table, paginator, sort, dialogs, snackbar, forms)
|
|
7
|
+
- Angular Material UI (table, paginator, sort, dialogs, snackbar, forms, chips, tooltips, progress spinner)
|
|
8
8
|
- Reactive Forms with validation
|
|
9
|
-
- REST HTTP service
|
|
9
|
+
- REST HTTP service with error handling
|
|
10
10
|
- Auto-detects Angular 14+ (Module-based) or Angular 17+ (Standalone)
|
|
11
11
|
- **Safe to uninstall** — generated code has zero dependency on this package
|
|
12
12
|
|
|
@@ -22,7 +22,7 @@ Generates a **complete, production-ready CRUD** (List, Create, Edit, Delete) wit
|
|
|
22
22
|
## Installation
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
npm install --save-dev ng-crud
|
|
25
|
+
npm install --save-dev @shivay_18/ng-crud
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
---
|
|
@@ -30,7 +30,7 @@ npm install --save-dev ng-crud
|
|
|
30
30
|
## Usage
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
|
-
ng generate ng-crud:crud <name> --fields="field1:type,field2:type" --apiUrl="http://localhost:3000"
|
|
33
|
+
ng generate @shivay_18/ng-crud:crud <name> --fields="field1:type,field2:type" --apiUrl="http://localhost:3000"
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
### Options
|
|
@@ -60,16 +60,16 @@ Append `*` to mark a field as required: `name*:string`
|
|
|
60
60
|
|
|
61
61
|
```bash
|
|
62
62
|
# Basic
|
|
63
|
-
ng generate ng-crud:crud product
|
|
63
|
+
ng generate @shivay_18/ng-crud:crud product
|
|
64
64
|
|
|
65
65
|
# With fields
|
|
66
|
-
ng generate ng-crud:crud product --fields="name*:string,price*:number,active:boolean"
|
|
66
|
+
ng generate @shivay_18/ng-crud:crud product --fields="name*:string,price*:number,active:boolean"
|
|
67
67
|
|
|
68
68
|
# With custom API and path
|
|
69
|
-
ng generate ng-crud:crud order --fields="orderId*:number,status*:string,total:number" --apiUrl="https://api.myapp.com" --path="features"
|
|
69
|
+
ng generate @shivay_18/ng-crud:crud order --fields="orderId*:number,status*:string,total:number" --apiUrl="https://api.myapp.com" --path="features"
|
|
70
70
|
|
|
71
71
|
# Force standalone (Angular 17+)
|
|
72
|
-
ng generate ng-crud:crud user --fields="username*:string,email*:string,isAdmin:boolean" --standalone=true
|
|
72
|
+
ng generate @shivay_18/ng-crud:crud user --fields="username*:string,email*:string,isAdmin:boolean" --standalone=true
|
|
73
73
|
```
|
|
74
74
|
|
|
75
75
|
---
|
|
@@ -80,26 +80,68 @@ ng generate ng-crud:crud user --fields="username*:string,email*:string,isAdmin:b
|
|
|
80
80
|
|
|
81
81
|
```
|
|
82
82
|
src/app/<name>/
|
|
83
|
-
├── <name>.module.ts ← NgModule with routing & all Material imports
|
|
84
|
-
├── models/
|
|
85
|
-
│ └── <name>.model.ts ← TypeScript interface
|
|
86
|
-
├── services/
|
|
87
|
-
│ └── <name>.service.ts ← HTTP CRUD service (GET/POST/PUT/DELETE)
|
|
88
83
|
├── <name>-list/
|
|
84
|
+
│ ├── <name>.module.ts ← NgModule with child routes & all Material imports
|
|
89
85
|
│ ├── <name>-list.component.ts
|
|
90
|
-
│ ├── <name>-list.component.html
|
|
86
|
+
│ ├── <name>-list.component.html ← Material table, paginator, sort, search
|
|
91
87
|
│ ├── <name>-list.component.scss
|
|
92
88
|
│ └── <name>-delete-dialog.component.ts
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
89
|
+
├── <name>-form/
|
|
90
|
+
│ ├── <name>-form.component.ts ← Create & Edit (shared), Reactive Form
|
|
91
|
+
│ ├── <name>-form.component.html
|
|
92
|
+
│ └── <name>-form.component.scss
|
|
93
|
+
├── models/
|
|
94
|
+
│ └── <name>.model.ts ← TypeScript interface
|
|
95
|
+
└── services/
|
|
96
|
+
└── <name>.service.ts ← HTTP CRUD service (GET/POST/PUT/DELETE)
|
|
97
97
|
```
|
|
98
98
|
|
|
99
|
+
> The module is auto-imported into `app.module.ts`.
|
|
100
|
+
|
|
99
101
|
### Angular 17+ (Standalone)
|
|
100
102
|
|
|
101
103
|
Same structure but without `<name>.module.ts`. Each component is standalone with its own imports.
|
|
102
104
|
|
|
105
|
+
> Routes are auto-added to `app.routes.ts` with `children` for list, new, and edit paths.
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Routing
|
|
110
|
+
|
|
111
|
+
### Module-based (Angular 14–16)
|
|
112
|
+
|
|
113
|
+
The schematic auto-imports the module into `app.module.ts`. Add a lazy-loaded route to your `app-routing.module.ts`:
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
{
|
|
117
|
+
path: 'products',
|
|
118
|
+
loadChildren: () => import('./product/product-list/product.module').then(m => m.ProductModule)
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The module includes internal child routes:
|
|
123
|
+
|
|
124
|
+
| Path | Component |
|
|
125
|
+
| ----------- | ------------------- |
|
|
126
|
+
| `` | `<Name>ListComponent` |
|
|
127
|
+
| `new` | `<Name>FormComponent` |
|
|
128
|
+
| `:id/edit` | `<Name>FormComponent` |
|
|
129
|
+
|
|
130
|
+
### Standalone (Angular 17+)
|
|
131
|
+
|
|
132
|
+
Routes are auto-added to `app.routes.ts`:
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
{
|
|
136
|
+
path: 'products',
|
|
137
|
+
children: [
|
|
138
|
+
{ path: '', component: ProductListComponent, title: 'Product List' },
|
|
139
|
+
{ path: 'new', component: ProductFormComponent, title: 'New Product' },
|
|
140
|
+
{ path: ':id/edit', component: ProductFormComponent, title: 'Edit Product' }
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
103
145
|
---
|
|
104
146
|
|
|
105
147
|
## Environment Configuration
|
|
@@ -125,40 +167,16 @@ The generated service expects wrapped API responses:
|
|
|
125
167
|
{ "statusCode": 200, "statusMessage": "OK", "data": [...], "message": "..." }
|
|
126
168
|
```
|
|
127
169
|
|
|
128
|
-
The service automatically unwraps `data` before returning it to components.
|
|
129
|
-
|
|
130
|
-
---
|
|
131
|
-
|
|
132
|
-
### Module-based (Angular 14–16)
|
|
133
|
-
|
|
134
|
-
Add a lazy-loaded route to your `app-routing.module.ts`:
|
|
135
|
-
|
|
136
|
-
```ts
|
|
137
|
-
{
|
|
138
|
-
path: 'products',
|
|
139
|
-
loadChildren: () => import('./product/product.module').then(m => m.ProductModule)
|
|
140
|
-
}
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### Standalone (Angular 17+)
|
|
144
|
-
|
|
145
|
-
The schematic auto-adds the list route to `app.routes.ts`. Add child routes manually if needed:
|
|
146
|
-
|
|
147
|
-
```ts
|
|
148
|
-
{
|
|
149
|
-
path: 'products',
|
|
150
|
-
loadComponent: () => import('./product/product-list/product-list.component').then(c => c.ProductListComponent)
|
|
151
|
-
}
|
|
152
|
-
```
|
|
170
|
+
The service automatically unwraps `data` before returning it to components. Errors are passed through as-is for component-level handling.
|
|
153
171
|
|
|
154
172
|
---
|
|
155
173
|
|
|
156
174
|
## Uninstall
|
|
157
175
|
|
|
158
|
-
The generated code has **zero runtime dependency** on
|
|
176
|
+
The generated code has **zero runtime dependency** on `@shivay_18/ng-crud`. Uninstall safely anytime:
|
|
159
177
|
|
|
160
178
|
```bash
|
|
161
|
-
npm uninstall ng-crud
|
|
179
|
+
npm uninstall @shivay_18/ng-crud
|
|
162
180
|
```
|
|
163
181
|
|
|
164
182
|
---
|
package/package.json
CHANGED