«Компонентная верстка с angularjs», Андрей Яманов (cto teamhunt)
TRANSCRIPT
![Page 1: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/1.jpg)
Компонентная верстка с AngularJS
MoscowJS 28
Докладчик: Яманов Андрейhttp://tenphi.me
![Page 2: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/2.jpg)
Проекты
TeamHunt.co TweetWorthy.co Quotable.TipsBeta Beta
![Page 3: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/3.jpg)
Содержание
• Angular-компоненты
• Верстка• Стили
![Page 4: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/4.jpg)
Поиск “идеальной” методологии для
компонентов
![Page 5: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/5.jpg)
Плоская структура компонентов
![Page 6: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/6.jpg)
Angular-компоненты
![Page 7: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/7.jpg)
directive component
![Page 8: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/8.jpg)
Особенностиmodule.component()
• Вся логика реализована через controller.• Можно привязать только к элементу.• Scope всегда изолирован.
https://docs.angularjs.org/guide/component
[email protected] и выше
![Page 10: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/10.jpg)
Создание компонента
module.component()
![Page 11: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/11.jpg)
block.js
![Page 12: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/12.jpg)
app.js
![Page 13: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/13.jpg)
Наследование компонентов
• Object.assign()
• class “extends”
![Page 14: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/14.jpg)
Верстка
![Page 15: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/15.jpg)
BEMкак методология
верстки
![Page 16: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/16.jpg)
Минусы БЭМ
• Строгие правила для определения стилей;• Почти нет ограничений для верстки;• Значения модификаторов возможно излишни.
![Page 17: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/17.jpg)
Block As Component
• Компонентный подход в вёрстке;• Контекстные селекторы;• Значений модификаторов нет.
![Page 18: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/18.jpg)
block.html
![Page 19: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/19.jpg)
Темная сторона силы
![Page 20: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/20.jpg)
Темная сторона силы
![Page 22: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/22.jpg)
angular-bemи компоненты
• Генерация классов BEM на основе атрибутов;
• Установка модификаторов по состоянию компонента;
• Не замедляет компиляцию шаблона.
![Page 23: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/23.jpg)
DDOreplace: false
* compiled
![Page 24: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/24.jpg)
Наследованиеhttp://learnjade.com/tour/template-inheritance/
На примере Jade:
base.jade
child.jade
![Page 25: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/25.jpg)
Стили
![Page 26: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/26.jpg)
Стили для компонента
![Page 27: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/27.jpg)
Используем LESS
![Page 28: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/28.jpg)
Селектор с контекстом
![Page 29: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/29.jpg)
Наследование
![Page 30: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/30.jpg)
Используем переменные!
![Page 31: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/31.jpg)
Используем переменные!
![Page 32: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/32.jpg)
Вместо вывода
![Page 33: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/33.jpg)
–Разработчик с большим и грустным опытом
“Никакая документация, методология или устоявшаяся практика не
избавляет разработчика от необходимости думать.”
![Page 34: «Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)](https://reader033.vdocuments.pub/reader033/viewer/2022061306/58f143c61a28ab037a8b4633/html5/thumbnails/34.jpg)
Спасибо за внимание!
Вопросы?
Инструменты:http://bit.ly/1WItKwI
GitHub:https://github.com/tenphi