How to work with Angular Routing – Spring Boot + Angular 4

In the previous post, We made a big step, our Angular Application can exchange data with a remote server. But up to now, we don’t have any mention on Angular navigations. So in the tutorial, JavaSampleApproach will guide how to navigate among the views with Angular Routing.

Related articles:
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite
How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4

II. Angular Routing

The previous post, our App just works with only 1 url: base href="/". And in the tutorial, we need to change the base url to '/jsa' and do a navigation among views with difference urls:

angular routing - list customers

angular routing - customer -details

We have 2 urls will show in browser address bar:
http://localhost:4200/jsa/customer
http://localhost:4200/jsa/detail/{id}

How it work?

– When we enter in browser address bar: http://localhost:4200 or http://localhost:4200/jsa, our app will always redirect to http://localhost:4200/jsa/customer with customer-list view.
– Then when we click on each customer item link on customer-list view, or We enter a link http://localhost:4200/jsa/detail/{id} in browser address bar, the browser will show a customer detail view with the url http://localhost:4200/jsa/detail/{id}.
– Press on Back button, the browser’s url will be backed one step to http://localhost:4200/jsa/customer.

How to do it?
-> We can do the navigations with Angular Routing!

III. Practice

In the tutorial, we will re-use all the sourcecode that we had done with the previous post. So you can check out it for more details:
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4

Step to do:
With Angular Client:
– Create an App Routing Module
– Add new function for DataService
– Implement a new CustomerComponent
– Re-Implement CustomerDetailComponent
– Re-Implement AppComponent

With SpringBoot Service:
– Add a @GetMapping function – getCustomer by Id

Deployment:
– Integrate Angular App and SpringBoot Server
– Run & Check results.

1. Create an App Routing Module

Under folder /angular4client/src/app, create a new file app-routing.module.ts:

– The url /detail/:id will be served by CustomerDetailsComponent
– The url /customer will be served by CustomersComponent

What is Routes?

Routes is an array of route configurations. We see some common properties of Routers:
path: uses the route matcher DSL.
pathMatch: specifies the matching strategy.
component: is a component type.
redirectTo: is the replaced url fragment.

Need register AppRoutingModule with AppModule:

2. Add new function for DataService

– Create a function getCustomer by id:

For sharing a singleton DataService with all Components in Angular App, register DataService in AppModule:

Full sourcecode:

3. Implement a new CustomerComponent

Create a new CustomerComponent, see the new project’s structure:

angular routing - new structure app

we re-use the current implementation of AppComponent for CustomerComponent:

Implement CustomerComponent‘s view:

[routerLink] is used to add an anchor tag to the template that will create triggers
when having any clicks for navigating to the component: CustomerDetailComponent.

4. Re-Implement CustomerDetailComponent

Inject DataService, ActivatedRoute, Location to CustomerDetailsComponent:

Location is a service to interact with a browser’s URL. Depending on LocationStrategy, Location will either persist to the URL’s path or the URL’s hash segment.
ActivatedRoute: contains the information about a route that can be used to traverse and retrieve the state of router tree.

Full Sourcecode:

We implement ngOnInit() to get info of a customer by function: dataService.getCustomer(+params['id'])).
‘+’ in +params['id'] is used to convert String type to number type.

Using Location, a goBack() function navigates backward one step in the browser’s history stack.

About the view of CustomerDetailsComponent (customer-details.component.html), we add a goBack button:

5. Re-Implement AppComponent

Now, change the implementation of AppComponent as below:

The AppComponent‘s view:

router-outlet is used by the router to indicate a place where to display routing components.
-> So the CustomerComponent and CustomerDetailComponent will be showed under AppComponent‘s view.

6. Add new @GetMapping – GetCustomer by Id in SpringBoot RestApi

In WebController.java, add new function: @GetMapping getCustomer

7. Integrate Angular App and SpringBoot Server

Angular4Client and SpringBoot server work independently on ports 8080 and 4200.
Goal of below integration: the client at 4200 will proxy any /api requests to the server.

Step to do:

– Edit package.json file for “start” script:

>>> More details at: How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite

8. Run & Check Results

Build and Run the SpringBoot project with commandlines: mvn clean install and mvn spring-boot:run
Run the Angular App with command: npm start
Make a request: http://localhost:4200/, results:

–> Response’s data

angular routing - customer -details - response data

–> Customer List

angular routing - list customers

Click to Mary’s link, results:

-> Response’s data

angular routing - customer -details - response Mary

–> Customer Details

angular routing - customer -details

Press Back button, the browser’s url will be backed one step to http://localhost:4200/jsa/customer.

IV. Sourcecode

AngularRoutingClient
SpringBootAngularHttpGet


Related Posts



4 thoughts on “How to work with Angular Routing – Spring Boot + Angular 4”

    1. To Deploy SpringBoot server with Angular4 client
      Firstly, You build angularclient with command ng build -prod
      We have 2 approaches to deployment SpringBoot server with angular4 client:
      –> Manually copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.
      –> Using Maven plugin maven-resources-plugin to copy all files from dist folder to /src/main/resources/static folder of SpringBoot server project.

  1. The url works fine when I click by mouse for each link. But when I try to hit in address bar the same address, the request goes to server and server show 404 error. How can I solve this?

Got Something To Say:

Your email address will not be published. Required fields are marked *

*