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.
Исходник можно найти здесь.