�ݺ�ߣ

AngularJS
Podstawy
Wojciech Panek - Tech Lead, Apptension
www.apptension.com

https://bitbucket.org/WojtekPanek/akaicountries

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

Komponenty - Module
? Pozwala na grupowanie
? Zarz?dzanie Dependency Injection
? Konfiguracja

Komponenty - Module
var application = angular.module('countriesApp', [
'ui.router'
]);
application.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',
function($locationProvider, $stateProvider, $urlRouterProvider){
$locationProvider.hashPrefix('');
$stateProvider.state('countryList', {
url: "/",
templateUrl: "app/view/country-list.html"
});
$stateProvider.state('countryView', {
url: "/:name",
templateUrl: "app/view/country-view.html"
});
$urlRouterProvider.otherwise('/');
}]);

Komponenty - Module
<html data-ng-app="countriesApp">
<head lang="en">
<meta charset="UTF-8">
<title>AKAI Countries</title>
</head>
<body>
<div data-ui-view></div>
</body>
</html>

Komponenty - Controller
? Dostarcza dane widokom ($scope)
? Zawiera logik? widok��w
? Nie powinien manipulowa? drzewem DOM
? Przypisywany widokom przy pomocy atrybutu
HTML ng-controller

Komponenty - Controller
application.controller('countryListController', ['$scope', 'countryService',
function($scope, countryService){
$scope.countries = [];
$scope.loadingCountries = true;
$scope.countryModel = {
name: "",
symbol: ""
};
countryService.getList().then(function(list){
$scope.countries = list;
$scope.loadingCountries = false;
});
$scope.addCountry = function() {
$scope.countries.push($scope.countryModel);
$scope.countryModel = {
name: "",
symbol: ""
}
}
}]);

Komponenty - View
? Zapisywany w j?zyku HTML rozszerzonym o dodatkowe
atrybuty
? Ma dost?p do wszystkich element��w $scope
? Dodatkowe atrybuty:
�C ng-if
�C ng-show/ng-hide
�C ng-click
�C ng-repeat
�C ng-model
�C ng-class
�C ng-style
�C ng-src
�C ng-attr-{{ }}

Komponenty - View
<div data-ng-controller="countryListController">
<data-loader data-is-loading="loadingCountries">
<div>
<label for="country-name">Name:</label>
<input type="text" data-ng-model="countryModel.name" name="CountryName"
id="country-name" />
</div>
<div>
<label for="country-symbol">Symbol:</label>
<input type="text" data-ng-model="countryModel.symbol" name="
CountrySymbol" id="country-symbol" />
</div>
<div>
<button data-ng-click="addCountry()">Add</button>
</div>
<hr>
<div data-ng-repeat="country in countries track by $index">
<span> {{ country.name }} </span>
<span> {{ country.symbol | countryCode }} </span>
<a data-ui-sref="countryView({ name: country.name })"> view </a>
</div>
</data-loader>
</div>

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:
�C $http
�C $window
�C $q

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;
};
}]);

Komponenty - Factory
? Dzia?anie i zastosowanie identyczne jak Service
? Zwraca wynik funkcji zamiast instancji funkcji

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;
}
};
}]);

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:
�C =
�C @
�C &
? Cz?sto u?ywany do inicjalizacji bibliotek jQuery
? Cz?sty pow��d wyciek��w pami?ci

Komponenty - Directive
application.directive('loader', [
function(){
return {
restrict: 'AE',
replace: true,
transclude: true,
templateUrl: 'app/directive/loader/loader.html',
scope: {
isLoading: '='
},
link: function($scope, element) {
var scale = 10;
var negative = true;
$scope.animation = setInterval(function(){
angular.element(element).find(".loader").css('transform', 'scale(' +
scale/10 + ')');
if(negative) scale -= 1; else scale += 1;
if(scale == 0 || scale == 10) negative = !negative;
}, 50);
$scope.$on('$destroy', function() {
clearInterval($scope.animation);
});
}
}
}
]);

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:
�C orderBy
�C filter
�C date
�C currency

Komponenty - Filter
application.filter('countryCode', function() {
return function(input) {
return '[' + input + ']'
};
});

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

Biblioteki
? ui-router
? angular-bootstrap/angular-foundation
? angular-ui
? angular-translate
? ngResource

�ݺ�ߣ

AngularJS - podstawy

More Related Content

AngularJS - podstawy