Spring boot становится все более и более интересным для разработки и настройки приложений на основе Spring. И Angular превращается в один из самых любимых фреймворков JavaScript. Поэтому очень интересно комбинировать оба для создания мощных приложений. В этом контексте я покажу вам, как использовать одну из функций Angular, Angular Elements, и встроить ее в ваше загрузочное приложение Spring.

Давайте начнем !

Создайте проект с помощью Sprint Initializr

Spring Initializr — это инструмент, который помогает быстрее создавать проекты Spring Boot и добавлять конфигурации по умолчанию.

Создадим наш проект здесь.

На скриншоте выше мы просто говорим «Я хочу, чтобы вы сгенерировали структуру проекта Maven с помощью Java и Spring Boot». В разделе зависимостей вы можете выбрать нужные вам пакеты. В нашем случае единственное, что нам сейчас нужно, — это веб-зависимости.
Выбрав этот вариант, мы добавляем пакет spring-boot-starter-web, который является стартером для создания веб-приложений, включая RESTful, с использованием Spring MVC. . Этот пакет также включает Tomcat путем добавления пакета spring-boot-starter-tomcat, который используется в качестве контейнера сервлета по умолчанию. Набрав «Создать проект», мы загрузим zip-файл, содержащий наше приложение.

После импорта проекта в IDE.
Измените порт по умолчанию для веб-приложения в application.properties. Это делается для того, чтобы избежать конфликта с другим приложением, использующим порт.

server.port line= 8181

Пока URL-адрес http://localhost: 8181/ показывает вам ошибку после запуска приложения.

Это связано с тем, что представление еще не определено.

Добавить веб-конечную точку

Мы создали наше загрузочное приложение Spring, указав, что нам нужна военная упаковка.
Чтобы иметь возможность развернуть этот WAR позже и отобразить Интернет, вам нужно создать папку webapp в src/main.
Spring MVC использует встроенный Tomcat для запуска приложений.
Во время развертывания Tomcat ищет файл index.html в папке src/main.

Создайте файл index.html в src/main/webapp с одним сообщением «Добро пожаловать на сайт!»

После перезапуска приложения URL-адрес http://localhost:8181/ отобразит сообщение.

Создать угловое приложение

Мы будем использовать angular CLI для создания нашего приложения Angular. Angular CLI — это командный интерфейс, который позволяет создавать структурированный проект и инициализировать зависимости и взаимосвязи между различными модулями.
Чтобы использовать angular CLI, вы должны установить node.js. npm — менеджер пакетов. Он включен в node.js.
Я установил Node v11.8.0, npm 6.5.0, Angular CLI 7.3.1.
После того, как вы все установили, вы должны создать проект angular.

Чтобы не создавать новую папку, вы можете использовать каталог webapp, в котором был создан файл index.html.
Откройте консоль, перейдите в папку src/main и выполните следующую команду:

$ ng new webapp

Пока не добавляйте роутинг и Css. Вы можете сделать это позже, если хотите продолжить работу с приложением.

У вас должна быть эта иерархия проекта:

Чтобы полностью интегрировать Angular в ваш загрузочный проект Spring, вам следует реорганизовать папки и файлы и отделить конфигурацию от представлений.
Сначала мы удалим папку node_modules. Он будет сгенерирован позже на корневом уровне проекта путем перемещения package.json.
Затем нам нужно будет переместить файлы конфигурации. Цель состоит в том, чтобы сохранить файлы конфигурации рядом с pom.xml для легкого доступа к файлу и сохранить конфигурацию Angular и Maven на одном уровне.
Это файлы в веб-приложении:

  • угловой.json
  • пакет-lock.json
  • пакет.json
  • tsconfig.json
  • tslint.json
  • README.md

и файлы в webapp/src

  • карма.conf.js
  • tsconfig.app.json
  • tsconfig.spec.json
  • e2e/протрактор.conf.js
  • e2e/tsconfig.e2e.json

Как вы заметили, есть два файла tslint.json. Тот, что в webapp/appsrc, добавляет правила в уже переданный основной файл. Добавьте правила в файл в корневом каталоге и удалите файл.

Файл README содержит примеры команд для использования с Angluar CLI.

Теперь, когда файлы перенесены, переместите содержимое webapp/src в webapp и удалите пустую папку src. Это позволит избежать путаницы между папками src в проекте. Замените файл index.html, созданный ранее, сгенерированным файлом angular.
Иерархия проекта должна выглядеть следующим образом:

Теперь вам нужно изменить каждый файл конфигурации, чтобы пути указывали на правильные каталоги.
Вы можете найти файлы в github.

Запустите команду установки npm из корня проекта, чтобы создать папку node_modules.

Чтобы протестировать приложение Angular, запустите команду ng serve.
Приложение доступно по адресу http://localhost: 4200/.

Управляйте Angular в своем приложении Spring

В файле pom.xml необходимо определить версии node и npm и команды, которые потребуются для запуска Angular.
Для этого есть плагин frontend-maven-plugin, который может установить node, npm и управлять инструментами grunt, karma, gulp и т. д.
Добавьте приведенную ниже конфигурацию в файл pom.xml:

В этом плагине мы сообщаем maven каждый раз, когда выполняется «maven install», устанавливаем node и npm локально и собираем проект Angular. Это автоматически создаст папку node_modules в корне проекта.

Аргумент build: product определяется в файле package.json.
Вы должны добавить эту строку в раздел сценария.

"build: prod": "ng build — prod — build-optimizer"

