Angular Code Generator Tool - Angular Code+ Web Api+ SqlServer
It creates all the folder structure in Angular with required components, services, html files, css files, models, Modules, routing files. And all the controllers, DTOs, Singleton pattern for DALC layer, and methods for CRUD operations.
This tool generates Angular Type Script code and Web Api scripts(CURD operations) for the given MsSql tables.
Home and DB Setup
-
Lets create the following site with the angular code generation tool and with out writing a single line of code.
The following are the features we will be implementing- Menues : It has two menues "Inventory" and "Departments". Products and Categories are in Inventory Menu and the Departments in Departments Menu.
- Tabs : The product form has two tabs "Product details" and "Seller details".
- Static Look Up : The products form has field with name "Active" The control type is combobox and it has static data "Active" and "Inactive".
- Dynamic Look Up : The products form has field with name "CategorYId" which has control type as combobox and has data from the categories form(table).
-
Search :
- The products form has two seachable fields with name "Name" and categoryId.
- The Category Form has one seachable field "Name"
- The Department Form has one seachable field "Name"
DB SETUP
- Create a new database in MsSql and copy the following Table Scripts and execute them.
CREATE TABLE [dbo].[Departments]
(
[Id] BIGINT NOT NULL PRIMARY KEY,
[Name] VARCHAR(50) NULL
);
CREATE TABLE [dbo].[Categories] (
[Id] INT NOT NULL PRIMARY KEY,
[Name] NVARCHAR (50) NOT NULL,
[Description] NVARCHAR (50) NULL
);
CREATE TABLE [dbo].[Products] (
[Id] BIGINT NOT NULL PRIMARY KEY,
[Name] VARCHAR (50) NOT NULL,
[CategoryId] BIGINT NULL,
[ShortDesc] VARCHAR (50) NULL,
[LongDesc] VARCHAR (200) NOT NULL,
[StartDate] DATETIME NULL,
[EndDate] DATETIME NULL,
[IsActive] BIT NULL,
[Price] MONEY NULL,
[Quantity] INT NULL,
[EmailAddress] VARCHAR (50) NULL,
[WebAddress] VARCHAR (200) NOT NULL
);
- Theree tables will be created.
Extracting the DB Schema
- Download the following zip file from here
- Extract the zip file and run WebApiAngularCodeGenerator exe
- Give the connection string to connect to DB Text box, and click "GetTables" button.
Copy the generadted json data in the following Textarea. And click GetTablesSchema button.
Adding Menues
- Click on "Add New Menu" Button and give the name as Inventory.
- Repeat the process and give the name as Users
Adding Tabs
- Select the Table Name "Products" from the ComboBox
- Click on "Add New Tab"
- Give the Tab Name as "Product Details".
- And repeat the process and give the Tab Name as "Seller Details".
Static Lookup
- Click on "Add New Service Looup" and in the popup give the Static Lookup Name as "ActiveLookUp".
- Select the "ActiveLookUp" from the list box.
- Click on "Add New LookUp" Button.
- Give the Key as "Active" and Value as "1".
- And click on "Add New LookUp" Button.and give the Key as "InActive" and Value as "0".
Dynamic Lookup
- Click on "Add New LookUp Service" button.
- Give the Name as CategoriesLookUpService in the Look Up Name.
- Click on Edit button.
- Select the Table as Categories.
- Key as Id
- and Value as Name.
ViewForm
- Select Table Name as "Products".
- Features will appear as shown below.
- Select the "Inventory" for Under which Menu combo box.
- For Name and CategoryId select the check box for "Include in search"
- Repeat the process for Departments with "Departments" as Under which Menu combo box. and selct the Name in include in search.
- Repeat the process for Categories with "Inventory" as Under which Menu combo box. and selct the Name in include in search.
Add/Update Form
- Select the Table Name as Products in the Table Name Combobox.
- Select the "Control Type" as ComboBox for CategoryId Field.
- Select the "Dynamic Source Lookup" as "CategoriesLookupService" for CategoryId Field.
- Select the "Control Type" as ComboBox for IsActive Field.
- Select the "Static Source Lookup" as "ActiveLookUp" for IsActive Field.
- Select the TabName for every Field, "Product Details" for Id,Name etc. And "Seller Details" for EmailAddress and WebAddress.
Start Here
Delete Form
- Select the Table Name and give the desired Title and Message for the Tables.
Generate Code
- After completing all the steps, Click on "Generate Code".
- It checks for validations ( A primary key for each Table). If it passes will display the Success for Validation.
- Will post the data to the server, the code generation takes place at the server and a Download Link is provided as shown below.
Zip File contents
- The downloaded zip file will contain the following structure.
- Angular : contains the Typescript code.
- WebApi contains the webapi project.
- Db.Sql contains the required Stored procedures.
- The Readme text file contains the instructions to follow.
Execute Db Scripts
- Open the Dd.Sql file from the downloaded zip file. And execute the SPs in the Database using the query window.
Setting WebApi
- Open the WebApi Solution (\WebApi\WebApi\WebApplication1) in the visual studio 2015 or above.
- Open the Package Manager Console from Tools->Nuget Pacakage Manager-> Package Manager Console
- Run the following command to update the required nuget packages.
- Update-Package Microsoft.AspNet.WebApi -reinstall
- In the web.config file you can change the database connection string if needed by changing myConnectionString
Setting Angular
- Open the project in Visual studio code by pointing to Angular\Theame folder.
- Open the Integrated terminal from View->Integrated Terminal.
- Run the following command to install required the ngModules. Will install all the required packages.
- npm install --save-dev @angular-devkit/build-angular
- will install all the required NgModules.
- Open the file AppConstants from src->app->view-> AppConstants.ts.
- Change the base url 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.