Доклад про Angular JS. Подход к написанию директив, вложенных директив, тестируемости. Конференция http://fronttalks.ru в Челябинске

1. AngularJS
Иван Громов про Angular
summer.is.gone@gmail.com
https://github.com/summerisgone

2. Глоссарий
• AngularJS - фреймворк, про который доклад
• MVC - паттерн проектирования (интерфейсов),
разделение модель - представление - контроллер
• Dependency Injection - паттерн проектирования,
когда один класс не знает ничего о другом, но
пользуется его экземпляром
• Директива - понятие AngularJS, спецразметка,
определяющая (изменяющая) поведение компонента
2

3. Начнем с примера

4. HTML
4
Строчек на JS - 0 (!)

5. JavaScript
5

6. и чё?

7. Предварительные итоги
• MVC - модель - scope, вью - html, контроллер -
обычная* функция
• Магический биндинг: «dirty-check», старый добрый
объект
• Слабое связывание: шаблоны - модели -
контроллеры - зависимости
• Тестируемость и модульность (Karma)
«Мы сделали в Angular так много вещей, которые упрощают
тестирование, что не оставили вам повода этого избегать»
7

8. Мой подход

9. Архитектура
Дано%
• Наверху Router, SPA
• Большая вложенность директив с
различными требованиями
• Один большой DTO на входе и
выходе
Решение%
• Иерархия директив
• изоляция сверху вниз
• внизу изоляцией пренебрегаю, т.к.
много деталей и поведений
9
Router
+
Controller
Art DTO + API
Spread tabs
Stripes
Blocks
iftext image

10. Вложенный DTO
вложенные директивы
вложенные scope
• Изоляция scope - удобно разделять логику
• Через require ушёл от
.getChildren()[0].getChildren()[3]
10

11. Отдельный плагин -
отдельная директива
• Я люблю jqueryUI
• Директива - прокси + директива логика
• прокси генерирует события на scope:
size + resizable, position + draggable
11

12. controller
запись в scope
изменение DOM напрямую
Dependency injection
публичные методы для дочерних
12
link
подписка на изменения scope
подписка на DOM напрямую
родительский API

13. Недостатки

14. Тестируемость
• Из-за сильной вертикальной связанности мне
приходится использовать fixtures с полным DTO
для тестов
• Сложно взять что-то «рядом» с деревом DTO,
например, нет доступа к текущему табу
• На «нижних» компонентах связано слишком
много директив:
<div class="block-inner" size resizable position
position-helper draggable selectable />
14

15. Спасибо за внимание
Вопросы?