Як правильно використовувати Angular та Bootstrap разом

6 хв. читання

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.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: click js, js click, bootstrap це