Здесь я собираюсь поделиться пошаговой инструкцией по интеграции приложения SpringBoot и внешнего интерфейса Angular2. Программа будет легко собрана maven, а тесты и необходимые артефакты загружены и пройдены простой командой «mvn package». Все шаги будут выполняться в системе Windows, но наверняка то же самое можно сделать и в других. Цикл статей призван обобщить по крупицам знания из многих мест и будет полезен разработчикам, только начинающим свой путь с angular, spring-boot, web-разработки, а также только находящимся в поиске

Предварительные требования.

  1. Убедитесь, что на вашем компьютере настроена Java8 https://www.mkyong.com/java/how-to-set-java_home-on-windows-10/

2. Установите Maven с https://maven.apache.org/download.cgi

3. Git для windows с https://gitforwindows.org/

4. Установите npm с https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.

5. И, конечно же, Angular-CLI https://angular.io/cli, чтобы иметь возможность создавать ng-app из командной строки.

Надеюсь, вы преуспели в предыдущих пяти шагах и

Прежде всего нужно зайти в Spring-Initializr и настроить простой проект только с одной зависимостью, Spring Web см. на картинке ниже:

Хорошо, у вас установлены все параметры, поэтому просто нажмите кнопку «Создать проект». Следующее, что вам нужно сделать, это распаковать zip-файл в любое удобное место на вашем компьютере и открыть консоль (cmd) в том же месте (например, в моем случае это «D:\GitHub\SbAM› ”

Важно. Убедимся, что все работает нормально; вам просто нужно запустить следующую команду:

После этой команды вы увидите что-то вроде этого:

В красном прямоугольнике я отметил номер порта для локального хоста (ваша машина), вы можете проверить ссылку https://localhost:8080, скорее всего там написано:

потому что нет содержимого для отображения. Остановите приложение spring в окне командной строки (либо закройте его, либо shift+ctrl+c) .

Простое приложение — простая страница, получите «SbAM\src\main\resources\static» и создайте файл «index.html» со ​​следующим содержимым:

сохраните его и получитекорневую папку проекта «SbAM», запустив в ней:

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

Все идет нормально? если вы видите страницу, как показано выше, мои поздравления, все идет хорошо.

Конфигурация углового приложения.

Back-end часть настроена, так что можно приступать к работе над face aka front-end. Чтобы разделить папки и сохранить различные настройки в своем месте, мы должны создать новый каталог «ng-app» в «SbAM\src\main». Самый простой способ — использовать командную строку:

Все дальнейшие действия будем делать в новой папке с названием «ng-app» и ее подпапках. На практике мы можем использовать angular-cli для создания внешнего интерфейса:

Я указал там следующие параметры,

  1. Угловая маршрутизация? — Да
  2. Какой формат таблицы стилей вы хотели бы использовать? — Меньше

но все эти настройки полностью зависят от вас и ваших предпочтений.

Важно. Убедимся, что все работает нормально; вам просто нужно выполнить следующую команду: «cd frontend-app», « ng serve»

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

Две программы работают самостоятельно. Это то, что мы хотели? — ответ «Нет». Так что давайте сделаем их хотя бы в одном jar-файле. Для этого измените значение «dist/frontend-app» в outputPath на «../../resources/public». в angular.json

Этот параметр показывает сборщику, что наш пункт назначения — «SbAM\src\main\resources\public». Чтобы проверить изменения, запустите ng build.

новый каталог появляется в папке ресурсов и содержит встроенное угловое приложение. Опять же, мы должны убедиться, что приложение все еще работает нормально; запустите «mvn clean spring-boot:run»

тот же результат, что? Помните, у нас есть папка «static» в «SbAM\src\main\resources»? Он используется по умолчанию в загрузочном приложении Spring. Чтобы получить желаемое поведение, нам просто нужно удалитькаталог«static» и перезапустить « mvn clean spring-boot:run”

Создайте приложение

Требуется пройти все тесты, после чего у вас будет «sbam-0.0.1-SNAPSHOT.jar». Загляните внутрь нашего файла jar; ожидания, что в нем есть два приложения.

Важно. Убедимся, что все работает нормально; вам просто нужно запустить следующую команду:

и результат должен быть таким же, когда мы использовали «mvn spring-boot:run».

Что ж, в этой главе было рассмотрено: как создать простое приложение из spring-initializr, как использовать Angular-cli для создания базового приложения angular, как изменить angular.json, чтобы иметь возможность использовать frontend-app в качестве индексной страницы в программе spring-boot. В следующей главе мы сосредоточимся на pom.xml и используем плагины для сборки ng-приложения из maven.

Исходный код вы можете найти на https://github.com/RustamIvaniakov/SbAM.git

С наилучшими пожеланиями,

Рустам И.