Обработка ответа RESTful Web-сервиса AngularJS’ом

Этот урок освещает процесс создания простого AngularJS клиента, который обрабатывает ответ от Spring MVC RESTful Web Service.

Что вы создадите

Вы создадите AngularJS клиент, который будет доступен при открытии файла index.html в вашем браузере и обрабатывать ответ от сервиса на:

http://rest-service.guides.spring.io/greeting

Сервис будет отвечать JSON приветствием:

{"id":1,"content":"Hello, World!"}

AngularJS клиент будет отображать ID и content в DOM.

Что вам потребуется

Примерно 15 минут свободного времени
Любимый текстовый редактор
Современный web-браузер
Интернет-соединение

Создание AngularJS контроллера

Для начала, вы создадите AngularJS модуль контроллера, который будет обрабатывать ответ REST сервиса:

public/hello.js

function Hello($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').
        success(function(data) {
            $scope.greeting = data;
        });
}

Этот модуль контроллера представлен в виде простой JavaScript функции, в которую передаются $scope и $http компоненты AngularJS. $http компонент используется для обработки ответа от REST сервиса "/greeting".

В случае успеха он присвоит вернувшийся JSON от сервиса переменной $scope.greeting, фактически устанавливая объект модели "greeting". Установив этот объект модели, AngularJS связать его с DOM страницы приложения, чтобы отобразить его пользователю.

Создание страницы приложения

Теперь, когда у вас есть AngularJS контроллер, вы создадите HTML страницу, которая будет загружать контроллер в web-браузер.

public/index.html

<!doctype html>
<html ng-app>
    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="hello.js"></script>
    </head>

    <body>
        <div ng-controller="Hello">
            <p>The ID is {{greeting.id}}</p>
            <p>The content is {{greeting.content}}</p>
        </div>
    </body>
</html>

Обратите внимание на следующие два тега скриптов в секции head:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="hello.js"></script>

Первый тег скрипта загружает минифицированную AngularJS библиотеку из CDN, поэтому вам не нужно загружать вручную AngularJS и помещать в ваш проект. Он также загружает код контроллера (hello.js) из приложения.

Библиотека AngularJS предоставляет несколько собственных атрибутов для использования их в стандартных HTML тегах. В index.html два таких атрибута:

Тег html имеет атрибут ng-app, который указывает, что страница является AngularJS приложением
Тег div имеет атрибут ng-controller, ссылающийся на Hello контроллер модуля

Также обратите внимание на два <p> тега, которые используют метки(обозначаются двойными фигурными скобками).

<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>

Метки ссылаются на свойства id и content объекта модели greeting для установки значений в случае успешной обработки ответа от REST сервиса.

Запуск клиента

Чтобы запустить клиент, вам необходимо поднять web сервер. Spring Boot CLI (Command Line Interface) включает встроенный Tomcat сервер, который предоставляет простой подход к обработке web содержимого. Более подробную информацию об установке и использовании CLI смотрите в учебном материале Создание приложений с Spring Boot.

Для обработки статического содержимого вам необходимо создать минимальное количество кода. Приведенный ниже app.groovy скрипт достаточен для того, чтобы Spring Boot знал, что вы хотите запустить Tomcat:

app.groovy

@Controller class JsApp { }

Теперь вы можете запустить приложение, используя Spring Boot CLI:

spring run app.groovy

Когда приложение запустится, откройте http://localhost:8080 в вашем браузере, где вы увидите:

Значение ID будет увеличиваться каждый раз при обновлении страницы

Итог

Поздравляем! Вы только что разработали AngularJS клиент, который обрабатывает ответ от Spring RESTful web сервиса.

С оригинальным текстом урока вы можете ознакомиться на spring.io.