Документ описывает использование AngularJS и Angular 2+ для разработки фронтенда на платформе Drupal, акцентируя внимание на преимуществах и особенностях каждой версии. Он охватывает темы настройки, интеграции, авторизации, мульти-язычности и архитектуры приложения, а также предлагает практические советы по работе с различными инструментами сборки и тестирования. В завершение рассматривается SEO-оптимизация и необходимость в подходах к фильтрации и сортировке данных.

1. AngularJS front-end для
Drupal.
От этапа настройки до
готового проекта

2. ❖ О проекте
❖ Почему AngularJS 1.x?
❖ Почему Angular 2+?

3. О проекте и условиях
● Платформа для саб-сайтов
Homepage: https://domain.com
Subsite homepage: https://domain.com/subsitename
● Система гибких виджетов
● Большой объем данных
● Сжатые сроки и неопытные члены команда

4. Почему AngularJS 1.x?
● Большая база знаний и готовых решений (ограниченное
время, фокус на бизнес логике)
● Активное, отзывчивое сообщество
(https://t.me/angular_js)
● Прост в освоении
● Все еще развивается
● Angular 2+ сайт написан на AngularJS :)

5. Почему Angular 2+?
● Отсутствие большой базы знаний и готовых решений
(менее ограниченное время)
● Активное, отзывчивое сообщество
(https://t.me/angular_ru).
● TypeScript
● ...

6. ❖ Headless Drupal
❖ Drupal theme

7. Headless Drupal. Front End структура

8. Drupal theme

9. Подключение скриптов

10. HTML через $templateCache

11. Установка $templateCache
● Grunt
$ npm install grunt-angular-templates
● Gulp
$ npm install gulp-angular-templatecache

12. Headless Drupal
● полная автономия Angular от Drupal темы (+);
● удобно поддерживать и расширять (+).

13. Drupal тема
● авторизация админа и пользователей (+);
● drupalSettings (+);
● мультиязычность (+);
● интеграция модулей, админ toolbar и Drupal меню (+).

14. AngularJS generators

15. Angular сборка от yeoman
http://yeoman.io/ - инструмент для создания сборки.
https://github.com/yeoman/generator-angular - cборка
для Angular 1 (grunt, gulp)

16. Шаги :
● $ npm install -g grunt-cli bower yo
generator-karma generator-angular
● $ yo angular

18. Yeoman Angular generator
● Простота установки;
● gulp или grunt;
● templates и минификация проекта;
● console commands:
yo angular:service myService
yo angular:controller myController
● karma тесты.

19. ❖ HTML5 push state
❖ UI Router
Routing. Subdomains

20. HTML5 pushState
● Красивый URL:
C pushState: https://domain.com/node-name
Без: https://domain.com/#!/node-name
● Настройка AngularJS
● Настройка сервера / Drupal

21. UI Router
● Path, query параметры, а также non-url параметры
● Архитектура приложения на основе state
● Tabs на основе state
● Resolve
● Subdomains

22. ❖ Фильтрация и сортировка.
❖ Angular или Drupal

23. Angular сортировка или фильтрация

24. Drupal фильтрация и сортировка
.state('articles', {
url: '/articles?filter&page,
params: {
filter: {
value: 'A',
squash: true
},
page: {
value: '1',
squash: true
}
}
})
Запрос на сервер:
/articles/A/1?_format=json

25. ➢ Необходим при
больших объемах
данных
➢ Сортировка,
фильтрация и
пейджинг.
DrupalAngular
➢ Небольших объемах
данных
➢ без лишних запросов
➢ Прост в применении

26. Интеграция AngularJS
templates и Drupal. Widgets

27. Интеграция AngularJS templates и Drupal
● Цель - страницы настраиваемые администратором
● Возможности Drupal
● Способы решения

28. Компонентный подход

29. Виджеты

30. “Подводные камни”

31. “Подводные камни”
➢ Прототипирование
➢ Local и Dev окружение
➢ Drupal как proxy для Web Services
➢ Drupal.t(), drupalSetting для Headless Drupal
➢ Drupal 404 page

32. AngularJS и SEO

33. AngularJS и SEO
● https://prerender.io/
● Deprecating of Google AJAX crawling scheme
(https://webmasters.googleblog.com/2015/10/deprecati
ng-our-ajax-crawling-scheme.html)
● Используйте Fetch as Google
(https://www.google.com/webmasters/tools/googlebot-f
etch)
● ⚠ Baidu поиcковик

34. Эпилог