3. Cechy AngularJS
• Framework MVC/MVVM
• Dodatkowe atrybuty HTML
• Modele w postaci POJO (Plain Old Javascript
Object)
• Zestaw komponentów ułatwiających organizację
projektu
• Two-way Data Binding
• Dirty Checking
• Zbudowany z wykorzystaniem jQuery
• Duża popularność i wsparcie społeczności
8. Komponenty - Controller
• Dostarcza dane widokom ($scope)
• Zawiera logikę widoków
• Nie powinien manipulować drzewem DOM
• Przypisywany widokom przy pomocy atrybutu
HTML ng-controller
10. Komponenty - View
• Zapisywany w języku HTML rozszerzonym o dodatkowe
atrybuty
• Ma dostęp do wszystkich elementów $scope
• Dodatkowe atrybuty:
– ng-if
– ng-show/ng-hide
– ng-click
– ng-repeat
– ng-model
– ng-class
– ng-style
– ng-src
– ng-attr-{{ }}
12. Komponenty - Service
• Oparty o wzorzec projektowy Singleton
• Może zostać wstrzyknięty w dowolne miejsce aplikacji przy
pomocy Dependency Injection
• Często wykorzystywany do implementacji warstwy pobierającej
dane
• Może zostać wykorzystany do implementacji warstwy Modeli
• Predefiniowane serwisy:
– $http
– $window
– $q
13. Komponenty - Service
application.service('countryService', ['$http', '$q', function ($http, $q) {
this.getList = function () {
var deferred = $q.defer();
$http.get('https://restcountries.eu/rest/v1/all').success(function (data) {
var result = [];
for (var i = 0; i < data.length; i++) {
result.push({
name: data[i].name,
symbol: data[i].alpha2Code
});
}
deferred.resolve(result);
});
return deferred.promise;
};
}]);
14. Komponenty - Factory
• Działanie i zastosowanie identyczne jak Service
• Zwraca wynik funkcji zamiast instancji funkcji
15. Komponenty - Factory
application.factory('countryFactory', ['$http', '$q',
function ($http, $q) {
return {
getList: function() {
var deferred = $q.defer();
$http.get('https://restcountries.eu/rest/v1/all').success(function
(data) {
var result = [];
for (var i = 0; i < data.length; i++) {
result.push({
name: data[i].name,
symbol: data[i].alpha2Code
});
}
deferred.resolve(result);
});
return deferred.promise;
}
};
}]);
16. Komponenty - Directive
• Komponent interfejsu użytkownika przeznaczony do
wielokrotnego użytku
• Nie powinien zawierać logiki biznesowej
• Może manipulować drzewem DOM
• Można do niego przekazać parametry:
– =
– @
– &
• Często używany do inicjalizacji bibliotek jQuery
• Częsty powód wycieków pamięci
18. Komponenty - Filter
• Pozwala na manipulację danymi wejściowymi
• Nie powinien zawierać logiki biznesowej
• Domyślnie dostępny w widokach
• Pozwala na przetwarzanie strumieniowe przy pomocy operatora |
• Predefiniowane filtry:
– orderBy
– filter
– date
– currency
21. Zagrożenia i Problemy
• Nauka AngularJS nie jest prosta
• Skalowalność i wydajność aplikacji
• Czytelność struktury projektu
• Wycieki pamięci
• Ograniczone narzędzia do pisania testów (Protractor)
• Pokusa używania jQuery
• SEO
• AngularJS 2.0