AngularJSИван Громов про Angular

summer.is.gone@gmail.com

https://github.com/summerisgone

Глоссарий• AngularJS - фреймворк, про который доклад

• MVC - паттерн проектирования (интерфейсов), разделение модель - представление - контроллер

• Dependency Injection - паттерн проектирования, когда один класс не знает ничего о другом, но пользуется его экземпляром

• Директива - понятие AngularJS, спецразметка, определяющая (изменяющая) поведение компонента

2

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

HTML

4

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

JavaScript

5

и чё?

Предварительные итоги• MVC - модель - scope, вью - html, контроллер - обычная* функция

• Магический биндинг: «dirty-check», старый добрый объект

• Слабое связывание: шаблоны - модели - контроллеры - зависимости

• Тестируемость и модульность (Karma)«Мы сделали в Angular так много вещей, которые упрощают тестирование, что не оставили вам повода этого избегать»

7

Мой подход

АрхитектураДано%

• Наверху Router, SPA

• Большая вложенность директив с различными требованиями

• Один большой DTO на входе и выходе

Решение%

• Иерархия директив

• изоляция сверху вниз

• внизу изоляцией пренебрегаю, т.к. много деталей и поведений

9

Router +

Controller

Art DTO + APISpread tabsStripes

Blocks

iftext image

Вложенный DTOвложенные директивы

вложенные scope

• Изоляция scope - удобно разделять логику

• Через require ушёл от .getChildren()[0].getChildren()[3]

10

Отдельный плагин - отдельная директива

• Я люблю jqueryUI

• Директива - прокси + директива логика

• прокси генерирует события на scope: size + resizable, position + draggable

11

controller запись в scope

изменение DOM напрямую Dependency injection

публичные методы для дочерних

12

link подписка на изменения scope подписка на DOM напрямую

родительский API

Недостатки

Тестируемость• Из-за сильной вертикальной связанности мне приходится использовать fixtures с полным DTO для тестов

• Сложно взять что-то «рядом» с деревом DTO, например, нет доступа к текущему табу

• На «нижних» компонентах связано слишком много директив:<div class="block-inner" size resizable position position-helper draggable selectable />

14

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