DNA Angular CRUD Template + Code Generator

Just define the metadata of the form you want to create, run a CLI command and DNA will automaticaly generates all the source code for you:

• Angular Components to Create, Read, Update and Delete data.
• Angular Services, Html API calls, Filter pipes, Model Classes.
• It will also update all the necessary project files for you. Modules, routes, menu and more.

Check our commercial templates for generating complete Dashboards with User Authetication, Charts, BackEnd APIs and more. Buying our templates will help us to continuously improving this amazing tool and creating new awesome templates. Also, it will give you the opportunity to create and commercialize your own templates in our web site.

Contact us by email at [email protected]

Visit our web site at smartcodingservices.com for more details

How does it work?

Getting Started With DNA

Pre-requisities

Install Angular CLI tools

To install Angular and Firebase on your local system, you need the following:

• Install Node.js

For more information on installing Node.js, see nodejs.org.

• Install Angular CLI Tool

To install the Angular CLI, open a terminal window and run the following command: C:\USERS\your-user-name> npm install -g @angular/cli

For more information on installing Angular CLI, see Angular CLI

Installing and running DNA Dashboard

• Create a folder named Angular inside your Documetns folder. Go to smartcodingservices.com to download the DNA Angular Code Generator free version. Unzip the package into this folder.

• Go to the project directory and start VS Code by running the following command:

...\dna-dashboard>Code .

• Open a terminal in VS Code:

  • Use the Ctrl+` keyboard shortcut with the backtick character.
  • Use the View > Terminal menu command.

• Install the project dependencies:

...\dna-dashboard>npm install

• Start the Angular server:

...\dna-dashboard>ng serve

Starting the DNA Dashboard web application

• Open your browser and type the following URL:

localhost:4200

• Interact with the dashboard. Click on Movies menu option to play with the Movies CRUD.

Generating a new CRUD

Let's create a new CRUD for a Music list

• Create a DNA file named musics.dna.json inside the following project folder:

src\app

Important : Note that file name must comply with the following naming convention: subjectName.dna.json

• Subject name must contain only letters. Avoid using special chars, spaces and dots.

• File extension must be .dna.json

• The musics.dna.json should contain the following json data:

{
  "fields": 
  [
    {"name":"MusicID"},
    {"name":"Title"},
    {"name":"Artist"}
  ]
}

• Important notes regarding the content of the dna json file:

• Item name must contain only letters. Avoid using special chars, spaces and dots.

• First Item will be used as the unique identifier of the document in Firestore Database (or the unique key in the SQL table).

• To generate all the source code for the Musics CRUD:

• Go to the terminal window where the Angular Server is running.

• Stop the angular service by typing ctrl+C

• Run the following CLI command:

...\dna-dashboard>ng g dna:create --name=musics --force=true

Interact with the recently created Musics CRUD

• Re-start the Angular server

...\dna-dashboard>ng serve

• Open your browser and type the following URL:

localhost:4200

• You may see a new item in the app Menu (Musics)

• Click on the Musics menu option to start interacting with the Musics CRUD