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
Configuring Routes
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
app.js
'use strict'; var indexApp = angular.module('indexApp', [ 'ngRoute' ]); indexApp.config([ '$routeProvider', function($routeProvider) { $routeProvider.when('/loadPersons', { templateUrl : 'loadPersons', controller : "PersonController as personCtrl", resolve : { async : [ 'PersonService', function(PersonService) { return PersonService.fetchPersons(); } ] } }).when('/loadCustomers', { templateUrl : 'loadCustomers', controller : "CustomerController as custCtrl", resolve : { async : [ 'CustomerService', function(CustomerService) { return CustomerService.fetchCustomers(); } ] } }); } ]);
Service JS
Angular JS service file will communicate with the Spring controller where the services are configured. The call to spring is done using the $http.
appService.js
'use strict'; indexApp.factory('CustomerService', [ '$http', '$q', function($http, $q) { return { fetchCustomers : function() { return $http.get('customers').then(function(response) { return response.data; }, function(errResponse) { console.error('Error while fetching Items'); return $q.reject(errResponse); }); } }; } ]); indexApp.factory('PersonService', [ '$http', '$q', function($http, $q) { return { fetchPersons : function() { return $http.get('persons').then(function(response) { return response.data; }, function(errResponse) { console.error('Error while fetching Items'); return $q.reject(errResponse); }); } }; } ]);
Controller Js
Angular JS controller file sets the response of service to the UI scope variables defined in JSP page.
appController.js
'use strict'; indexApp.controller('CustomerController', [ 'async', function(async) { var self = this; self.customers = async; } ]); indexApp.controller('PersonController', [ 'async', function(async) { var self = this; self.persons = async; } ]);
Welcome 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.
<!DOCTYPE html> <html ng-app="indexApp"> <head> <title>Person App</title> <script src="resources/js/angular.js"></script> <script src="resources/js/angular-route.js"></script> <script src="resources/js/app.js"></script> <script src="resources/js/appService.js"></script> <script src="resources/js/jquery.min.js"></script> </head> <body> Home Screen <li><a href="#/loadPersons">Get Persons List</a></li> <li><a href="#/loadCustomers">Get Customers List</a></li> <div ng-view></div> <script src="resources/js/appController.js"></script> </body> </html>
persons.jsp
<!DOCTYPE html> <html ng-app="personApp"> <head> <title>Person App</title> <script src="resources/js/angular.js"></script> <script src="resources/js/angular-route.js"></script> <script src="resources/js/app.js"></script> <script src="resources/js/personService.js"></script> <script src="resources/js/jquery.min.js"></script> </head> <body> Persons Data - <div ng-repeat="person in personCtrl.persons"> Person Name - {{person.name}} <br> Person Id - {{person.id}} </div> <li><a href="#/back">Back</a></li> <script src="resources/js/personController.js"></script> </body> </html>
customers.jsp
<!DOCTYPE html> <html ng-app="customerApp"> <head> <title>Person App</title> <script src="resources/js/angular.js"></script> <script src="resources/js/angular-route.js"></script> <script src="resources/js/appRoute.js"></script> <script src="resources/js/customerService.js"></script> <script src="resources/js/jquery.min.js"></script> </head> <body> Customers Data - <div ng-repeat="customer in custCtrl.customers"> Customer Name - {{customer.name}} <br> Customer Id - {{customer.id}} </div> <li><a href="#/back">Back</a></li> <script src="resources/js/customerController.js"></script> </body> </html>
No comments:
Post a Comment