Миграция Spring Web MVC-приложения из JSP в AngularJS

Приведенный выше фрагмент кода показывает, как можно создать «ресурс», объявив ресурс «Владелец», а затем инициализировав его как службу «Владелец». Затем контроллер может использовать эту службу для запроса владельцев с конечной точки RESTful. Таким образом, вы можете легко создавать ресурсы, которые требуются вашему приложению, и легко сопоставлять их с моделью вашей бизнес-области. Это объявление выполняется только один раз в файле app.js. Вы можете посмотреть на этот файл в действии здесь .

При переходе на RestAPI важно помнить, что RestAPI является общедоступным интерфейсом, а не содержимым веб-сайта. Модель JSON полностью видна пользователям.

Например, если нам нужно отобразить профили пользователей, маскирование паролей должно выполняться для объекта JSON, а не в шаблоне. Чтобы сделать это, иногда нам нужно создавать объекты DTO для нашего RestAPI.

Синхронизация состояний между бэкендом и вашим приложением AngularJS

Синхронизация состояний — это то, чем нужно управлять при разработке клиент-серверной архитектуры. Вам нужно будет подумать о том, как ваше приложение обновляет свое состояние из серверной части или обновлять свое представление при изменении какого-либо состояния.

Аутентификация

Благодаря общедоступному клиентскому коду становится еще важнее продумать, как вы хотите аутентифицировать своих пользователей и поддерживать сеанс с вашим приложением. Одним из важных соображений при выборе метода аутентификации является выбор между сеансом с сохранением состояния или сеансом без сохранения состояния в зависимости от архитектуры вашего приложения.

Вы можете проверить серию блогов Дэйва Сайера о том, как интегрировать AngularJS с Spring Security здесь .

тестирование

AngularJS поставляется с необходимыми инструментами, которые помогут вам выполнить тестирование на всех уровнях разработки JavaScript от модульного до функционального тестирования. Планирование тестирования и выполнения сборок, включающих эти тесты, определит качество вашего клиентского интерфейса. Мы используем плагин maven, призванный frontend-maven-pluginпомочь нам в наших тестах сборки.

Вывод

Миграция на AngularJS из JSP может показаться сложной, но в долгосрочной перспективе она может быть очень полезной, поскольку она обеспечивает более удобный и проверяемый пользовательский интерфейс. Тенденция к отображаемым представлениям на стороне клиента также стимулирует создание более отзывчивых веб-приложений, которым ранее мешал дизайн в рендеринге на стороне сервера. Появление HTML 5 и CSS3 открыло нам новую эру в технологиях рендеринга View с различными конкурирующими средами, такими как EmberJs, ReactJs, BackboneJs и т. Д. Однако, с точки зрения импульса, AngularJS привлекает много внимания и использует это на некоторое время, мы можем понять, почему. Мы надеемся, что эта статья содержит полезные советы для людей, которые намерены сделать решающий шаг. Вы можете изучить форк Spring Petclinic, в котором есть несколько примеров кода, чтобы увидеть, как мы это сделали.

аппендикс

Краткое введение в AngularJS

AngularJS — это JavaScript-фреймворк, созданный в Google, который позиционируется как «Superheroic Web MVW Framework» (где «W» в «MVW» — это насмешливая ссылка на «что угодно» для всех различных архитектур MVx) . Основанный на архитектуре MVx, AngularJS обеспечивает структуру для разработки JavaScript и, таким образом, дает JavaScript повышенный статус по сравнению с традиционными приложениями Spring + JSP, которые используют JavaScript только для обеспечения этой интерактивности в пользовательском интерфейсе.

С AngularJS ваш слой представлений на основе JavaScript также наследует такие функции, как Dependency-Injection, расширение HTML-словаря (посредством использования пользовательских директив), интеграция модульного тестирования и функционального тестирования, а также селекторы DOM ala JQuery (используя в качестве jqlite его предоставляет только часть JQuery, но вы также можете легко использовать JQuery, если хотите). AngularJS также вводит области действия в ваш код JavaScript, так что переменные, объявленные в вашем коде, привязываются только к необходимой области. Это предотвращает загрязнение переменных, которое непреднамеренно возникает при увеличении размера вашего JavaScript.

