This example demonstrates how routing works in angular js using ngRoute, $routeProvider.
Following components are used:
1) Spring 4.3.0.RELEASE
2) Angular JS 1.4.4
3) Angular JS Route 1.4.4
Routes in angular js are configured in the config function using the $routeProvider service. In the example, we will configure 2 routes, 1st to load the list of Persons and 2nd to load list of Customers.
1) templateUrl - This triggers the Spring's controller to decide which html page to navigate to
2) controller - This triggers the angular js controller
3) resolve - This triggers the angular js service
Angular JS service file will communicate with the Spring controller where the services are configured. The call to spring is done using the $http.
Angular JS controller file sets the response of service to the UI scope variables defined in JSP page.
This page configures the indexApp ng app and displays the content using the ng-view directive.
index.jsp - In below JSP, when user clicks on "Get Persons List" hyperlink, it calls the config of app.js and check with the $routeProvider for the matching URL. It finds the "/loadPersons" and it hits the "templateUrl : 'loadPersons'" that goes to MainController.java to define the HTML page to navigate to. In MainController.java, it finds "persons" and so navigates to persons.jsp as shown below and displays the content on ng-view.