Building a CRUD Application with ag-Grid — Part 3
In Part 3 of this Series, we create the scaffolding for our Angular application and get our data displayed in our first, simple, grid.
Series Chapters
- Part 1: Introduction & Initial Setup: Maven, Spring and JPA/Backend (Database)
- Part 2: Middle Tier: Exposing our data with a REST Service
- Part 3: Front End — Initial Implementation
- Part 4: Front End — Grid Features & CRUD (Creation, Updates and Deletion)
Introduction
The completed code for this blog series can be found here (once the series is complete), with this particular section being under Part 3
In order for our data to be useful we need to make it available to users. So far we’ve exposed our data via REST service in the previous part, but now let’s make it available to our users in the browser.
We’ll be running an Angular application. One of the quickest way to spin up an Angular application is to make use of the Angular CLI, which we’ll make use of here.
For a quick standalone guide on getting up an running with ag-Grid, Angular and Angular CLI please see here.
Scaffolding with Angular CLI
First things first, let’s install Angular CLI. In our case we’re going to install it globally as it’s easier to use this way, but you can install it locally (i.e. local to your project) if you prefer.
npm install -g @angular/cliNext we’ll create a new Angular application in the root of the project:
ng new frontendAngular CLI will create a scaffolded project all ready to go — we can test it as follows:
cd frontend
ng serveYou can now navigate to http://localhost:4200/ and see the results of the scaffolding:
Development
There are a number of ways you might structure your overall application — in this series we’re going to keep the front and backends separate both in structure and in execution, at least when in development mode.
Doing so makes front end development easier and allows us to separate the two tiers (front and middle). We’ll cover application packaging (into a single deployable artifact) later in the series.
We’ll run the server and front end code separately in development mode:
# server
mvn spring-boot:run# in a separate terminal/window, serve the front end code
ng serve
First Call to the Server
We’ll make use of a simple Application architecture in the frontend:
As a first pass let’s attempt to retrieve all Olympic Data from the server. In order to do that we’re going to break our front end application into further packages: one for our model and another for our services.
The model classes are pretty simple and are pretty much mirrors of their Java counterparts:
import {Country} from './country.model';
import {Result} from './result.model';export class Athlete {
id: number;
name: string;
country: Country;
results: Result[];
}
We’ll also create a AthleteService that will interact with our REST endpoint:
import {Injectable} from '@angular/core';
import {Athlete} from '../model/athlete.model';
import {Http, Response} from '@angular/http';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';@Injectable()
export class AthleteService { private apiUrl = 'http://localhost:8080/athletes'; constructor(private http: Http) {
} findAll(): Observable<Athlete[]> {
return this.http.get(this.apiUrl)
.map((res: Response) => res.json())
.catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}
}
There’s a fair bit going on here — we’re creating a Service that will make use of Angular's Http service. In order to access it we use Angular Dependency Injection facility, so all we need to do is specify it in our constructor.
In the findAll method we're providing an Observable that will make a call to our REST endpoint, and on retrieval, map it to the model classes we created above. We actually get a lot of functionality from not too many lines of code here, which is great.
So far so good — let’s plug this service into our application next:
export class AppComponent implements OnInit {
private athletes: Athlete[]; constructor(private athleteService: AthleteService) {
} ngOnInit() {
this.athleteService.findAll().subscribe(
athletes => {
this.athletes = athletes
},
error => {
console.log(error);
}
)
}
}
We’ll create a quick template to output our results:
<div *ngFor=”let athlete of athletes”>
<span>{{athlete.id}}</span>
<span>{{athlete.name}}</span>
<span>{{athlete?.country?.name}}</span>
<span>{{athlete?.results?.length}}</span>
</div>Ok, great — we should be good to go now right? Unfortunately not — if we run both the front and backend as it stands we’ll get the following error:
The problem here is that our Angular application is running in localhost:4200, but our backend application is running on localhost:8080. The browser will by default prevent this due to the risk of malicious indirection - you can read more about CORS here, but for now we have an easy solution to this.
Let’s head back to our AthleteController.java controller and enable CORS:
@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class AthleteController {With this one line we’re good to go. Note that in a real application you’d probably want to only enable CORS for local development (perhaps with Spring profiles). You also want to be able to externalise the ports you run on via the use of properties.
package com.aggrid.crudapp.controllers;
import com.aggrid.crudapp.model.Athlete;
import com.aggrid.crudapp.repositories.AthleteRepository;
import org.springframework.web.bind.annotation.*;
import java.util.Optional;
@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class AthleteController {
private AthleteRepository athleteRepository;
public AthleteController(AthleteRepository athleteRepository) {
this.athleteRepository = athleteRepository;
}
@GetMapping("/athletes")
public Iterable<Athlete> getAthletes() {
return athleteRepository.findAll();
}
@GetMapping("/athlete")
public Optional<Athlete> getAthlete(@RequestParam(value = "id") Long athleteId) {
return athleteRepository.findById(athleteId);
}
@PostMapping("/saveAthlete")
public Athlete saveAthlete(@RequestBody Athlete athlete) {
return athleteRepository.save(athlete);
}
@PostMapping("/deleteAthlete")
public void deleteAthlete(@RequestBody Long athleteId) {
athleteRepository.deleteById(athleteId);
}
}Ok, let's try that again - let's start our applications and checkout the results:
# server
mvn spring-boot:run
# in a separate terminal/window, serve the front end code
ng serveOnce both have started you can navigate to localhost:4200. You should see something like this:
Great, good progress so far - we now know we can call the backend successfully!
ag-Grid
We're finally in a position to start hooking our data into ag-Grid!
First, let's install the ag-Grid dependencies - as we're going to be using a few of the Enterprise features that ag-Grid offers we'll install both the ag-grid and ag-grid-enterprise dependencies.
If you're not using any of the Enterprise features then you only need to install the ag-grid dependency.
npm install --save ag-grid ag-grid-enterprise ag-grid-angularThe ag-grid-angular is what allows us to talk to the grid and provides the rich Angular functionality we want.
We also need to let the Angular CLI know about the styles we want to use. In our demo we're going to use the Fresh Theme, but there are others available - please see the Themes Documentation for more details.
In order to let the CLI know about the styles we want to add we need to add them to the .angular-cli.json file. Look for the styles section and add the following CSS entries:
"styles": [
"styles.css",
"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
],styles.css is a style file generated by Angular CLI - you can either keep it or remove it. We won't be using it in our demo here.
Next we need to add the AgGridModule to our application. We do this by adding it to our app.module.ts:
... other imports
import {AgGridModule} from 'ag-grid-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
AgGridModule
...rest of moduleWe now have the ag-Grid dependencies all setup - our next step is to actually use ag-Grid to display some data.
Our Grid Component
Let's create a new component that will be responsible for displaying our data in ag-Grid:
ng generate component GridThis will create a new Angular component for us and automatically register it in our Angular module.
installing component
create src/app/grid/grid.component.css
create src/app/grid/grid.component.html
create src/app/grid/grid.component.spec.ts
create src/app/grid/grid.component.ts
update src/app/app.module.tsLet's open up our new Component and inject our AthleteService as before. The AthleteService will be responsible for supplying data to the Grid. Later, it will also be responsible for updates & deletions too.
We also need two properties for our component: one for row data and one for column definitions - at a minimum the grid require what columns you want in the Grid, as well as what data to display.
Finally, we'll hook into the gridReady event from the Grid. We do this for two reasons: firstly, to access the GridApiand ColumnApi and secondly to auto resize the columns on initialisation.
export class GridComponent implements OnInit {
// row data and column definitions
private rowData: Athlete[];
private columnDefs: ColDef[];
// gridApi and columnApi
private api: GridApi;
private columnApi: ColumnApi;
// inject the athleteService
constructor(private athleteService: AthleteService) {
this.columnDefs = this.createColumnDefs();
}
// on init, subscribe to the athelete data
ngOnInit() {
this.athleteService.findAll().subscribe(
athletes => {
this.rowData = athletes
},
error => {
console.log(error);
}
)
}
// one grid initialisation, grap the APIs and auto resize the columns to fit the available space
onGridReady(params): void {
this.api = params.api;
this.columnApi = params.columnApi;
this.api.sizeColumnsToFit();
}
// create some simple column definitions
private createColumnDefs() {
return [
{field: 'id'},
{field: 'name'},
{field: 'country'},
{field: 'results'}
]
}
}And our view template looks like this:
<ag-grid-angular style="width: 100%; height: 800px;"
class="ag-theme-fresh"
(gridReady)="onGridReady($event)"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>Notice that this is where we're binding to the row data and column definitions, as well as hooking into the gridReadyevent. There are other ways of doing this, but this is clearer and more idiomatic from an Angular perspective.
As we're now using the AthleteService in our Grid Component, we can remove it from app.component.ts.
Finally, we can hook our component into app.component.html:
<app-grid></app-grid>With this in place we can now run our application...but we don't see quite what we're hoping for:
The reason for this is pretty simple - both Country and Results are complex data. They don't have a simple key-value relationship unlike the rest of the data.
We can fix this easily by making use of a Value Getter which will convert the complex raw data into something more display friendly:
private createColumnDefs() {
return [
{field: 'id'},
{field: 'name'},
{field: 'country', valueGetter: (params) => params.data.country.name},
{field: 'results', valueGetter: (params) => params.data.results.length}
]
}Here the valueGetter callback will be called for every row for country and results, where we return the country name and results length respectively.
Summary
That might have seemed like a fair bit of work, but it’s worth noting that we only had to import a single module and then reference the grid in a single component to get a grid up and running.
With the addition of a few simple properties we can enable filtering, sorting and so on. We can also start working providing the rest of the CRUD operations (creation, updates and deletions).
We’ll take a look at all that and more in the next part of the series.
See you next time!
Learn more about AG Grid — a high performance JavaScript Data Grid. We write the code to visualise data in interactive tables so you can concentrate on writing the application code.