При разработке приложения Spring Web MVC с использованием JSP вы, скорее всего, будете использовать предоставленные Spring теги формы, чтобы связать входные данные формы с моделью на стороне сервера. Аналогично, AngularJS предоставляет способ привязки входных данных формы к моделям на стороне клиента. Фактически, он обеспечивает мгновенную двустороннюю привязку данных от ввода формы к вашей модели в приложении JavaScript. Это означает, что вы не только получаете преимущества от обновления вашего представления с изменениями в вашей модели JavaScript, любые изменения, которые вы вносите в свой пользовательский интерфейс, также будут обновлять модель JavaScript (и, следовательно, любые другие представления, связанные с этой моделью). Почти волшебно видеть, что все представления, привязанные к одной и той же модели JS в приложении, автоматически обновляют модель.

Более того, поскольку ваша модель может быть настроена на определенную область, будут затронуты только представления, принадлежащие к одной и той же области, что позволит вам помещать в песочницу код, который должен быть локальным только для определенной части вашего представления. (Это делается с помощью атрибута AngularJS, ng-controllerкоторый задается в ваших шаблонах HTML). Вы можете увидеть разницу в следующем разделе, сравнивающем теги JSP и директивы AngularJS.

Двухстороннее связывание данных

В веб-приложении Spring-JSP существует один способ привязки данных из модели Spring в представление jsp. Любое изменение модели будет отражено в представлении Jsp, но не наоборот. Это природа веб-приложений. Если мы создаем настольное приложение, можно сделать обратную привязку данных с помощью Swing UI.

Однако для веб-приложения, предоставляющего ресурсы REST, прямой привязки данных может не быть. Данные отправляются с сервера в браузер в виде объектов JSON. Без AngularJS и тому подобного разработчики должны написать код JavaScript, чтобы связать объект JavaScript с элементами управления html.

Поскольку ручное связывание данных является утомительной задачей, некоторые разработчики пытаются автоматизировать задачу, создавая среду JavaScript для связывания данных. Стоит помнить, что эта привязка данных происходит на стороне клиента, и модель привязки данных является объектом JavaScript, а не моделью на стороне сервера.

Angular продвигает эту идею дальше, создавая двустороннюю привязку. Изменение значений в элементе управления HTML будет отражено в объекте в режиме реального времени.

Связывание является полезной концепцией, если вам нужно иметь дело со сложными компонентами пользовательского интерфейса, такими как таблицы AJAX.

For example: we need to render a list of users and roles in an AngularJs application, with the following html template:

<tr ng-repeat="user in users">
<td>{{user.username}}</td>
<td>{{user.role}}</td>
</tr>
...
<a ng-click="addUser()">Add new user</a>

$scope.addUser = function(){
newUser = {}
$scope.users.push(newUser );
}

<div class="row thumbnail-wrapper">
  <div data-ng-repeat="pet in currentOwner.pets" class="col-md-3">
    <div class="thumbnail">
      <img data-ng-src="images/pets/pet{{pet.id % 10 + 1}}.jpg" 
        class="img-circle" alt="My Pet Image">
      <div class="caption">
        <h3 class="caption-heading" data-ng-bind="pet.name"></h3>
        <p class="caption-meta" data-ng-bind="pet.birthdate"></p>
        <p class="caption-meta"><span class="caption-label" 
           data-ng-bind="pet.type.name"></span></p>
      </div>
      <div class="action-bar">
        <a class="btn btn-default" data-toggle="modal" data-target="#petModal" 
          data-ng-click="editPet(pet.id)">
          <span class="glyphicon glyphicon-edit"></span> Edit Pet
        </a>
        <a class="btn btn-default">
          <span></span> Add Visit
        </a>
      </div>
    </div>
  </div>
</div>

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body data-ng-app="demo">
    <h1>Scopes in AngularJS</h1>
    <div data-ng-controller="parentController">
      <div data-ng-controller="childController">
        <span>This is a demonstration of scopes</span>
        <div>
          Parent model: <span data-ng-bind="$parent.model.name"></span>
        </div>
        <div>
          Current model: <span data-ng-bind="model.name"></span>
        </div>
        <div>
          <button data-ng-click="updateModel()">Click me</button>
        </div>
      </div>
    </div>
  </body>
</html>