In this article we will show how to use the UI Grid Component with AngularJS to display an editable grid. The back end of our UI Grid will be a REST Service running on WildFly application Server.
Introduction
While this tutorial focuses on developing a REST application using Jakarta EE and AngularJS, it’s important to note that AngularJS is now considered a legacy framework. For modern web development, Angular (the successor to AngularJS) is a more appropriate choice due to its enhanced performance, modular architecture, and better support for mobile development.
Why Choose Angular Over AngularJS?
- Performance: Angular offers improved performance with a more efficient change detection mechanism.
- Modularity: Angular’s component-based architecture makes it easier to manage and scale applications.
- Mobile Support: Angular is designed with mobile support in mind, making it more suitable for today’s web applications.
- Active Support: Angular is actively maintained and regularly updated by Google, ensuring you have access to the latest features and security updates.
For a more up-to-date approach, I recommend checking out my article on developing a Jakarta EE 10 application with an Angular frontend: Jakarta EE 10 Application with an Angular Frontend
That being said, in the next section we will briefly introduce the REST Endpoint and then we will create some simple and more advanced UI Grid to display the Data in Tabular format.
Step 1: The REST Endpoint
This is our server REST Service which contains the standard CRUD methods to perform Create, Read, Update and Delete Operations on the Customer Entity:
@Path("customers")
@ApplicationScoped
@Produces("application/json")
@Consumes("application/json")
public class CustomerEndpoint {
@Inject CustomerRepository customerRepository;
@GET
public List<Customer> getAll() {
return customerRepository.findAll();
}
@POST
public Response create(Customer customer) {
Customer c = customerRepository.createCustomer(customer);
return Response.status(201).entity(customer).build();
}
@PUT
public Response update(Customer customer) {
System.out.println("Called update for "+customer);
customerRepository.updateCustomer(customer);
return Response.status(204).build();
}
@DELETE
public Response delete(@QueryParam("id") Long customerId) {
customerRepository.deleteCustomer(customerId);
return Response.status(204).build();
}
}
And here is the Customer JPA Entity we will display in the UI Grid:
@Entity
@NamedQuery(name = "Customers.findAll",
query = "SELECT c FROM Customer c ORDER BY c.id")
public class Customer {
@Id
@SequenceGenerator(
name = "customerSequence",
sequenceName = "customerId_seq",
allocationSize = 1,
initialValue = 1)
@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "customerSequence")
private Long id;
@Column(length = 40)
private String name;
@Column(length = 40)
private String surname;
// Getters/Setters omitted for brevity
}
Coding the Front End
To use UI Grid with AngularJS you need to link the following libraries in your HTML page:
<head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.10.0/ui-grid.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.10.0/ui-grid.min.css" type="text/css" /> </head>
Then, in the body of your page, include the AngularJS Controller with the following functions:
<body>
<div ng-controller="CustomerController">
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script>
// Define your AngularJS app module
var app = angular.module('myApp', ['ui.grid']);
// Create a controller for the customer data
app.controller('CustomerController', function($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'id', displayName: 'ID' },
{ name: 'name', displayName: 'Name' },
{ name: 'surname', displayName: 'Surname' }
],
enableGridMenu: true,
enableSorting: true,
enableFiltering: true
};
// Fetch customer data from the REST service
$http.get('rest/customers')
.then(function(response) {
$scope.gridOptions.data = response.data;
})
.catch(function(error) {
console.error('Error retrieving customer data:', error);
});
});
</script>
</body>
</html>
By deploying the above grid.html page, you will be able to see the data in Tabular Format as in this snapshot:
An Advanced UI Grid
In the following example, we will add more functionalities to our UI Grid. We will add an “Add Button” button which will allow us to insert a new Entity. Also, we will add a Delete button to delete an Entity from the Grid.
Here is the grid2.html page:
<body>
<div ng-controller="CustomerController">
<div>
<input type="text" ng-model="newName" placeholder="Name">
<input type="text" ng-model="newSurname" placeholder="Surname">
<button class="btn btn-primary" ng-click="addCustomer()">Add Customer</button>
</div>
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script>
// Define your AngularJS app module
var app = angular.module('myApp', ['ui.grid']);
// Create a controller for the customer data
app.controller('CustomerController', function($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'id', displayName: 'ID' },
{ name: 'name', displayName: 'Name' },
{ name: 'surname', displayName: 'Surname' },
{
name: 'actions',
displayName: 'Actions',
cellTemplate:
'<div class="ui-grid-cell-contents">' +
' <button class="btn btn-primary btn-xs" ng-click="grid.appScope.deleteCustomer(row.entity.id)">Delete</button>' +
'</div>'
}
],
enableGridMenu: true,
enableSorting: true,
enableFiltering: true
};
// Fetch customer data from the REST service
$http.get('rest/customers')
.then(function(response) {
$scope.gridOptions.data = response.data;
})
.catch(function(error) {
console.error('Error retrieving customer data:', error);
});
// Function to add a new customer
$scope.addCustomer = function() {
var newCustomer = {
name: $scope.newName,
surname: $scope.newSurname
};
$http.post('rest/customers', newCustomer)
.then(function(response) {
$scope.gridOptions.data.push(response.data);
$scope.newName = '';
$scope.newSurname = '';
})
.catch(function(error) {
console.error('Error adding customer:', error);
});
};
// Function to delete a customer
$scope.deleteCustomer = function(customerId) {
$http.delete('rest/customers?id=' + customerId)
.then(function() {
var index = $scope.gridOptions.data.findIndex(function(customer) {
return customer.id === customerId;
});
if (index !== -1) {
$scope.gridOptions.data.splice(index, 1);
}
})
.catch(function(error) {
console.error('Error deleting customer:', error);
});
};
});
</script>
</body>
</html>
Here is the new UI Grid when you deploy the application:
Conclusion
In conclusion, this tutorial has provided a comprehensive guide on utilizing AngularJS and UI Grid to present REST data in a tabular format. By following the step-by-step instructions, developers can leverage the power of AngularJS to create dynamic and interactive web applications.
Source code: https://github.com/fmarchioni/mastertheboss/tree/master/jax-rs/angularjs