Code Generator Tool for Anguar

Angular 10/9/8 + .Core WebApi


For running the code.
Hardware Requirements

For .net Core and MsSql service Software Requirements

Software Requirements for Php Rest Api

For running PHP on Server

The PHP is the default scripting language implemented with the Apache or any other web server installed at the server where the php should be executed.

If your server supports PHP, then you do not need to do anything. Just create your .php files, put them in your web directory and the server will automatically parse them for you.

 

Software Requirements For Asp.net Web Api

Two folders

  1. Open the application folder 
  2. Click on the AngularCodezenClient.exe as shown in the below image

New project :

To create a new project click on the File-->New.

The below form will appear.

The select the required Angulr version and the service 

Provide the Database connection string to connect to the DB. If the DB is MySql you need to provide the database name also.

It will fetch the database schema and populate tables with the felds.

 

After setting the required properties we can save the project for future use. The file will be save in json format.

Click on File->Save

File-->Open

We can open the saved project file by click on File->open

File-->Set Download Path

And after completing the code generation the generated copied to the given destination folder.

Click on Done to save them.

 
 

After setting the properties for the forms and the field (tables and fields), need to check for any errors.

The basic rules it checks for is

  1. Each and every table should contain only on primary key.
  2. Every form should be in a valid Menu. 
  3. If any of the filed is set as required it should have a Validation message.
  4. If thare are Tabs for a form all the fields should be set with forms.
  5. If the fileds control type is Combo box it should be set with either Dynamic or Static look should be set.

Once all the rules are set the validation will be success or else the errors will be displayed and needs to be corrected.

Process-->Generate Code

After the validation is successfull click on the Process-->Generate Code. The code will be generated and copied to the destination folder( which was set in the set theame path).

To exclude the tables from generating the code. Select the tables to be excluded. And click on the apply changes. The selected tables will not be used in the code generation. When doing so the previous changes will be lost. 

Manage Tabs

Tabs are used to show alternative views of the same group of information in a page. Select the table the tabs need to be added and click on "Add New Tab" and provide the required tab name.

 

Static lookup service is used for filling the combo boxes with static array of data. Like for filling a combobox with Gender we can create a static lookup with list of Male and Female types. Key is the one which is displayed to the user and the value is for storing to DB etc.

Manage Dynamic Look Up

Dynamic lookup service is used for filling the combo boxes with data from a table. Need to provide Table from which the data needs to be fetched. Key the filed which is shown in the UI and Value is the one which is stored to DB etc.

 

 

 

 

To create a form which Displays the list of records for the table in a Grid. Can set the properties like display in grid or not, included in search or not etc. For more info click here

Add Update form

To craete Add/Update form. can set the display text of the form, control types for the fields, validation messages etc. For more info click here

 

Delete Form

To craete Delete form. can set the display text of the form, and the message.

 

Setting Net Core WebApi

o Open the CoreWebApi Solution (\NetCore\CoreWebApi) in the visual studio code.
o In the appsettings.json file change the DBConnectionString to point to your database.
o In the Integrated Terminal  Use the command "dotnet run" to run the project.
 
 
 

Open the Dd.Sql file from the downloaded zip file. And execute the SPs in the Database using the query window.

 

 

In the web.config file you can change the database connection string if needed by changing myConnectionString 

 

 

 

Generated Code contents for Php Rest Api

  • The generate code will contain the following structure.
  • Angular : contains the Typescript code.
  • Php contains theRest api scripts.
  • The Readme text file contains the instructions to follow.
  1. Open the database.php form the generated files.
  2. Replace the "hostName" in line number 4 with your Mysql hostname. If there is a port number include in it.
  3. Replace "DBName" in line five with the your mysql db name.
  4. Replace "UserName" with the username to connect to your DB.
  5. Replace the "Password" in line number 7 with the password to connect to the DB.

  1. Save the database.php file.
  2. Upload all the files to webserver or any where you want to rum them.

 

Generated Code contents for .Net Core Web Api with MongoDB

The generate code will contain the following structure.

  • Angular : contains the Typescript code.
  • NetCore contains the core .net webapi project.
  • The Readme text file contains the instructions to follow.

 

  1. Open the project in the visual studio code.
  2. Open the appsettings.json file form the generated files.
  3. Replace the "ConnectionString" and "DatabaseName" with your mongoDB.

 

And run the project by Selecting Run-> Start Debugging.

Generated Code contents for .NodeJs ExpressJs With MongoDB

The generate code will contain the following structure.

  • Angular : contains the Typescript code.
  • NodeExpressMongo contains the NodeJs With MongoDB.
  • The Readme text file contains the instructions to follow.

Setting  .NodeJs ExpressJs Rest Api and Running

  1. Open the project in visual studio code.
  2. Open the main.js from the config folder
  3. Replace the database with your databse name.

 

And open the termilan and run "npm installl" command

 

 

After installing the node_modules 

Run the command "npm start"

 

Open the file environment.ts from src->environments-> environment.ts.
o Change the "apiHost" path to point to your hosted url. "http://localhost:4200/api" to your url.
 
 
  'In the Integrated Terminal  Use ng serve –open to run the project.
 
 

Run the Angular project

In the Integrated Terminal  Use ng serve –open to run the project.