Angular-way,

czyli którędy?

Grzegorz Biziel

Uniwersytet Ekonomiczny we Wrocławiu

21 maja 2015

Angular-way?

Angular-way
=

dobry software
+
wykorzystanie wzorców oferowanych przez angulara

I. Rozdział logiki i szablonu

Wzorzec MVVM

Jak to wygląda w angularze*

Bez rozdziału na model i widok:

$.ajax({
    url: '/endPoint',
    success: function ( data, status ) {
        $('ul#messages').append('
        
Operation successful!
        ');
    }
});

message.text

$http.get('/endPoint').then(
    function(data, status){
        $scope.messages.append({text:'Operation successful!'});
    }
);

Dlaczego tak jest angular-way?

• Szablon jest semantyczny
• Szablon nie zawiera kodu
• Controller nie zawiera elementów szablonu
• podsumowując: Separation of concerns

II. Podział logiki i szablonu

Dyrektywy - rozszerzenie HTMLa

• Semantyczny HTML
• Izolacja operacji na DOM
• Tworzenie re-używalnych komponentów

Dyrektywa zapewniają semantyczność

.directive('ngWroclawSpeech', function () {
    return {
        restrict: 'E',
        scope: {
            speech: "="
        },
        templateUrl: 'ngWroclawSpeech.html'
    }
});

    
#{{speech.meetingNumber}} {{speech.title}}
    
speaker: {{speech.author}}

Dyrektywy obsługując event przeglądarki

.directive('logMouseup', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('mouseup', function(evt){
            console.log(
            'x = ' + evt.clientX + '; y = ' + evt.clientY);
            }
        }
    }
});

Dyrektywy mogą się komunikować poprzez kontrolery

.directive('dragValidator', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.on('mouseup', function(evt){
                if(evt.clientX > 1000){
                    ngModelCtrl.$setValidity('range', false);
                }
            }
        }
    }
});

III. Jeszcze głebszy podział logiki

Dependency Injection

endPointService.$inject = ['$http'];

funtion endPointService($http){
    //kod wykorzystujący $http
}

Service, factory, provider, value, constant

• Wszystkie to usługi (różne warianty providera)
• Mogą być wstrzykiwane przez DI zarówno do innych usług jak i obiektów specjalnych
• Są formą enkapsulacji pewnych kawałków logiki

Usługa

.factory('endPointService', endPointService);

function endPointService($http){
    return {
        get: get
    }
    function get(){
        return $http.get('/endPoint');
    }
}

VI. Granice podziału

$q i obietnice

Obietnica (promise) to struktura mająca zapewnić połączenie między elementami kodu, z których jeden mógł się jeszcze nie wykonać.

Nazwa obietnica odzwierciedla działanie - obietnica pewnej zwracanej wartości.

Działanie obietnice

var result_promise = $http.get('/endPoint');

result_promise.then(endPointSuccessFn, endPointErrorFn);

var result_promise = endPointService.get();

result_promise.then(endPointSuccessFn, endPointErrorFn);

Oczekiwanie na wiele rezultatów

var promise1 = endPointService1.get();

var promise2 = endPointService2.get();

$q.all([promise1, promise2])
.then(allEndPointsSuccessFn, anyEndPointErrorFn);

Miodzio, spróbujcie to napisać na callbackach (⌐ ͡■ ͜ʖ ͡■)

Promise - zalety

• brak konieczności przekazywania callbacków jako argument
• naturalny kierunek przepływu - to usługa zwraca obietnice czegoś, zamiast przyjmować callback
• ułatwiają łączenie/oczekiwanie na wiele rezultatów

V. Podsumowanie

• Angular dostarcza wzorce do tworzenia dobrego softwaru
• Te wzorce stanowią spójny zestaw narzędzi
• Wybór tych wzorców przez twórców i społeczność Angulara to jest właśnie Angular-way

Interesuje Was zarówno inżynieria biznesu i inżynieria oprogramowania?

Sprawdźcie możliwość pracy w międzynarodowym projekcie badawczo-wdrożeniowym:

s4s.ue.wroc.pl/index.php/career

Projekt już przyniósł efekty w postaci spin-offu w Szwajcarii.

Dodatkowe informacje są dostępne u:

philipp.osl@amiona.com

Dziękuje za uwagę

equus71.github.io/angularway