Если мы хотим запустить другую команду, мы должны добавить в этот блок.
Запустить установщик maven clean для проверки конфигурации

Военный файл создается при сборке java-части и сборки Angular.

Ваше загрузочное приложение Spring по-прежнему доступно по адресу http://localhost:8181.

Встраивайте компоненты Angular в ваше приложение Spring boot.

Когда создается проект Angular, компоненты создаются в файлах js и стилизуются в файлах css. Чтобы использовать их, мы должны добавить эти файлы в наше приложение. Но, к сожалению, нужно интегрировать много файлов. Нам нужно что-то, что может объединять и «минимизировать» файлы перед их добавлением в приложение. Гулп - наш друг!

Gulp — это инструмент автоматизации, простой в использовании и понимании. Помимо минимизации и объединения файлов, gulp может сжимать изображения, компилировать LESS-файлы и так далее. Посетите официальный сайт, если хотите узнать больше о Gulp.

Spring Tool Suite добавляет Gulp по умолчанию. Мы можем использовать его для выполнения. Но сначала нам нужно установить gulp, и, поскольку нам нужно объединить и переименовать файлы, мы также установим эти пакеты.

Запустите приведенные ниже команды в корневом каталоге, чтобы установить пакеты gulp:

$ npm install gulp 
$ npm install gulp-concat
$ npm install gulp-rename

Теперь мы создаем файл конфигурации в корневом каталоге с именем gulpfile.js.

Как видите, файл Gulp легко читать и понимать. По сути, в файле мы объявляем модули, которые хотим использовать с gulp, определяем задачи и выполняем их в параллельном режиме.

Затем добавьте сборку gulp в maven, чтобы при следующем запуске приложения оно автоматически генерировало наши файлы angular.js и style.css.

Помните плагин frontend-maven, который мы добавили ранее, он управляет выполнением gulp.

Поэтому добавьте следующее выполнение в pom.xml.

Если вы запускаете maven:clean install, ваши файлы должны быть сгенерированы в src/main/webapp/dist.

Теперь, когда часть конфигурации настроена, мы можем сосредоточиться на Angular Elements.

Создайте пользовательский элемент

Angular Elements — это компоненты Angular, упакованные как пользовательские элементы, которые являются родными для таких веб-платформ, как (Chrome, Firefox, Opera, Safari, ..). Полный список можно найти здесь. Таким образом, элементы Angular можно использовать как элементы HTML в любом фреймворке или веб-приложении.

Что делает его более интересным, так это то, что Angular обрабатывает атрибуты, привязки, крючки жизненного цикла Angular Elements.

Начнем с включения пакета @angular/elements для создания пользовательских элементов.

npm install @angular/elements --save

Пользовательские элементы не всегда поддерживаются старыми браузерами. Чтобы избежать ошибок, мы используем полифилл для обеспечения обратной совместимости.

ng add @angular/elements --name=webapp

webapp относится к src/main/webapp. Здесь хранится ваше угловое приложение.

Теперь мы готовы создавать пользовательские элементы.

Давайте создадим модуль виджетов, который будет содержать все виджеты, которые мы будем использовать в нашем веб-приложении.

Перейдите в папку src/main/webapp/app и введите:

$ ng g module widget

Теперь давайте создадим компонент рейтинга внутри модуля:

$ cd widget
$ ng g component rating

Отредактируйте widget.module.ts, чтобы сделать компонент Rating пользовательским элементом.

Теперь добавьте модуль Widget в массив импорта AppModule.

Элементы Angular загружаются сами по себе, что означает, что они автоматически запускаются при добавлении в DOM и самоуничтожаются при удалении из него. Нам не нужен метод boostrap по умолчанию. Удалите массив начальной загрузки в app.module.ts. Мы должны вручную загрузить наши элементы. Интерфейс DoBootstrap — это именно то, что нам нужно. Он добавляет метод ngDoBootstrap. Наш окончательный app.module.ts должен выглядеть так:

Поскольку мы не используем AppComponent, мы можем удалить файлы app.component.* и удалить массив объявлений из app.module.ts.

Компонент рейтинга будет базовым полем рейтинга в нашем веб-приложении. Для ввода потребуется число от 1 до 5 и цветное количество звездочек.

  • рейтинг.component.ts
  • rating.component.html
  • рейтинг.component.css

Вызовите элемент в загрузочном приложении Spring.

Чтобы использовать пользовательский элемент, создайте файл index.html и поместите его в src/main/resources/static.

Запустите maven:clean install и запустите загрузочное приложение Spring.

Если вы перейдете на http://localhost:8181/, у вас будет эта ошибка в инспекторе вашего браузера:

Zone.js используется Angular для управления выполнением задач, трассировкой стека и т. д. Дополнительную информацию о zone.js можно найти здесь.

Если вы находитесь в зоне приложения Angular.js включается автоматически. Но если вы работаете в неугловом приложении, вам нужно добавить zone.js вручную.

Добавьте эту строку в main.ts, чтобы импортировать zone.js.

import 'zone.js';

Повторно запустите maven:clean install и запустите загрузочное приложение Spring, чтобы увидеть волшебство.

Примечание: вы можете столкнуться с приведенной ниже ошибкой при подключении к http://localhost:8181/

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Это означает, что ваш браузер не поддерживает es5. Отредактируйте tsconfig.json так, чтобы он был нацелен на es2105 вместо es5.

Вот и все !

Теперь у вас есть загрузочное приложение Spring, использующее элемент Angular.

Исходник можно найти здесь.