Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5

Обзор и описание учебного приложения для изучения фреймворков Spring MVC, AngularJS, Bootstrap и HTML5 в одном приложении.

Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • Spring Security 4.0.4.Release
  • Spring Data 1.9.1.Release
  • Hibernate 5.0.1.Final
  • AngularJS 1.5.0.
  • JUnit 4.12
  • Logback 1.0.13
  • SLF4J 1.7.13
  • Java 1.8
  • JSP 2.2
  • Servlet 3.1.0
  • Maven 3.2.5
  • IntelliJ IDEA 15.0.2

Содержание

  1. Введение. Описание приложения и рассматриваемых тем.
  2. Основные настройки Spring MVC, подключение фреймворка Bootstrap и шаблонной темы.
  3. Создание PDF и Excel документов и загрузка файлов с помощью Spring MVC.
  4. Spring MVC и JDBC. Настройка JDBC datasource, выполнение SQL запросов в Spring MVC.
  5. Отправка электронной почты (email) с помощью Spring MVC и Apache Velocity Templates.
  6. Подключение ORM (Hibernate) в приложение Spring MVC. Настройки, создание сущностей, выполнение запросов к БД.
  7. Перехват исключений (Exception Handling) в Spring MVC. Настройка логирования в Spring MVC с помощью Logback.
  8. JSTL в Spring MVC. Базовые понятия и примеры использования на странице jsp.
  9. Планировщик задач и использование таймера в Spring MVC на примере ScheduleTask и Quartz.
  10. Перехватчики (Interceptors) в Spring MVC. Настройка, пример использования.
  11. Переадресация и пересылка (redirect & forward) в Spring MVC.
  12. Области видимости Session scope и Request scope в Spring MVC. Работа с объектами.
  13. Использование Cookies в Spring MVC. Конфигурация CoockieLocaleResolver в Spring MVC.
  14. Тестирование с помощью JUnit в Spring MVC. Подключение и настройка JUnit. Внедрение ресурсов и зависимостей в тестирующий класс.
  15. Spring MVC и Spring Security. Настройка Spring Security, создание страницы логина, настройка ролей, ограничение доступа к частям приложения с помощью аннотаций или xml настроек. Обзор базовых security тегов на странице jsp.
  16. Работа с JSON и XML (преобразование объектов) в Spring MVC. Формирование ответа и обработка запроса. RestTemplate в Spring.
  17. Локализация (localization) в Spring MVC. Настройка приложения, создание resource bundle.
  18. Spring MVC Java Config (конфигурация с аннотациями) для web.xml
  19. Spring MVC Java Config (конфигурация с аннотациями) для mvc-config.xml
  20. Spring MVC Java Config (конфигурация с аннотациями) для Spring Security (security-config.xml)
  21. Spring MVC Java Config (конфигурация с аннотациями) для application-context.xml
Google AngularJS. Основы фреймворка. Использование AgularJS внутри готового Spring MVC приложения
  1. Базовые понятия JavaScript: объект в JS, JSON, stringify, JS массивы, nested объекты.
  2. AngularJS Hello world example. Основы AngularJS: модуль, контроллер, выражения.
  3. Обзор модели (ng-model) и связывания (ng-bind) с объектами в AngularJS.
  4. Двустороннее связывание объектов и модели AngularJS.
  5. Обзор директив AnugularJS: ng-class, ng-click, ng-show, ng-switch, ng-if, ng-init, ng-repeat.
  6. Внедрение зависимостей (Dependency Injection) в AngularJS.
  7. Контроллер ng-controller AngularJS. Наследование контроллеров.
  8. Использование фильтров AngularJS filters. Angular ng-repeat filter и собственный фильтр.
  9. Валидация формы (angular form validation) в AngularJS. Свойства $invalid, $valid, $touched, $pristine, $dirty.
  10. Понятие routing и templates в приложении AngularJS. Использование ngRoute, $routeProvider.
  11. RESTful сервисы в AngularJS. Использование сервисов $http, $resource для REST вызовов.

