Статьи

Как создать одностраничное приложение с AngularJS и Spring MVC

Январь 14, 2018

В статье представлен рецепт создания
одностраничного приложения с AngularJS & Spring MVC, где для выполнения транзакций на сервере с использованием RESTful API требуются разные страницы
. Демонстрация создана на этой странице,
http://hello-angularjs.appspot.com/angularjs-single-page-app-restful-apis . Примеры кода и связанные понятия представлены для следующих требований одностраничного приложения:

  • Первоначально одна страница загружается с боковой навигацией.
  • Нажатие на боковую навигацию загружает новое представление (данные) с сервера, используя RESTful API с использованием ngResource, службы $ resource с методом действия «query»
  • Щелчок по ссылке на отдельные элементы загружает связанные данные с сервера, снова используя API RESTful с использованием ngResource, службы $ resource с методом действия «get».
  • Отправка набора данных использует API RESTful и отправляет данные на сервер для сохранения. Здесь используется служба $ resource с методом действия save.

В
демо — приложение представляет тривиальное приложение , которое позволяет пользователям выполнять некоторые из следующих:

  • Создать новых пользователей
  • Получить всех пользователей
  • Получить пользователей по идентификатору

В этом примере создается одна служба пользователя, которая выполняет транзакцию RESTful. Эта служба пользователя используется в нескольких различных контроллерах, используемых для загрузки / управления различными представлениями. Ниже приведены ключи для создания одностраничного приложения AngularJS, которое использует API-интерфейсы RESTful:

  • Угловые зависимости модуля
  • Код маршрутизации, который определяет маршруты для разных ссылок.
  • Код для управления транзакциями с RESTful API. Я создал пользовательский сервис User, который предоставляет API для выполнения транзакций с RESTful API.
  • Код контроллера, который определяет, как данные будут извлекаться / обрабатываться в каждом представлении
  • Код на стороне сервера для получения запроса RESTful API и отправки соответствующего ответа

 

Зависимости угловых модулей

Ниже приведены два разных модуля, которые необходимо будет включить при создании приложения:

  • ngRoute
  • ngResource

Ниже приведен пример кода:

var userApp = angular.module("userApp", [ 'ngRoute', 'ngResource' ]);

Вы также должны включить в элемент следующее:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-route.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-resource.js"></script>
Код маршрутизации

Ниже представлен код маршрутизации, который определяет, как будет обрабатываться каждая ссылка / путь (controller, templateURL).

userApp.config(function($routeProvider) {
	    $routeProvider.when('/users/new', {
       		                controller : 'NewUserCtrl',
		                       templateUrl : 'views/newuser.html'
	                }).when('/users/:userId', {
                       		controller : 'UsersByIdCtrl',
                       		templateUrl : 'views/userbyid.html'	
                	}).when('/users', {
                       		controller : 'UsersCtrl',
                       		templateUrl : 'views/users.html'	
                	}).otherwise({
		                       controller : 'SpaCtrl',
                       		templateUrl: 'views/spahome.html'
               });
});
Сервис пользователя — транзакции с RESTful API

Следующий код используется для обслуживания пользователей с использованием заводского рецепта AngularJS. Этот userservice внутренне создает экземпляр класса User, передавая службу $ resource его функции-конструктору. Обратите внимание, что $ scope передается отдельным API / методам и что значение для модели устанавливается в каждом API. После обновления значения модели появляются в пользовательском интерфейсе.

userApp.factory( 'userservice', [ '$resource', function( $resource ){
	return new User( $resource );
}] );

function User( resource ) {

	this.resource = resource; 

	this.createUser = function ( user, scope ) {
		// 
		// Save Action Method
		//
		var User = resource('/users/new');		
		User.save(user, function(response){
			scope.message = response.message;
		});		
	}

	this.getUser = function ( id, scope ) {
		//
		// GET Action Method
		//
		var User = resource('/users/:userId', {userId:'@userId'});
		User.get( {userId:id}, function(user){
			scope.user = user;
		})
	}

	this.getUsers = function( scope ) {
		//
		// Query Action Method
		//
		var Users = resource('/users');
		Users.query(function(users){
			scope.users = users;
		});
	}
}
AngularJS Controller Code for Different Views
// Controller when the main page/view loads
userApp.controller("SpaCtrl", [ '$scope', function($scope) {			
} ]);
// Controller for All Users View
userApp.controller("UsersCtrl", [ '$scope','userservice', function($scope, userservice) {	
	userservice.getUsers( $scope );		
} ]);
// Controller for New User View
userApp.controller("NewUserCtrl", [ '$scope','userservice', function($scope, userservice) {				

	userservice.getUsers( $scope );	

	$scope.createNewUser = function(){
		var newuser = { 'firstname':$scope.firstname, 'lastname': $scope.lastname, 'address':$scope.address, 'email':$scope.email };
		// Call UserService to create a new user
		//
		userservice.createUser ( newuser, $scope );

		// Push new user to existing table column
		//
		$scope.users.push( newuser );
		// Reset fields values
		//
		$scope.firstname='';
		$scope.lastname='';
		$scope.address='';
		$scope.email='';
	};		
} ]);
// Controller for Individual User View
userApp.controller("UsersByIdCtrl", [ '$scope','userservice', '$routeParams', function($scope, userservice, $routeParams) {	
	userservice.getUser($routeParams.userId, $scope);	
} ]);
Spring MVC Controller Code for RESTful API

Following demonstrates the Spring MVC Controller code for three different RESTful APIs with URL written as part of RequestMapping value parameter:

  • All Users (/users) 
    @RequestMapping(value = "/users", method = RequestMethod.GET)
        public  @ResponseBody String getAllUsers( ModelMap model ) {
            String jsonData = "[{\"id\":\"3253123\",\"firstname\":\"Chris\",\"lastname\":\"Johnson\",\"address\":\"211, Geoffrey Drive\",\"city\":\"Newark\",\"phone\":\"999-888-6666\",\"email\":\"[email protected]\"},{\"id\":\"67643837\",\"firstname\":\"Bill\",\"lastname\":\"Derkson\",\"address\":\"201, Sleepy Hollow Drive\",\"city\":\"Newark\",\"phone\":\"999-777-2222\",\"email\":\"[email protected]\"}]";
            return jsonData;
        }

  • New Users (/users/new) 
    @RequestMapping(value = "/users/new", method = RequestMethod.POST)    
        public  @ResponseBody String createNewUser( @RequestBody User user )   {        
            //
            // Code processing the input parameters
            //    
             String response = "{\"message\":\"Created New User - firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail()+"\"}";
            return response;
        }

  • User By Id (/users/{id} 
    @RequestMapping(value = "/users/{id}", method = RequestMethod.GET)    
        public  @ResponseBody String getUsersById( @PathVariable("id") long userId )   {        
            //
            // Code processing the input parameters
            //    
            String response = "{\"id\":\""+ userId + "\",\"firstname\":\"FirstName\",\"lastname\":\"LastName\",\"address\":\"Some Address\",\"age\":\"SomeNo\",\"email\":\"[email protected]\"}";
            return response;
        }

36
Share: