• Stars
    star
    283
  • Rank 141,244 (Top 3 %)
  • Language
    TypeScript
  • Created over 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Angular CRUD

NPM version Build Status Dependency Status

Generating CRUD applications with the Angular CLI and Schematics.

Scaffold files for CRUD

Scaffold List

Scaffold Detail View

Tutorial: Getting Started

Follow the steps below to see how this library works, or watch this screencast.

  1. Clone this repository.

    git clone https://github.com/manfredsteyer/angular-crud
    

    You could also start with an empty project but this repo contains everything you need to get started quickly: theming, configured routing, and a menu.

  2. Build the angular-crud schematic:

    cd angular-crud
    npm install
    npm run build
    npm pack
    
  3. Install the needed npm packages:

    cd demo
    npm i --no-save ../angular-crud/*.tgz
    # or install the latest released version with: npm install -D angular-crud
    npm install
    

    NOTE: For Bootstrap and Angular Material, use demo-bootstrap and demo-material in the first command.

  4. Switch to the folder src/app and create a sub-folder hotel with a file model.json. Put the following content into this file:

    { 
        "title": "Hotel",
        "entity": "hotel",
        "api": {
          "url": "http://www.angular.at/api/hotel"
        },
        "filter": [
          "city"
        ],
        "fields": [
          {
            "name": "id",
            "label": "Id",
            "isId": true,
            "readonly": true,
            "type": "number"
          },
          {
            "name": "name",
            "type": "string",
            "label": "Name"
          },
          {
            "name": "city",
            "type": "string",
            "label": "City"
          },
          {
            "name": "stars",
            "type": "string",
            "control": "number",
            "label": "Stars"
          } 
        ]
    }

    The generator is using a json5 parser. This means that you can use comments, omit quotation marks, and use trailing commas.

  5. In your project's root directory, run the following Angular CLI based command:

    ng g angular-crud:crud-module hotel
    
  6. Have a look at the generated files.

  7. Open the file sidebar.component.html and uncomment the link to the generated route.

  8. Switch to the project's root and start the application:

    npm start
    
  9. Open http://localhost:4200 and switch to the menu item Hotels. You should now see your generated form.

    Please note, that you cannot save records with Ids 1 to 5 b/c they are restricted for demos.

Bootstrap and Angular Material

This library supports Bootstrap, Angular Material, and Paper Dashboard templates. It attempts to determine which templates to use by inspecting your package.json. You can also force which templates to use:

  • --style bootstrap: forces Bootstrap templates
  • --style material: forces Angular Material templates
  • --style paper-dashboard: forces Paper Dashboard templates

For example:

ng g angular-crud:crud-module note --style bootstrap

Paper Dashboard is the default if you don't specify a --style parameter and no Bootstrap or Angular Material dependencies are found in package.json.

Bootstrap Screenshots

Bootstrap List

Bootstrap Detail View

Material Screenshots

Angular Material List

Angular Material Detail View

Extending angular-crud

You can fork this repo and extend the generated code using Schematics. Information about how to use Schematics can be found here:

Call for Contributions

  • Validation
  • Navigating between Records
  • Lookups with dropdown fields etc.
  • Configure Base URL
  • Supporting more field types (date, checkbox etc.)

If you want to contribute one of those features or other features feel free to reach out. Let's join forces to provide a great solution!

More Information

More Repositories

1

angular-oauth2-oidc

Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
TypeScript
1,832
star
2

ngx-build-plus

Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
TypeScript
1,163
star
3

module-federation-plugin-example

TypeScript
195
star
4

angular-elements-dashboard

Dynamic Dashboard with Angular Elements and Web Components
CSS
189
star
5

yarp-auth-proxy

C#
171
star
6

angular-microapp

CSS
145
star
7

module-federation-with-angular-dynamic

Dynamic Module Federation with Angular
TypeScript
101
star
8

standalone-example-cli

TypeScript
92
star
9

angular-microfrontend

JavaScript
87
star
10

module-federation-with-angular

Demonstrates webpack 5 Module Federation with Angular and the Angular Router.
TypeScript
72
star
11

angular-ddd

JavaScript
71
star
12

multi-framework-micro-frontend

TypeScript
64
star
13

angular2-oauth2

JavaScript
63
star
14

Angular_MicroApps_Different_Technologies

CSS
56
star
15

module-federation-with-angular-dynamic-workflow-designer

Example for building a plugin-based workflow designer with Angular and Dynamic Module Federation
TypeScript
54
star
16

meta-router

A lightweight and solid approach towards micro frontends (SPAs/ clients for micro services)
JavaScript
44
star
17

strategic-design

Example for using Strategic Design with Angular and Nx
TypeScript
38
star
18

ddd-bk

36
star
19

native-federation-core-microfrontend

TypeScript
36
star
20

federation-demo

TypeScript
28
star
21

monorepo_domains

TypeScript
27
star
22

angular-2-reuse-strategy-sample

TypeScript
26
star
23

multi-framework-version

TypeScript
24
star
24

angular-oauth-oidc

Sample showing how to use Angular with OAuth2 & OIDC
JavaScript
23
star
25

sa-cli

TypeScript
23
star
26

astro-last-minute

Astro
22
star
27

ngUpgrade-without-preparation

TypeScript
22
star
28

native-federation-react-example

TypeScript
21
star
29

schematics-book

HTML
20
star
30

native-federation-vite-angular-demo

TypeScript
19
star
31

microservice-angular-iframe

Creating Angular-Frontends for Microservices
TypeScript
17
star
32

web-components

Examples for using Web Components in Angular
JavaScript
17
star
33

schematics-sample

My Schematics Sample, Updated Version
TypeScript
15
star
34

nx-and-module-federation

TypeScript
15
star
35

angular-without-modules

TypeScript
14
star
36

angular-ssr

TypeScript
14
star
37

module-federation-light

TypeScript
13
star
38

lazy-loading-ng-conf

TypeScript
12
star
39

snake

TypeScript
12
star
40

angular2-aot-webpack2-rollup

TypeScript
12
star
41

angular8

TypeScript
12
star
42

simple-microfrontend-demo

CSS
12
star
43

monorepo-demo

CSS
11
star
44

module_federation_shared_versions

TypeScript
11
star
45

progresive-web-apps-with-angular-2-demo

Showcase for PWA with Angular 2
TypeScript
11
star
46

angular-book

Beispiele von unserem Angular Buch
TypeScript
11
star
47

angular2-pwa-serviceworker-basta2016

JavaScript
10
star
48

demo-nx-standalone

TypeScript
10
star
49

ngconf-angular-elements-workshop

CSS
9
star
50

standalone-example-nx

TypeScript
9
star
51

build-elements

CSS
9
star
52

ivy-potential

JavaScript
9
star
53

DDD_Nx

JavaScript
9
star
54

ngconf-angular-elements-workshop-external

JavaScript
9
star
55

module_federation_nx_mono_repo

TypeScript
9
star
56

sa-nx

TypeScript
9
star
57

modern-arc

TypeScript
8
star
58

angular2-newest-new-router-guards-oauth

TypeScript
8
star
59

angular-oidc-lib

Simple Lib for using OAuth2 and OIDC in Angular
JavaScript
8
star
60

adv-mf-examples

TypeScript
8
star
61

angular2-rc1-sample

TypeScript
7
star
62

nx-module-federation-demo

TypeScript
7
star
63

angular-intro

TypeScript
7
star
64

microapps-hyperlinks

CSS
7
star
65

http-client-demo

CSS
7
star
66

hero-shop

TypeScript
7
star
67

flight-app

TypeScript
7
star
68

nx-angular-demo

TypeScript
7
star
69

toyc

TypeScript
7
star
70

angular2-oauth-oidc-demo

TypeScript
7
star
71

ngUpgrade-aot-sample

TypeScript
6
star
72

schematics-ng-add

TypeScript
6
star
73

workshop-fest-2020-05

JavaScript
6
star
74

standalone-components-elements

TypeScript
6
star
75

schematics-intro

CSS
6
star
76

5-best-practices-angular

JavaScript
6
star
77

ng-upgrade-workshop-starterkit

Starterkit for Angular migration workshop
TypeScript
6
star
78

angularjs_ce

CSS
6
star
79

module-federation-plugin-example-nx

TypeScript
6
star
80

flights-ddd-demo

TypeScript
6
star
81

nx-ddd-demo

TypeScript
6
star
82

signals-component-communication

TypeScript
6
star
83

dynamic-dashboard-with-dynamic-components-sample

TypeScript
5
star
84

angular3-app

TypeScript
5
star
85

basta_2019_angular_best_practices

JavaScript
5
star
86

microfrontend-prototype

JavaScript
5
star
87

ngUpgrade-lite-sample

TypeScript
5
star
88

pwa-show-case

TypeScript
5
star
89

native-federation-core-example

TypeScript
5
star
90

ddd

TypeScript
5
star
91

advanced-routing-angular-days-munich-mar-2017

TypeScript
4
star
92

ngconf-performance

CSS
4
star
93

schematics-ngVikings-2018

CSS
4
star
94

articles

HTML
4
star
95

monorepo_mf

TypeScript
4
star
96

nx_monorepo

JavaScript
4
star
97

angular-elements-ngconf-2019

CSS
4
star
98

angular-architecture-ngHamburg-march-2018

CSS
4
star
99

ng-upgrade-workshop-solution

Solution for my Angular Migrating Workshop (Migrating to Angular 2) from ngEurope
TypeScript
4
star
100

webpack_5_module_federation_and_angular_cli

TypeScript
4
star