ASP.NET Web API Expense Managment App with AngularJS

By | January 19, 2017

Goal of this ASP.NET Web API Tutorial is to develop a simple Expense Management Application that is mainly used to have a track of the expenses that an individual spend on a daily basis. Purpose is more to learn the technology and see the actual code snippets by keeping the application domain simple and straight forward. Technology being used for developing this Expense Management Application is AngularJS 1.x with ASP.NET Web API.

Complete Source Code for the ASP.NET Web API Expense Management Application with AngularJS is now available to download here. You just need to be a REGISTERED Member to download Source Code. Registration is FREE 🙂

Angular 6 is out now. We can use Angular 6 to develop applications that are cross platform with maximum speed and performance. More on Angular 6 here.

Indeed Job Trends
The key features are:

  • Creating a user-defined Category.
  • Creating a expense for a corresponding Category with respect to date.
  • See Monthly Report of the expenses.

More ASP.NET Web API | AngularJs and Related Tutorial:

Setting Up ASP.NET Web API  Project:

  1. Create a New Project in Visual Studio 2013 or 2015.Visual Studio 2015 Application
  2. Create Blank Solutions in Other Project Types under Visual Studio Solutions.Microsoft Visual Studio 2015 Solution
  3. Add a project into the solution by Right clicking on Solution Name and select Add New Project. Select template as WEB API also ensure that no authentication is selected.ASP.NET Web API Tutorial
  4. Add another project for the angular application by repeating the same process, selecting Empty as template.Angularjs Tutorial App
  5. Add a new folder with name app to have the angular application markup and script files.
  6. Solution is set ready to work on our ExpenseManagement application.

Front End AngularJs Application:

  1. Right Click the app folder and create HTML pages and name them as:
    • Index.html
    • Category.html
    • Expense.html
    • Report.html
  2. Replace the following code in the index.html.

  3. Replace the following code in the register.html.

  4. Replace the following code in the login.html.

  5. Replace the following code in the category.html.

  6. Replace the following code in the expense.html

  7. Replace the following code in the report.html

Now the front end is ready which will look like:AngularJS Expense Web API

Expense Summary Web API Tutorial

Categories ASP.NET Web API

Report Web API Tutorial

Learn professional web development in AngularJS while building ten unique web apps

Following are the section details of this online course:

  • Section 1: Introduction
  • Section 2: Basic Angular Website
  • Section 3: Web Template Store
  • Section 4: myContacts App
  • Section 5: ngSocial Facebook App
  • Section 6: Job Directory
  • Section 7: KnowledgeBase
  • Section 8: User Authentication App
  • Section 9: Instagram Gallery
  • Section 10: PubNub Chat
  • Section 11: AutoFind
  • Section 12: Summary


Back End ASP.NET Web API 2.0 using Entity Framework 6.0:

Installation of Entity Framework

  1. Right click project in the solution explorer and select manage nugget packages for the project.
  2. NuGet package manager Dialog box appears as below.
  3. Search for Entity Framework.Entity Framework Tutorial
  4. Click on install
  5. Click I Accept License in License Agreement Pop up.

Generation of Model Classes using Entity Framework Database First Approach:

  1. Right click on the Model folder and project Add New Item.
  2. In the Add New Item Dialog box click on ADO.NET Entity Model(admx).EF Database First Approach
  3. Enter the name as ExpenseManagementDataModel.
  4. In the Select Tables/Views Dialog box by default select All radio button is selected.Entity Data Model Wizard
    Click Next and Click Finish.
  5. The admx Data Model is generated as below.Expense EDMX
  6. The solution explorer will contain the models and their configuration and context classes as below:Model in ASP.NET Web API

Creation of Web API Controllers Using the Scaffolding Technique:

  1. Right click controller folder and select Add -> New Scaffolded item.New Scaffolded Item
  2. Select the controller type as:Web API 2 Controller
  3. In the Add Controller window, select give Controller name, select the Model name which was created in the previous step using the drop down.Add Web API Controller
  4. By using the above step, select the Context class using the dropdown.

Implementing the Functionality using AngularJs:

Add the following code into the respective js pages which was created in step 3

App.js

categoryCtrl.js

ExpensesCtrl.js

loginCtrl.js

registerCtrl.js

reportCtrl.js

This ASP.NET Web API Tutorial covered many important areas related to AngularJS 1.x and Web API in a practical manner. User will also be able to download ASP.NET Web API Tutorial PDF later. Hopefully, as an ASP.NET Web Developer, one can take the code and improve the functionality as per his/her requirements and improve his/her skill as well.

Complete Source Code for the ASP.NET Web API Expense Management Application with AngularJS is now available to download here. You just need to be a REGISTERED Member to download Source Code. Registration is FREE 🙂

Build your RESTful Web Service with ASP.NET Web API 2 from the ground up and learn how to use the new Attribute Routing. Click Here to Take the Video Course Now.
Course Contents are:

  • Build RESTful web services with Web API 2
  • Create custom URIs with Attribute Routing
  • Save data persistently in a database with Entity Framework Code First migrations
  • Use Attribute Routing to your advantage
  • Services and Dependency Injection
  • Use JQuery to create, read, update and delete objects with Web API 2

ASP.NET Web API 2

Advanced Web Developer Interview Questions Series: