Modern Web sample app

Let’s assume we have an organization that has departments and employees, and you want a Web app that one could use to manage the data. We can use this technology stack to obtain what we want in a highly customizable system:

architecture

  • A SQL Server database (OrganizationDatabase.mdf) to store the data; two tables – Departments and Employees – may be used to host relational data; each employee may have a department (optional), so Employees.DepartmentID should be set as nullable.
  • Entity Framework (OrganizationDatabaseModel.edmx) configured for the database to map relational data to .NET objects (generated entity classes, such as Department and Employee);
  • ASP .NET WebApi controllers that expose data as resources on HTTP (REST services).
    • ASP .NET WebApi host can also include logic that extends the model, such as counting employees in a department;
    • Exposing data could be done through data transfer objects (DTOs), which can be presentation-oriented;
    • Here is where all logic can take place; server side validation is also mandatory;
    • Actually, a separate assembly could contain the domain model and logic, that is reused by this host to perform extra logic on the entities – Onion architecture (recommended); however, in this sample we will use transaction script instead, as the operations are very simple, and very close to CRUD operations only, trying to focus on infrastructure and getting things done faster rather than reusable and more maintenable.
  • AngularJS resources – essentially $http calls that get and update data through WebAPI DTOs mapped to JSON client side objects;
  • AngularJS controllers – reading data using $http get calls, mapping the response data to $scope bindings, and then sending $scope data changed by the end user back to the server using $http post, put, and delete calls, as needed;
  • HTML5 views on the client side are mapped to AngularJS controllers using the Angular routing configuration of the application; a menu is also displayed in index.html, to allow selecting the available root views, and Bootstrap CSS is used for styling.

Interested? Here is the project that I managed to develop to help you learn this technology stack. Feel free to download its entire source code and play with it until you are comfortable enough to start your own application development. Enjoy!

Advertisements

About Sorin Dolha

My passion is software development, but I also like physics.
This entry was posted in .NET, HTML5, JavaScript. Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s