4. diel - Dokončenie kalkulačky v AngularJS
V minulej lekcii, Prvé aplikácie v AngularJS , sme začali tvorbu jednoduchej kalkulačky v javascriptové frameworku AngularJS. V tomto tutoriálu na ňu nadviažeme a dokončíme jej implementáciu. Minule sme teda dokončili aplikačné štruktúru a stiahli si potrebné knižnice. Dnes budeme predovšetkým implementovať v JS, takže bez ďalšieho otáľania ideme na to!
Model
Naši kalkulačku začneme implementovať od jej modelu tj. Od jej služieb v podaní AngularJS.
App / services / calculator.service.js
Povedzme, že naša kalkulačka bude mať 4 základné operácie, tj.
Sčítanie, odčítanie, násobenie a delenie. Tieto operácie umiestnime do
modelu, pretože nám vracajú výsledky, tj. Naše dáta. Do súboru
calculator.service.js
teda doplníme AngularJS službu, ktorá
plní onú úlohu modelu a vyzerá nasledovne:
'use strict'; /** * Model operací kalkulačky. */ app.service('Calculator', function () { /** * Sečte daná čísla a vrátí výsledek. * @param {int} x první číslo * @param {int} y druhé číslo * @return {int} výsledek sčítání */ this.add = function (x, y) { return x + y; }; /** * Odečte druhé číslo od prvního a vrátí výsledek. * @param {int} x první číslo * @param {int} y druhé číslo * @return {int} výsledek odčítání */ this.subtract = function (x, y) { return x - y; }; /** * Vynásobí daná čísla a vrátí výsledek. * @param {int} x první číslo * @param {int} y druhé číslo * @return {int} výsledek násobení */ this.multiply = function multiply(x, y) { return x * y; }; /** * Vydělí první číslo druhým bezezbytku a vrátí výsledek. * @param {int} x první číslo * @param {int} y druhé číslo * @return {int} výsledek dělení beze zbytku */ this.divide = function (x, y) { return Math.round(x / y); }; });
Okrem pojmu služby vo frameworku by tu pre vás nemalo byť nič prekvapujúce. Môžete si však všimnúť, že keďže som sa rozhodol vykonávať operácie v celých číslach, tak chcem túto vlastnosť zachovať aj u delenie, teda výsledok zaokrúhľuje na celé čísla. Ďalej si bystrejší z vás určite všimli, že nie je ošetrené delenie nulou. To však technicky nie je chyba, pretože pre JS toto nekončí chybou, ale číselnou hodnotou "nekonečno"
Takže základné operácie by sme mali, to však ešte nie je všetko. Keďže by model mal byť rozšíriteľný a podľa MVC by sme pri zmene modelu najlepšie nemali meniť ani kontrolér, ani šablónu, pridáme si ešte jednoduché rozhranie, ktoré nám tieto vlastnosti zaistí. To znamená, že pridáme ešte nasledujúce vlastnosť a metódu:
... /** * Definice pole konstant pro operace kalkulačky. * @type {String[]} */ Object.defineProperty(this, 'operations', { value: { add: 'Sčítání', subtract: 'Odčítání', multiply: 'Násobení', divide: 'Dělení beze zbytku' }, enumerable: true }); ... /** * Zavolá zadanou operaci a vrátí její výsledek. * @param {string} operation zadaná operace * @param {int} x první číslo pro operaci * @param {int} y druhé číslo pro operaci * @return {int|null} výsledek operace nebo null, pokud zadaná operace neexistuje */ this.calculate = function (operation, x, y) { if (this.hasOwnProperty(operation)) return this[operation](x, y); else return null; } ...
Prvá časť kódu definuje novú vlastnosť operations
, ktorá
obsahuje názvy operácií a ich popisky. Druhá časť kódu definuje metódu,
ktorá podľa textového reťazca s názvom operácie zavolá danú metódu
kalkulačky. Pretože názov operácia bude zhodný s názvom metódy, môžeme
podľa neho metódu vybrať ako this[operation]
, kedy v
operation
je napr. Hodnota "add", čo spustí metódu
add()
. Opäť nič, čo vás pri znalosti JS prekvapí. Kto
náhodou nevie, tak takto sa v JS definujú objektovej vlastnosti a vykonáva
reflexie
Kontrolér
Pokračovať budeme implementáciou kontroleru v rámci AngularJS.
App / controllers / calculator.controller.js
Vytvoríme ho teda v súbore calculator.controller.js
a vyzerať
bude nasledovne:
'use strict'; /** * Kontroler kalkulačky. * @param {Object} Calculator model operací kalkulačky předaný pomocí DI */ app.controller('CalculatorController', function (Calculator) { // Počáteční nastavení hodnot. this.x = 0; // První číslo. this.y = 0; // Druhé číslo. this.operations = Calculator.operations; // Předání výběru operací kalkulačky. this.operation = Object.keys(this.operations)[0]; // Výchozí operace kalkulačky (první v seznamu.) this.result = null; // Výsledek výpočtu. // Definice metod. /** * Metoda vykonaná při odeslání formuláře kalkulačky, která zpracuje odeslané hodnoty. */ this.calculate = function () { this.result = Calculator.calculate(this.operation, this.x, this.y); }; });
Tu by som sa už na chvíľu zastavil. Najskôr si všimnite definície kontroleru v rámci frameworku, kde je tiež vidieť DI ( Dependency Injection, ktorá nám umožňuje odovzdávať služby naprieč našou aplikáciou). Tá v AngularJS funguje naozaj skvele, keď v kontroleru potrebujeme používať nejaký model, jednoducho si ho necháme frameworkom odovzdať. Stačí napísať názov služby ako parameter a je hotovo, žiadna ďalšia konfigurácia nie je treba.
Ďalej sa tu definujú premenné, ktoré budú fungovať v šablóne pre odovzdanie hodnôt. Ak teda deklarujeme premennú lokálne, bude k dispozícii len pre kontrolér ako taký. Pokiaľ ju ale urobíme priamo na objekte, bude dostupná aj v šablóne. To isté platí aj u metód, ktoré potom môžeme volať ako akcie z šablón.
U premenných tento princíp navyše ešte znamená, že vďaka obojsmernému bindovanie (prepisovanie hodnôt medzi HTML šablónou a JS premennými), čo je jedna z hlavným predností AngularJS frameworku, tu vlastne definujeme počiatočnej hodnoty v šablóne. Ostatne to za chvíľu uvidíte
Šablóna (View)
Na záver si doplníme šablónu pre náš kontrolér, čo je vlastne mix hlavne HTML a AngularJS kódu.
Index.html
Šablónu pre jednoduchosť vpíšeme priamo do súboru
index.html
a to dovnútra pripraveného "wrapper". Avšak treba
podotknúť, že štandardne bývajú šablóny oddelené v súboroch
zvlášť.
... <!-- HTML + AngularJS kód aplikace, především pak formulář kalkulačky. --> <div id="wrapper" ng-controller="CalculatorController as calculator"> <h1>Kalkulačka v AngularJS</h1> <form ng-submit="calculator.calculate()"> <label for="x"> První číslo: <input id="x" type="number" required ng-model="calculator.x"> </label> <label for="y"> Druhé číslo: <input id="y" type="number" required ng-model="calculator.y"> </label> <label for="operation"> Operace: <select id="operation" required ng-model="calculator.operation" ng-options="key as value for (key , value) in calculator.operations"> </select> </label> <input type="submit" value="Spočítej"> </form> <div id="result" ng-cloak ng-show="calculator.result">Výsledek je: {{calculator.result}}</div> </div> ...
Na záver si poďme tento kód trochu rozobrať. Jeho základ tvorí HTML
formulár, to by malo byť jasné. Ďalej je vidieť definícia kontroleru
pomocou ng-controller
, ktorá v podstate hovorí, že tento blok
HTML kódu sa mapuje ako jeho šablóna a má tým pádom prístup k jeho dátam
a akciám. Zároveň je tu pre neho zavedený alias "calculator".
Neskôr sa teda mapuje odoslaní formulára (submit) na akciu kontroléra
"calculate" pomocou ng-submit
a jednotlivé ukazovatele tohto
kontroleru ako model pre formulár pomocou ng-model
. Tým sa
previaže predávanie dát pomocou už spomínaného bindovanie.
Ďalšou vecou je generovanie možností pre HTML <select>
pomocou ng-options
, ktoré ich vytvára priamo z odovzdaných
hodnôt kontroleru.
Na konci je potom vidieť zobrazenie výsledku pomocou frameworkového
zápisu {{...}}
, ak je definovaný (ng-show
), ktorý
sa vďaka ANGULAR dynamicky mení v závislosti na aktuálnom výpočtu.
Dôležité je tu tiež označenie ng-cloak
, ktoré daný element
schová pomocou CSS, dokiaľ nie je JS načítaný, aby mohol prevziať
kontrolu. Toto CSS sme si definovali už v minulej lekcii.
A tým je naša práca na šablóne aj na celom projekte hotová. Ak sa teraz pozriete na URL projektu, mali by ste vidieť funkčné kalkulačku a môžete na nej vyskúšať všetky chytáky, ktoré vás napadnú
Ak vám nie je čokoľvek jasné, stiahnite si projekt z prílohy a prejdite si ho. Kódu v aplikácii toľko nemáme, po chvíli by ste sa v princípe mali zorientovať.
To je pre túto lekciu naozaj všetko, ale nebojte, nabudúce začneme úplne novú poriadnu aplikáciu v AngularJS. A čo to bude, to sa nechajte prekvapiť
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 92x (15.24 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript