The goal of this post is to write a single page application (SPA) to display a list of items inside a grid. This grid shall not only display a list of items but also allows all the CRUD operations: Create a new item and Read, Update and Delete for the contained items.

Additional requirements:

• Show a notification when a server request success or fail.
• Editing an item: Start editing with a double click and commit the edition with “Enter”.
• Everything shall be executed without refreshing the web page
• The complete list of items should only be requested one when the page is loaded.

UPDATE:

• Read AngularJS – CRUD Data Grid II
• Read AngularJS – CRUD Data Grid III

Results

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.

This is a screenshot of the AngularJS Crud Grid that we are going to implement:

Implementation

Let’s get our hands dirty, we will cover the following points:

1. Domain: Entity Framework + Domain Services
2. Server side: WebAPI + ViewModels
3. Client side: AngularJS + Bootstrap + Toastr
4. What’s next?

Continue reading →