UI Bootstrap - AngularUI

Bootstrap i AngularJs - czy to może razem działać?

Framework Bootstrap posiada wiele aktywnych komponentów, które reagują na działania użytkownika (np. okna modalne, rozwijane listy, opisane w sekcji javascript). Przykładowo, aby uruchomić okno modalne, należy zdefiniować taki przycisk:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button> 

Aby kontrolować akcje musielibyśmy odwoływać się do globalnych funkcji javascriptowych. Na szczęście problem został rozwiązany przez stworzenie biblioteki UI Bootstrap - Angular UI, która pozwala na łatwiejsze integrowanie komponentów reagujących Bootstrapa z Angularem.

W tym tutorialu stworzymy proste okno modalne zarządzane przez AngularJs.

Okno modalne

Na początek tworzymy pliki index.html oraz app.js, ktróre będą odpowiednio zawartością naszej strony oraz skryptem AngularJS. Nasze okno modalne tworzymy przy pomocy kodu:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="content.html">
      <div class = "modal-header" > <h3 class = "modal-title" > I 'm a modal!</h3>
        </div>
        <div class="modal-body">
          Okno modalne!
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <div>Otworzono {{ opened }} razy</div>
  </div> 

Na początku definiujemy kontroler angularowy o nazwie ModalDemoCtrl. Następnie ukrywamy content naszego okna poprzez umieszczenie go pomiędzy znacznikami <script
type="text/ng-template"></script>. Nadajemy mu identyfikator, aby później odwołać się do niego w skrypcie.

Okno ma dwa przyciski wywołujące funkcje ok() oraz cancel(). Funkcje te zostaną zdefiniowane wewnątrz kontrolera obsługującego okno.

Widzimy również kod odpowiedzialny za przycisk otwierający okno z funkcją open() zdefiniowaną w ModalDemoCtrl. Tworzymy również prosty licznik otwarć okna.

Teraz możemy przejść do pliku app.js. Definiujemy naszą aplikację:

angular.module('demo', ['ui.bootstrap']);

W nawiasach kwadratowych musi znaleźć się nazwa frameworka UI Bootstrap - ui.bootstrap, aby Angular poprawnie współgrał z Bootstrapem.

Definiujemy główny kontroler okna:

angular.module('demo').controller('ModalDemoCtrl', function ($scope, $modal) {
    
    $scope.opened=0;
    
    $scope.open = function () {
        var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'content.html',
            controller: 'contentController',
            resolve: {
              opened: function() {
                return $scope.opened;
              }
            }
        });
    
      modalInstance.result.then(function(opened) {
        $scope.opened = opened;
      });
    };

});

Jako jeden z parametrów funkcji kontrolera przyjmujemy zmienną $modal. To na niej będziemy definiowali wszystkie operacje. Funkcja open odpowiedzialna za otwarcie okna tworzy zmienną lokalną modalInstance, która korzysta z dostarczonej funkcji $modal.open. Możemy wykorzystać różne parametry, aby właściwie określić zachowanie okna. My określamy rodzaj animacji, content naszego okna, kontroler odpowiedzialny za akcje wywoływane wewnątrz otwartego okna oraz wartość przekazywaną do powyższego kontrolera (contentController). O wiele więcej parametrów można znaleźć na oficjalnej stronie UI Bootstrap. W parametrze resolve wysyłamy zmienną licznikową.

Określamy również co zrobić z wartością zwracaną z kontrolera contentController. U nas będzie to zaktualizowana zmienna licznikowa (aktualizuje się tylko po naciśnięciu "OK").

A oto kod naszego contentController:

angular.module('demo').controller('contentController', ['$scope', '$modalInstance','opened', function($scope, $modalInstance,opened) {
    $scope.opened=opened;
    $scope.ok = function () {
        $scope.opened++;
        $modalInstance.close($scope.opened);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

}]);

Jak widać jest bardzo prosty. W parametrach funkcji przekazujemy $modalInstance, czyli instancję naszego okna oraz zmienną licznikową opened. Wewnątrz kontrolera definiujemy dwie funkcje wywoływane po naciśnięciu przycisków. Wewnątrz korzystamy z wbudowanych funkcji. Funkcja close(obj) zamyka okno i zwraca podany w argumencie obiekt. Funkcja dismiss('cancel') po prostu zamyka okno.

Całość można zobaczyć w akcji tutaj.

Możliwości

To zaledwie ułamek możliwości tego frameworka. Szereg przykładów można znaleźć na głównej stronie UI Bootstrap. Definiując proste funkcje w Angularze, jesteśmy w stanie zapanować nad zachowaniem reaktywnych elementów na stronie nie musząc męczyć się w odwoływanie się do elementów DOM przez goły JavaScript.

Podsumowując, jeśli chcemy stworzyć aplikację biznesową, która nie mieć zbyt spersonalizowanego UI, połączenie Bootstrap + UI Bootstrap - Angular UI będzie bardzo dobrym wyborem - zaoszczędzimy czas i wiele potencjalnych problemów.