![Page 1: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/1.jpg)
AngularJSИван Громов про Angular
https://github.com/summerisgone
![Page 2: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/2.jpg)
Глоссарий• AngularJS - фреймворк, про который доклад
• MVC - паттерн проектирования (интерфейсов), разделение модель - представление - контроллер
• Dependency Injection - паттерн проектирования, когда один класс не знает ничего о другом, но пользуется его экземпляром
• Директива - понятие AngularJS, спецразметка, определяющая (изменяющая) поведение компонента
2
![Page 3: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/3.jpg)
Начнем с примера
![Page 4: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/4.jpg)
HTML
4
Строчек на JS - 0 (!)
![Page 5: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/5.jpg)
JavaScript
5
![Page 6: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/6.jpg)
и чё?
![Page 7: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/7.jpg)
Предварительные итоги• MVC - модель - scope, вью - html, контроллер - обычная* функция
• Магический биндинг: «dirty-check», старый добрый объект
• Слабое связывание: шаблоны - модели - контроллеры - зависимости
• Тестируемость и модульность (Karma)«Мы сделали в Angular так много вещей, которые упрощают тестирование, что не оставили вам повода этого избегать»
7
![Page 8: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/8.jpg)
Мой подход
![Page 9: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/9.jpg)
АрхитектураДано%
• Наверху Router, SPA
• Большая вложенность директив с различными требованиями
• Один большой DTO на входе и выходе
Решение%
• Иерархия директив
• изоляция сверху вниз
• внизу изоляцией пренебрегаю, т.к. много деталей и поведений
9
Router +
Controller
Art DTO + APISpread tabsStripes
Blocks
iftext image
![Page 10: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/10.jpg)
Вложенный DTOвложенные директивы
вложенные scope
• Изоляция scope - удобно разделять логику
• Через require ушёл от .getChildren()[0].getChildren()[3]
10
![Page 11: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/11.jpg)
Отдельный плагин - отдельная директива
• Я люблю jqueryUI
• Директива - прокси + директива логика
• прокси генерирует события на scope: size + resizable, position + draggable
11
![Page 12: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/12.jpg)
controller запись в scope
изменение DOM напрямую Dependency injection
публичные методы для дочерних
12
link подписка на изменения scope подписка на DOM напрямую
родительский API
![Page 13: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/13.jpg)
Недостатки
![Page 14: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/14.jpg)
Тестируемость• Из-за сильной вертикальной связанности мне приходится использовать fixtures с полным DTO для тестов
• Сложно взять что-то «рядом» с деревом DTO, например, нет доступа к текущему табу
• На «нижних» компонентах связано слишком много директив:<div class="block-inner" size resizable position position-helper draggable selectable />
14
![Page 15: презентация вводного доклада Angular на fronttalks.ru](https://reader034.vdocuments.pub/reader034/viewer/2022052316/557ed0afd8b42a815a8b4569/html5/thumbnails/15.jpg)
Спасибо за вниманиеВопросы?