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.
- 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.
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:
Let’s get our hands dirty, we will cover the following points:
- Domain: Entity Framework + Domain Services
- Server side: WebAPI + ViewModels
- Client side: AngularJS + Bootstrap + Toastr
- What’s next?