gorums / generator-angular-2-crud Goto Github PK

View Code? Open in Web Editor NEW

33.0 10.0 17.0 625 KB

This app generate a CRUD for Angular2

Home Page: https://www.atomicg.dev/

License: Other

JavaScript 35.74% TypeScript 58.71% CSS 2.80% HTML 2.74%

angular2 dsl yo generator crud mock

generator-angular-2-crud's Introduction

I moved this tool to this WebSite https://www.atomicg.dev/ Enjoy ;)

generator-angular-2-crud

This npm generate a CRUD for Angular 2 using a data model definition and best practices

Installation

First, install Yeoman and generator-angular-2-crud using npm (we assume you have pre-installed node.js). Ensure you're running the latest versions Node v4.x.x+ (or v5.x.x) and NPM 3.x.x+

npm install -g yo
npm install -g generator-angular-2-crud      <------ is not WORKING, we have an open issues on 'yo' repository

To run your new project you need install the next packages:

npm install --global typescript
npm install --global webpack
npm install --global webpack-dev-server

Installing generator-angular-2-crud from scratch

1 - npm install -g yo

2 - Delete the globally installed generator (if was installed by mistake): npm uninstall -g generator-angular-2-crud

3 - go into your npm root repo cd `npm -g root`

4- Clone generator-angular-2-crud repo git clone https://github.com/gorums/generator-angular-2-crud.git

5- cd generator-angular-2-crud

6- npm install

7- return to your directory where you have defined the dataModel.json file and generate the crud : yo angular-2-crud

6- Enjoy!

DataModel

Access to the project folder and create a file named dataModel.json

mkdir my_new_crud && cd my_new_crud
touch dataModel.json

Example of dataModel.json

 {
    "Doctors": {
        "Id": { "key": "true" },
        "Name": { "type": "string", "require": "true" },
        "Address": "string",
        "Available": "boolean"        
    },
    "Patients": {
        "Id": { "key": "true" },
        "Name": { "type": "string", "require": "true" },
        "Address": "string",
        "Age": "number",
        "History": {"type": "string", "textArea": "true" },
        "DoctorId": { "referent": "Doctors", "render": "Name" }
    },
    "relativeURI": "/api"
}

key: Define a field as key
type: Allow string, boolean and number
require: Define a field as require for validation
referent: Define the relation
render: Define what field show in the relation, in the example above it is going to render Doctor.Name instance of DoctorId
relativeURI: Define the relative URI. An example using /api http://127.0.0.1:3000/api/myentity

without relativeURI the URL is going to be http://127.0.0.1:3000/myentity

textArea: Render the field as textarea

Generation

Then generate your new project into your project folder with the dataModel.json defined:

yo angular-2-crud

Run

Now you can run your new CRUD

npm start

http://127.0.0.1:3000 or http://0.0.0.0:3000

Server Mock Generator

Instance we can generate a server mock in NodeJs/ExpressJs

yo angular-2-crud:server

Run Server Mock

Now you can run your server NodeJs mock and test your Angular 2 CRUD with fake data.

cd server
npm start

Thanks for help

@smansri

@augustbering

License

MIT © gorums

generator-angular-2-crud's People

Contributors

Stargazers

Watchers

Forkers

niilante byronsliger mazzzy hedvanoliveira ishantha-dhanushka timruether manelpin gmolveau nachopavon bikashmstha nickarthur juanredondo salahatwa cfasol mariohmol addisalemtafere odnodn

generator-angular-2-crud's Issues

Replace getbootstrap for angular material

Server Mock

Generate a mock nodeJs server to test your Angular 2 CRUD

Test the generator on Windows and MacOS

This is building over linux/ubuntu, we have to generate the CRUD over Windows and MacOS and run the project.

Run on Windows
Run on MacOS

yo angular-2-crud:server => TypeError: Generator.extend is not a function

DESCRIPTION
error when running generator to implement server
repetable

ENVIRONNEMENT
node --version
v6.11.1
npm --version
3.10.10
yo --version
2.0.0

