Monthly Archives: September 2014

AngularJS – CRUD Data Grid II

Posted on by
14

The goal of this post is to extend the AngularJS CRUD Grid that we created in a previous post:  AngularJS – CRUD Grid I UPDATE:

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.

In that post we wrote a single page application (SPA) to display a list of items inside a grid. The grid allows all the CRUD operations: Create, Read, Update and Delete items. We will add now the following requirements:

  • # 1 Confirmation dialog before deleting an item.
  • # 2 Column ordering.
  • # 3 CRUD Grid as a directive
    • # 3.1 Dynamic columns generation.
    • # 3.2 Column options: Type, visibility, header, mandatory.
  • # 4 Cell editor directive, text and date mode. Use AngularJS date picker in date format columns

Results

You can see a demo here: AngularJS CRUD Grid II demo. I will share the interesting code of the application in this post and one of my next steps will be to upload all the code to GitHub.

Running application

Angular JS CRUD Grid. Dynamic columns

Delete confirmation

Angular JS CRUD Grid. Delete confirmation

Date picker

Angular JS CRUD Grid. Date picker.

Implementation

Continue reading →

AngularJS – Controller code structure

Posted on by
8

The goal of this post is to define a structure to write AngularJS controllers.

I identify three different parts inside the controller:

  • Public methods and variables: On top of the code and just the definition of the methods, the implementation will be inside the private area.
  • Code that run when the controller is created. Right after the public methods.
  • Private methods and variables. Prefixed with ‘_’.

This is the structure schema of my controllers:

app.controller("myController", myController);
 
function myController() {
    'use strict';
    var self = this;
 
    //// ---------------- PUBLIC ----------------
    //// PUBLIC fields
                ...
    //// PUBLIC Methods
		...
    //// ---------------- CODE TO RUN -----------
		...
    //// ---------------- PRIVATE ---------------
    //// PRIVATE fields
		...
    //// PRIVATE Functions - Public Methods Implementation	
		...
    //// PRIVATE Functions
		...
};

This is one of my controllers, a lot of code but someone interested only in its use and not in its implementation can easily read the ‘public’ area only : Continue reading →

AutoMapper – Model/ViewModel mapping and validation

Posted on by
3

The goal of this post is to implement a base class to map and initialize view models using the domain object. This base class should make not only the mapping between the model and the view model but also the validation of the view model using the model annotations.

Each requirement will be implemented in two different base classes, the validation class will inherit from the mapping one as the domain object is needed to validate the view model. It makes sense to split the logic to keep the code cleaner and also to be able to use only the mapping functionality in case that we don’t need the validation.

Result

When this class is implemented we can implement our view models like this:

public class ItemViewModel : BaseEntityMapperViewModel<ItemViewModel, Item>
{
    public int Id { get; set; }
    public string Name { get; set; }
}

The Model

public class Item
{
    [Key]
    public int Id { get; set; }
 
    [MaxLength(200)] 
    [Index(IsUnique = true)]
    public string Name { get; set; }
}

Sample of usage:

ViewModel – Model

My WebAPI controllers send and receive to the client a view model instance, when a instance needs to be updated in database it needs to be mapped to the domain first. This is because my domain services know nothing about view models:

// Update item
public void Put([FromBody]ItemViewModel updatedItem)
{
    if (!_itemsService.Update(updatedItem.MapToEntity()))
    {
        throw new HttpResponseException(HttpStatusCode.NotFound);
    }
}

Model – ViewModel

When a WebAPI need to load a instance from database and send it to the client, it loads a domain instance that needs to be mapped to a view model:

// Read item by id
public ItemViewModel Get(int id)
{
    var item = _itemsService.Get(id);
    if (item == null)
    {
        throw new HttpResponseException(HttpStatusCode.NotFound);
    }
    return ItemViewModel.MapFromEntity(item);
}

Implementation

Continue reading →

AngularJS – CRUD Data Grid I

Posted on by
30

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:

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:

AngularJS Crud Grid

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 →