Toto je příspěvek hosta od Kevina P. webový vývojář a čtenář Tutorialzine, který z minulého týdne navrhl lepší přístup k našemu formuláři Backbone.js pomocí AngularJS. Výsledný kód byl o tolik jednodušší a kratší, že jsem pozval Kevina, aby se o něj s vámi podělil.
Výukový program aplikace Backbone.js z minulého týdne ukazuje, jak vytvořit dynamický formulář pomocí JavaScriptu, jQuery a knihovny Backbone. Funguje to perfektně, ale existuje více než jeden způsob, jak tuto formu vytvořit, a zde vám ukážu, jak ji vytvořit pomocí AngularJS. JS kód má pouze 15 řádků oproti původním 123! A co víc, nejsou potřeba žádné další knihovny kromě AngularJS!
Pár slov o AngularJS
AngularJS je knihovna od Google, jejímž cílem je jasně oddělit vykreslování HTML od vašich dat. Pomocí něj můžete ve svém HTML deklarovat vazby, které popisují, jak by měl být vykreslen a kterému datovému modelu odpovídá vaše označení. Pokud potřebujete upravit jakýkoli aspekt vaší stránky, udělejte to změnou HTML a CSS; JS obsahuje vaše data a logiku za nimi – v našem příkladu jsou modelem různé služby a logikou je výpočet celkové ceny.
S AngularJS bude váš kód krátký a snadno pochopitelný. To je důležité, protože když je kód stručný, můžete rychle zjistit, kde provést změny, a je lépe udržovatelný.
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Your First AngularJS App</title>
<!-- Google web fonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel='stylesheet' />
<!-- The main CSS file -->
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<form id="main" ng-app ng-controller="myservices">
<h1>My Services</h1>
<ul id="services">
<!-- The services will be inserted here -->
<li ng-repeat="service in services">
<label>
<input type="checkbox" ng-model="service.selected" value="1" name="{{service.title}}" />
{{service.title}}<span>${{service.price}}</span>
</label>
</li>
</ul>
<p id="total">total: <span>${{total()}}</span></p>
<input type="submit" id="order" value="Order"/>
</form>
<!-- The single AngularJS include -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.5/angular.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> Vypadá podobně jako originál s důležitými rozdíly:
- Celé HTML je zde. Žádné '
- Nové atributy popisují, co dělat s daty. 'ng-repeat ' deklaruje šablonu, která se má použít pro každou službu (a s );
- ng-model="service.selected" přidruží stav zaškrtávacího políčka k „vybrané“ proměnné každé služby (zpočátku nedefinované, což znamená nepravda);
- Zástupné symboly označují, kam vložit hodnotu z našeho modelu. {{service.price}} stanoví cenu;
- Volání funkcí jsou potřeba, když je na data aplikována logika. Pomocí total() sečteme cenu vybraných služeb;
- Knihovna jQuery není potřeba!
JavaScript
JavaScript je tak krátký, jak jen může být:
assets/js/script.js
function myservices($scope){
$scope.services=[
{ title: 'web development', price: 200},
{ title: 'web design', price: 250},
{ title: 'photography', price: 100},
{ title: 'coffee drinking', price: 10}];
$scope.total=function(){
var t = 0;
angular.forEach($scope.services, function(s){
if(s.selected)
t+=s.price;
});
return t;
};
} - Funkce „moje služby " odpovídá ng-controller atribut na našem formuláři. AngularJS bude fungovat pouze uvnitř našeho formuláře;
- Náš datový model musí být uložen v $scope proměnná, která má být přístupná z HTML. Nejprve deklarujeme náš seznam služeb;
- celkem() funkce prochází službami a přidává ceny vybraných služeb. 'angular.forEach ' je pohodlná funkce, mohlo být použito standardní 'for'.
Nemusíte si dělat starosti, když jsou vaše data načtena nebo total() volaná funkce. AngularJS to udělá za vás. Stačí aktualizovat data modelu v JavaScriptu a knihovna aktualizuje HTML.
Jděte dále
AngularJS a Backbone.js mají podobný účel, ale řeší problémy odlišně. Oba vám poskytují nástroje pro vytváření vysoce dynamických webových aplikací. Platí ale obvyklé nedostatky – protože je aplikace závislá na JavaScriptu, nejsou tyto knihovny z hlediska SEO dobré.
Dalším dobrým krokem je přečíst si oficiální tutoriál AngularJS, který vysvětluje všechny základy, nebo se podívat na nějaká videa. Chcete-li získat skvělý přehled všech hlavních rámců JS na straně klienta, můžete navštívit stránku http://todomvc.com/, která implementuje stejné To Do aplikace v každém z nich.