1. Описание задачи и проекта. Введение

В этом цикле статей будет достаточно подробно рассматриваться один из ведущих Java фреймворков — Spring MVC в связке с такими популярными фреймворками, как AngularJS и Bootstrap. В отдельной статье будут рассмотрены важные нововведения, которые предоставляет язык HTML5.

1.1. Как будет построен цикл статей

По ходу изучения каждой темы вы будете узнавать какие настройки нужны для запуска или работы с той или иной функцией или технологией фреймворка. Для каждой темы будут описаны необходимые maven зависимости, рассмотрена spring-mvc.xml конфигурация. Т.к. это веб приложение, то каждая тема будет сопровождаться представлением jsp на странице которой будут демонстрироваться результаты работы Java, JSTL, JavaScript или другого кода.

Для более легкого понимания того, что вообще происходит в проекте, он будет выкладываться в двух видах.

  • Первый — архив проекта, который содержит в себе текущую тему (настройки, pom зависимости, jsp страницы и java классы), а так же все предыдущие темы (т.е. последовательное увеличение записей в настройках и подключенных зависимостей).
  • Второй — окончательный проект со всеми настройками, страницами и кодом, который был на момент написания статьи.

Такой подход позволит новичкам не запутаться в паре десятков подключенных библиотек в pom.xml, большого кол-ва записей в файлах конфигурации Spring MVC: mvc-config.xml, application-context.xml, spring-security.xml, web.xml и др. Для второго случая — позволит увидеть весь набор и проект целиком, если необходимо узнать только определенную часть.

2. Структура проекта

Ниже приведены скриншоты получившийся структуры данного проекта.

project-structure-1 project-structure-2

Каждая тема статьи будет соответствовать пакету из веб-представления (webapp) со своей jsp страницей и, там где это необходимо, соответствующим пакетом с java классами. Названия пакетов легко сопоставить с изучаемой темой (orm, exception, rest и т.д.).

3. Проект Spring MVC + AngularJS + Bootstrap

Начальная странца:

mvc-angular-1

Раздел Spring MVC:

mvc-angular-2

Раздел AngularJS:

mvc-angular-3

Пример из раздела AngularJS:

mvc-angular-4

Пример из раздела Spring MVC:

mvc-angular-5

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

startbootstrap-modern-business-1.0.5 — bootstrap шаблон темы, который был использован в проекте.

Пример Spring MVC 4 для начинающих. Базовые настройки. Подключение Bootstrap в Spring MVC.

 

Share Button
69
29645 Total Views 2 Views Today

7 thoughts on “Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5

  1. Алексей:

    Это просто замечательный обучающий проэкт. Спасибо добрые люди. Добра Вам! Реально — помог!

  2. Владимир:

    был бы проект с java Config было бы вообще замечательно.

    1. Он же есть. Смотрите внимательнее содержание:)

  3. qwe:

    Хз кто это сделал, но чел, кто бы ты ни был, спасибо тебе!

  4. Вадим:

    Добрый день!

    Курс реально очень крутой, сейчас проделываю 8й урок и реально не нарадуюсь что это все бесплатно, все расписано понятно, все получается. Лозунг нужно вверху написать, Спринг это легко))

    Хочу забежать на перед и спросить как будет общаться наш бекенд в частности Спринг, с фронтендом Angular. Они будут как 2 независимых проекта, связанными общением через REST API — HTTP запросы от фронтенда к бекенду и в свою очередь бекенд будет формурировать ответ в виде json формата для фронтенда (ангуляра)? Или ангуляр будет внутри проекта Java SpringMVC, как в данный момент с шаблонизатором JSP на 7 уроке? Как будет устроено?

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

    Поправьте, если где-то глупость говорю. Спасибо за уроки!

    1. Да пожалуйста:)

      А по вопросу — как дойдете, так всё увидите. Не пытайтесь при изучении всё сразу предусмотреть, просто изучайте разделы, а как понадобится реальный бэк сделать, то там и настроите:)

  5. AlexFrei:

    Ребята, вы клад!

Добавить комментарий