Angular і Bootstrap - інструменти, які користуються величезною популярністю серед розробників. Найчастіше в проектах їх використовують разом, хоча чому б і ні, враховуючи той факт, що вони надають чудові засоби для розробки, які вивели процес створення фронтенду на принципово новий рівень. Однак, є одна проблема, яка виникає, коли вам необхідно перенести JS-компоненти Bootstrap в Angular проект. При побудові проекту на Angular категорично не рекомендується підключати повноцінну JQuery бібліотеку. JQlite вже входить в комплект з Angular і це весь JQuery, який нам необхідний. Важливо зрозуміти, що спільне використання звичайного JQuery разом з Anglular створить для вас масу перешкод в реалізації більшості можливостей обох фреймворків, не варто схрещувати вужа з їжаком. Для того, щоб усвідомити суть проблеми, необхідно з'ясувати відмінність між способами досягнення однієї і тієї ж мети, до яких вдаються JQuery та Angular. У цій статті ми поговоримо про те, чому спільно з Angular не можна використовувати бібіліотеки Bootstrap, які основані на JQuery, і, звісно, обмовимо кращий альтернативний спосіб перенесення компонентів Bootstrap в проект на Angular.
Проблема з Bootstrap JavaScript і Angular.js
Ця проблема випливає з обговореного вище правила, що не варто використовувати JQuery, тому що принципи маніпуляції елементами, до яких вдається JQuery, конфліктують з відповідними принципами Angular.
Чому не варто використовувати JQuery
Основний принцип JQuery - захоплення елементів і їх додавання в документ на основі подій. Тому, коли ми використовуємо, наприклад, Bootstrap компонент button, ми як би говоримо йому: коли кнопка буде натиснута, необдімо переключити її в режим "active". По суті це означає, що нашій кнопці буде додано додатковий клас .active і також, якщо наша кнопка є checkbox'ом, буде поставлена галочка. Коли ми використовуємо Angular, все відбувається інакше. До кожного з необхідних елементів прив'язується відповідна змінна, керуючи якої, ми керуємо тим чи іншим параметром нашої кнопки, галочки, текстового поля або будь-якого іншого елементу. Таким чином, Angular на відміну від JQuery не проводить ніяких варварських захоплень всього, і вся для того, щоб перекувати захоплене і повернути назад. Виходить, що і Bootstrap JS нам використовувати протипоказано, адже тоді на кожному кроці нас буде підстерігати JQuery, і підстерігати він буде, як ми з'ясували, з далеко не найкращими для нашого Angular проекту намірами.
Ми б могли написати функцію toggleButton () в якій маніпулювали б ng-click, але з Angular у нас немає потреби в подібних діях. Ми просто оголосимо змінну, за допомогою якої зможемо безпосередньо управляти кожним елементом, до якого вона належить.
Вирішення: Bootstrap UI
Як же вийти з цієї ситуації? Якщо ви знайомі з Angular, то знаєте, що для того, щоб прив'язати деякі дані до певних елементів, необхідно написати відповідну директиву. Це повідомить Angular про те, що він повинен стежити за зміною даних, які пов'язані з цими елементами. Рішення - проект, який називається UI Bootstrap. Він розробляється командою Angular UI і призначений для розширення можливостей Angular. Відрізняється він тим, що не використовує бібліотеку JQuery і засновані на Bootstrap JS директиви.
Що необхідно, щоб почати роботу з UI Bootstrap
- відсутність JQuery
- наявність Angular
- Bootstrap CSS файл Ось і все. Тепер поговоримо про те, як все це інтегрувати в наш проект.
Наш додаток на Angular
Давайте подивимося, що нам потрібно зробити, щоб змусити все це працювати. Якщо ви забігли наперед і вже глянули на JS код, то, можливо, помітили що ми будуємо використовувати звичайний Angular модуль і контролер. Ми оголосили змінні для наших button і collapse. Наступний крок полягає в підключенні файлу UI Bootstrap в наш проект, Після чого ми зможемо вставити 'ui.bootstrap' в наш модуль. Якщо все зроблено правильно, то після виконаних дій, в нашому розпорядженні будуть всі директиви і компоненти, які разом працюватимуть, як Bootstrap JS, але без Bootstrap JS.
// create our angular app and inject ui.bootstrap
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function($scope) {
// BUTTONS ======================
// define some random object and button values
$scope.bigData = {};
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
});
Тепер для того, щоб змінювати стан елементів, на зразок кнопок на сайті, нам буде потрібно всього лише змінювати значення відповідних змінних.
Використання UI Bootstrap директиви "button"
Згідно з документацією, коректний спосіб маніпуляції елементами типу checkbox полягає в додаванні атрибуту ng-model з відсиланням на те, з чим пов'язаний даний елемент, а також в додаванні атрибуту btn-checkbox. Ось розмітка для наших кнопочок:
<div class="btn-group">
<label btn-checkbox="" class="btn btn-primary" ng-model="bigData.breakfast">
Breakfast
</label>
<label btn-checkbox="" class="btn btn-primary" ng-model="bigData.lunch">
Lunch
</label>
<label btn-checkbox="" class="btn btn-primary" ng-model="bigData.dinner">
Dinner
</label>
</div>
Тепер, коли модель змінилася, при натисканні ми побачимо саме таку поведінку, яку очікували побачити.
Використання UI Bootstrap директиви "collapse"
Нехай у нас буде панель, яка може ховатися і показуватися на основі того, яке значення приймає змінна isCollapsed - true або false. Управлятися весь процес, природно, буде клацанням, що організує нам такий рядок: click = "isCollapsed =! IsCollapsed". Тобто по кліку буде змінюватися значення змінної, що буде моментально впливати на стан панелі.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div>
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
Наразі обидва Bootstrap компонента працюють як треба, в кращих традиціях Angular:
Висновки
Настійно рекомендую вам поглянути на офіційну документацію, там ви знайдете величезну кількість описів директив для реалізації можливостей Bootstrap JS. Не забувайте і про основне призначення проекту - поєднання можливостей Bootstrap та філософії Angular.
Ще немає коментарів