Introduction

In this article you can see the explanation of standard level application architecture using MVC, WebApi, HTML, and Angularjs. I have already created an application architecture by following the layer standard, Mvc standard, and business-level architecture. If you are going to create MVC, Web api, and Angularjs, this is best way to create application architecture.
Nowadays I think each developer has a good experience in web applications, mvc applications, web services, web api and front end development using angularjs which is already well maintained by other architecture, layers, or we can say already configured by somebody. But once they have a need to create a new application by following standard level architecture, they will go silent and confuse how to create application architecture. Also I faced this type of confusion in my life, but nowadays I am giving you a good explanation to create standard level application architecture using MVC, web api, angularjs, and html.
I am just giving you some important links to understand basic points which are used in this type of application.
Important points

If you're going to create good and well-structured applications using layer architecture in mvc, you need to remember some points which are given below,
  1. Use 3-layer architecture.
  2. Try to use 3-Tier architecture at production server.
  3. Use Exception logging,create a log file on each exception.
  4. Use owin authentication with identity.
  5. Use unit testing,create unit testing.
  6. Implement swagger for testing with mvc web api.
I am showing an image which is more helpful to understand the architecture of good applications. In this I am trying to explain how to implement application flow at run time.

application
According to this image I have created an application which is following these architectures, I am explaining their use one by one. I am showing an image which represents real time application architecture and explaining each one by one.

In this project I have configured 7 projects which are separate from one another.
  1. Application layer (Presentation Layer)
    In this layer I have created only HTML pages and consumed the web api by Angularjs. In this consuming web api and using angularjs ,get and post data in JSON format, see the image which is given below to understand what is the use of this part.



    In this layer you can create HTML pages and angular services, controller,etc. On index page we can inject all .js,angular,bootstrap,css, because by default this page will be open.

  2. MVC Web Api Layer(Api)
    In this layer we can create api controller to use provider layer which is returning model value .Also in this layer we are implementing logging part using Log4net exception logger.see image.



    Owin authentication is used to provide authentication part in level. On each request of each controller always check if token is valid or not. End point of web api is consumed by angularjs on front end.

  3. provider Layer (Business logic layer)
    This layer is mainly use to create a interface between Api and DAL(repository). Due to security reasons we are not interacting with DiAL directly.



    In this layer we can create interface and BAL (classes ) which can be used to call DAL; see image. This layer you can create classes and interfaces and call interfaces on api controller.

  4. Repository layer (Data access layer)
    In this layer you will create .Edmx file,you can access the database directly by using entity framework.You can chose as per your database code first approach, data base first approach or model first approach. Now I am using database first approach because my database is already created and mapped with each other's table; see image.



    You can see in this image I have used .edmx file and created classes to work with entity (CRUD).

  5. Utility
    In this class library we can create some common function, enum, constant variable, readonly etc..see image...



    You can see in this image I have created commonhelper class and constant class, so you can use it to create any common variable etc...

  6. Model
    This class library is mainly used to create classes which can contain C# properties like field name; see image.



    According this image you can see I have created classes which contain the C# property like {get;set;}.

  7. ApplicationUnitTest (Unit tesing)
    This is a very important part of any application if we want to develop well structured applications. In this you can create test methods and test your web api; see image.....



    In this image you can see I have created a ***Application class to create test method to test web api.
Advantage of good architecture based applications
  1. Loosely coupled binding of classes.
  2. No dependency on each other; not class dependent on any other
  3. Security level authentication provides token based security in web api.
  4. Reusability of code -- you can use BAL and DAL in other projects as well.
  5. Provide leverage integration of code.
  6. Easy to leverage to create test method (unit testing)
  7. Easy to understand code for anyone,
  8. Maintenance of application is very easy.
  9. Alter update some new functionality is easy for anyone .
  10. Increase the performance of the application as compared to simple, normal architecture.