• Stars
    star
    283
  • Rank 146,066 (Top 3 %)
  • Language
    TypeScript
  • Created almost 7 years ago
  • Updated over 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,890
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

yarp-auth-proxy

C#
193
star
5

angular-elements-dashboard

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

angular-microapp

CSS
145
star
7

standalone-example-cli

TypeScript
105
star
8

module-federation-with-angular-dynamic

Dynamic Module Federation with Angular
TypeScript
101
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

native-federation-core-microfrontend

TypeScript
38
star
19

ddd-bk

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
26
star
24

native-federation-react-example

TypeScript
26
star
25

angular-oauth-oidc

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

sa-cli

TypeScript
23
star
27

native-federation-vite-angular-demo

TypeScript
23
star
28

astro-last-minute

Astro
22
star
29

ngUpgrade-without-preparation

TypeScript
22
star
30

schematics-book

HTML
20
star
31

modern-arc

TypeScript
19
star
32

microservice-angular-iframe

Creating Angular-Frontends for Microservices
TypeScript
17
star
33

web-components

Examples for using Web Components in Angular
JavaScript
17
star
34

schematics-sample

My Schematics Sample, Updated Version
TypeScript
15
star
35

nx-and-module-federation

TypeScript
15
star
36

standalone-book

15
star
37

angular-without-modules

TypeScript
14
star
38

angular-ssr

TypeScript
14
star
39

module-federation-light

TypeScript
13
star
40

lazy-loading-ng-conf

TypeScript
12
star
41

snake

TypeScript
12
star
42

angular2-aot-webpack2-rollup

TypeScript
12
star
43

demo-nx-standalone

TypeScript
12
star
44

angular8

TypeScript
12
star
45

simple-microfrontend-demo

CSS
12
star
46

monorepo-demo

CSS
11
star
47

module_federation_shared_versions

TypeScript
11
star
48

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

Showcase for PWA with Angular 2
TypeScript
11
star
49

angular-book

Beispiele von unserem Angular Buch
TypeScript
11
star
50

standalone-example-nx

TypeScript
10
star
51

angular2-pwa-serviceworker-basta2016

JavaScript
10
star
52

desserts

TypeScript
10
star
53

sa-nx

TypeScript
10
star
54

ngconf-angular-elements-workshop

CSS
9
star
55

build-elements

CSS
9
star
56

ivy-potential

JavaScript
9
star
57

DDD_Nx

JavaScript
9
star
58

ngconf-angular-elements-workshop-external

JavaScript
9
star
59

module_federation_nx_mono_repo

TypeScript
9
star
60

signals-component-communication

TypeScript
9
star
61

nx-module-federation-demo

TypeScript
8
star
62

angular2-newest-new-router-guards-oauth

TypeScript
8
star
63

angular-oidc-lib

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

adv-mf-examples

TypeScript
8
star
65

nx-ddd-demo

TypeScript
8
star
66

angular2-rc1-sample

TypeScript
7
star
67

angular-intro

TypeScript
7
star
68

microapps-hyperlinks

CSS
7
star
69

http-client-demo

CSS
7
star
70

flight-app

TypeScript
7
star
71

nx-angular-demo

TypeScript
7
star
72

angular2-oauth-oidc-demo

TypeScript
7
star
73

ngUpgrade-aot-sample

TypeScript
6
star
74

angular3-app

TypeScript
6
star
75

schematics-ng-add

TypeScript
6
star
76

hero-shop

TypeScript
6
star
77

workshop-fest-2020-05

JavaScript
6
star
78

schematics-intro

CSS
6
star
79

standalone-components-elements

TypeScript
6
star
80

5-best-practices-angular

JavaScript
6
star
81

angularjs_ce

CSS
6
star
82

ng-upgrade-workshop-starterkit

Starterkit for Angular migration workshop
TypeScript
6
star
83

module-federation-plugin-example-nx

TypeScript
6
star
84

flights-ddd-demo

TypeScript
6
star
85

dynamic-dashboard-with-dynamic-components-sample

TypeScript
5
star
86

basta_2019_angular_best_practices

JavaScript
5
star
87

microfrontend-prototype

JavaScript
5
star
88

ngUpgrade-lite-sample

TypeScript
5
star
89

pwa-show-case

TypeScript
5
star
90

import-maps-101

HTML
5
star
91

native-federation-core-example

TypeScript
5
star
92

ddd

TypeScript
5
star
93

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

TypeScript
4
star
94

ngconf-performance

CSS
4
star
95

schematics-ngVikings-2018

CSS
4
star
96

articles

HTML
4
star
97

monorepo_mf

TypeScript
4
star
98

nx_monorepo

JavaScript
4
star
99

angular-elements-ngconf-2019

CSS
4
star
100

angular-architecture-ngHamburg-march-2018

CSS
4
star