OUTPUT
yo angular-2-crud:server
C:\Users\cdena\AppData\Roaming\npm\node_modules\generator-angular-2-crud\generators\server\index.js:9
module.exports = Generator.extend({
^

TypeError: Generator.extend is not a function
at Object. (C:\Users\cdena\AppData\Roaming\npm\node_modules\generator-angular-2-crud\generators\server\index.js:9:28)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.get [as angular-2-crud:server] (C:\Users\cdena\AppData\Roaming\npm\node_modules\yo\node_modules\yeoman-environment\lib\store.js:38:27)
at Store.get (C:\Users\cdena\AppData\Roaming\npm\node_modules\yo\node_modules\yeoman-environment\lib\store.js:61:39)

Validate the data model

We have to validate a data model format and restrictions

key without type

The key always is going to handle like string you do not have to specifies the type in the dataModel

Edit of newly created item is not reflected in the UI

I get a list of items, then press "New Item" button. The item is created in place as the first element in the UI. If i then edit it, the form data is sent to the server and a response comes back, but the data in the UI is not updated. If i try to edit an item which had already existed, then all works ok..

Improve the CSS

Improve the dashboard crud

Add checkbox

For the boolean type

Format the ejs template

We have to format te ejs template without affect the generator code

Add validations

require validation
type validation
min and max validation
regular expression validation

work on loopback model?

npm start error

[at-loader] Checking finished with 75 errors
[at-loader] node_modules/@angular/core/src/facade/lang.d.ts:12:17
'Map' only refers to a type, but is being used as a value here.

[at-loader] node_modules/@angular/core/src/facade/lang.d.ts:13:17
'Set' only refers to a type, but is being used as a value here.

[at-loader] node_modules/@types/core-js/index.d.ts:47:36
Cannot find name 'Iterable'.

[at-loader] node_modules/@types/core-js/index.d.ts:355:48
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:356:52
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:357:34
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:358:34
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:359:34
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:360:61
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:361:60
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:362:65
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:362:97
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:363:60
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:364:58
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:365:59
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:366:58
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:367:61
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:367:117
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:368:42
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:370:81
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:371:78
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:372:76
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:373:73
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:436:6
Cannot find name 'Symbol'.

[at-loader] node_modules/@types/core-js/index.d.ts:469:59
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:470:59
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:472:48
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:473:69
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:477:40
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:479:48
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:695:55
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:696:45
Cannot find name 'PropertyKey'.

[at-loader] node_modules/@types/core-js/index.d.ts:712:46
Cannot find name 'Iterable'.

[at-loader] node_modules/@types/core-js/index.d.ts:713:43
Cannot find name 'Iterable'.

[at-loader] node_modules/@types/core-js/index.d.ts:829:20
Cannot find name 'PromiseConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:844:32
Cannot find name 'Iterable'.

[at-loader] node_modules/@types/core-js/index.d.ts:848:39
Cannot find name 'Iterable'.

[at-loader] node_modules/@types/core-js/index.d.ts:848:53
Cannot find name 'Iterator'.

[at-loader] node_modules/@types/core-js/index.d.ts:1486:36
Property 'for' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1490:43
Property 'hasInstance' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1494:50
Property 'isConcatSpreadable' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1498:40
Property 'iterator' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1502:38
Property 'keyFor' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1506:37
Property 'match' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1510:39
Property 'replace' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1514:38
Property 'search' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1518:39
Property 'species' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1522:37
Property 'split' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1526:43
Property 'toPrimitive' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1530:43
Property 'toStringTag' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:1534:43
Property 'unscopables' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2305:36
Property 'for' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2309:43
Property 'hasInstance' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2313:50
Property 'isConcatSpreadable' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2317:40
Property 'iterator' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2321:38
Property 'keyFor' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2325:37
Property 'match' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2329:39
Property 'replace' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2333:38
Property 'search' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2337:39
Property 'species' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2341:37
Property 'split' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2345:43
Property 'toPrimitive' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2349:43
Property 'toStringTag' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/@types/core-js/index.d.ts:2353:43
Property 'unscopables' does not exist on type 'SymbolConstructor'.

[at-loader] node_modules/rxjs/Observable.d.ts:68:60
'Promise' only refers to a type, but is being used as a value here.

[at-loader] node_modules/rxjs/Subject.d.ts:16:22
Class 'Subject' incorrectly extends base class 'Observable'.
Types of property 'lift' are incompatible.
Type '(operator: Operator<T, R>) => Observable' is not assignable to type '(operator: Operator<T, R>) => Observable'.
Type 'Observable' is not assignable to type 'Observable'.
Type 'T' is not assignable to type 'R'.

[at-loader] node_modules/rxjs/observable/dom/WebSocketSubject.d.ts:23:22
Class 'WebSocketSubject' incorrectly extends base class 'AnonymousSubject'.
Types of property 'lift' are incompatible.
Type '(operator: Operator<T, R>) => WebSocketSubject' is not assignable to type '(operator: Operator<T, R>) => Observable'.
Type 'WebSocketSubject' is not assignable to type 'Observable'.
Types of property 'operator' are incompatible.
Type 'Operator<any, R>' is not assignable to type 'Operator<any, T>'.
Type 'R' is not assignable to type 'T'.

[at-loader] node_modules/rxjs/operator/toPromise.d.ts:3:79
'Promise' only refers to a type, but is being used as a value here.

[at-loader] src/app/containers/patients.ts:103:25
Property 'find' does not exist on type 'DoctorsModel[]'.

[at-loader] src/app/store/helper.ts:10:32
Property 'assign' does not exist on type 'ObjectConstructor'.

[at-loader] src/app/store/helper.ts:16:32
Property 'assign' does not exist on type 'ObjectConstructor'.

[at-loader] src/app/store/helper.ts:23:32
Property 'assign' does not exist on type 'ObjectConstructor'.

[at-loader] src/app/store/helper.ts:29:32
Property 'assign' does not exist on type 'ObjectConstructor'.

[at-loader] src/app/store/index.ts:52:21
Property 'assign' does not exist on type 'ObjectConstructor'.

[at-loader] src/app/store/index.ts:60:21
Property 'assign' does not exist on type 'ObjectConstructor'.

Generator not found by yo

Hello,
On the following config on windows 10 :
node v6.10.3
npm -v 4.5.0

I follow the intallation instructions, the generator is installed but yo cannot find it.
NODE_PATH id setup, I have no problem with other generators.
I noticed there is no "app" folder in the generator-angular-2-crud node module

`
yo angular-2-crud
Error angular-2-crud

You don’t seem to have a generator with the name “angular-2-crud” installed.
But help is on the way:

You can see available generators via npm search yeoman-generator or via http://yeoman.io/generators/.
Install them with npm install generator-angular-2-crud.

To see all your installed generators run yo without any arguments. Adding the --help option will also show subgenerators.

If yo cannot find the generator, run yo doctor to troubleshoot your system.
`

{
   "Users": {
      "Id": { "key": "true"},
      ...
      "CityId": { "referent": "Cities", "render": "name"},
      "CountryId": {  "referent": "Countries", "render": "name"}
}

DataModel nested objects

I have this object at the DataModel.

"Car": {
        "id": { "key": "true" },
        "ip": { "type": "string", "require": "true" },
        "name": { "type": "string", "require": "true" },
        "location": {
            "latitude": "number",
            "longitude": "number"
        },
        "model": "string",
        "brand": "string"
    }

The problem is at the "location" object. This gives me at the Typescrypt model:

export interface CarModel {
  id : string;
  ip : string;
  name : string;
  location  ? : [object Object];
  model  ? : string;
  brand  ? : string;
}

the "[object Object]" part is giving me this error at npm start:

[at-loader] src/app/models/car.ts:5:25
    ',' expected.

how can I solve it?

Add textArea field

For descriptions fields

Many-To-Many

add support for relations Many-To-Many

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.