Angular 5 CRUD operation integrated with Microsoft Asp.net WebAPI and SQL Server DataBase
Live Demo Click here
Video link
Overview
In this project i created simple website using Angular-5 and Bootstrap design.
I'm using SQL Server 2014 for the DataBase you can find the database backup file in Asp.Net Mvc CRUD Project folder MvcTutorial >> DataBase >> MvcTutorial.bak and Script file MvcTutorialscript.sql. for storing and retrieve data from the database we create WebAPI which is use as services.
Environment setup
Step 1: Download Sql Database file and Restore or
Create Database in SQL Server. i have already added database bakup file in MvcTutorial >> DataBase >> MvcTutorial.bak
and also added a Script file MvcTutorialscript.
Note: This my common and single Database for all the projects.(ex: if i create account using mvc application and login with angular aplicatoin it work because database is common for both the websites.
Step2: After generating database Download or clone .Net Mvc WebAPI and configure it with the Database for more deatils how to configure Database with Project read the MVC Project README.md
Step 3: Now Download or clone this Angular-5 Project here you need to remember few things.
1.Change WebAPI Path in HttpManager.module.ts file in Provider folder.
2.if you use local machine then run the WebAPI use that path in local path in HttpManager.module.ts
3.Extract Angular Project then open cmd run Project with command "ng serve".
4.This Angular Project.rar folder is complete setup file for Angular-5. will use this for other project also just replace you src folder
Step 4: You can use this Angular Project.rar file for any other project you don't need to required any software. In this folder every pre installed NodeJS, Angular-5, and Visual Code, so everything is there you can use it any where you want. you don't need to reinstall all the software in any other computer.
- Topic Cover in this Project
- (Routing, HttpClient, Form Validation, Service, SweetAlert, JQuery, Session Manage)
- User Registration (Insert Operation)
- Login (Authentication and Session Managing Operation)
- Forgot Password (Authenticate and Update Operation)
- Active User Account (Edit and Update Operation)
- Profile Update (Edit and Update Operation)
- Change Password (Create New Password Operation)
- Account (Delete Operation | Deactivate Operation)
- Logout (Session Dismiss)