Angular-way,
czyli którędy?
Grzegorz Biziel
Uniwersytet Ekonomiczny we Wrocławiu
21 maja 2015
Angular-way
=
dobry software
+
wykorzystanie wzorców oferowanych przez angulara
I. Rozdział logiki i szablonu
Wzorzec MVVM
Jak to wygląda w angularze*
*w pewnym uproszczenia, bo "controller" != "model"
Bez rozdziału na model i widok:
$.ajax({
url: '/endPoint',
success: function ( data, status ) {
$('ul#messages').append('
Operation successful!
');
}
});
Template:
message.text
Controller:
$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'
}
});
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
- 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