Arduino Slovakia - AngularJS a aplikácie

Pred pár dňami som na moje stránky pridal sekciu Aplikácie. Vytváram tam malé aplikácie, ktoré sa môžu vo svete elektroniky hodiť. Všetky aplikáciu sú vytvárané pomocou Javascriptu. Ale nie je to obyčajný Javasript, ale framework AngularJS, pomocou ktorého sa dynamické stránky vytvárajú veľmi ľahko. V tomto článku si ukážeme, ako taký AngularJS funguje. Ako príklad použijeme aplikáciu na zobrazenie hodnôt vyrábaných rezistorov.

V tomto článku nebudem komentovať tú verziu, ktorá je na hypertexte, ale odľahčenú verziu, kde vás nebude rušiť zbytočne veľa HTML kódu. Iba čistá esencia HTML a Javascriptu. Finálnu verziu si môžete zobraziť priamo zo zdrojového textu zalinkovanej aplikácie.

Aplikácia

HTML

HTML kód obsahuje niekoľko častí:

Na začiatku sa pripojí niekoľko Javascriptov. AngularJS sa stará o logiku a Bootstrap o pekný a jednoduchý dizajn, ktorý bude bez problémov fungovať aj na mobilnom telefóne.
AngularJS vyžaduje, aby ste niekde v kóde použili tag DIV a dva atribúty ng-app a ng-controller. Nemusia byť vyslovene použité tak, ako som to urobil ja, ale pre tento jednoduchý príklad je to dostačujúce.
Všimnite si nasledujúci riadok. Ako elegantne sa pripoja údaje do rozbaľovacej ponuky pomocou atribútu ng-options. Podstatný je aj atribút ng-model, ktorý určuje meno premennej, ktorá je zviazaná s rozbaľovacou ponukou. Priradením hodnoty do tejto premennej môžete programovo meniť vybranú položku z ponuky.
Posledným prvkom je tabuľka, ktorá sa automaticky prispôsobuje tomu, čo je vybrané v rozbaľovacej ponuke. Je to vďaka atribútu ng-repeat, ktorý previazal tabuľku s rozbaľovacou ponukou.

<!DOCTYPE html>
<html>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>

<div  ng-app="myApp" ng-controller="myCtrl">
  <select class="form-control" ng_model="e" ng-options="x.name for x in resistors" ng-change="" id="e"></select>
  
  <table class="table table-striped">
  <tr>
    <th>Index</th>
    <th>Value</th>
    <th>Value 10x</th>
    <th>Value 100x</th>
  </tr>
  <tr ng-repeat="x in e.values">
    <td>{{ $index + 1 }}</td>
    <td>{{ x | number : 2 }}</td>
    <td>{{ 10*x | number : 2 }}</td>
    <td>{{ 100*x | number : 2 }}</td>
  </tr>
</table>
</div>

<script src="resistor.js"></script>

</body>
</html>

Javascript

Písanie Javascriptu v AngularJS je neskutočne krásne. Všetko sa deje v rámci $scope, kde sa ukladajú všetky údaje.

$scope.resistors obsahuje všetky triedy E a príslušné hodnoty rezistorov.
$scope.e=$scope.resistors[2] nám zabezpečí, že implicitne bude v rozbaľovacej ponuky nastavená trieda E12.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  
  $scope.resistors= [
    {name: 'E3',  values: [1.0,2.2,4.7]},
    {name: 'E6',  values: [1.0,1.5,2.2,3.3,4.7,6.8]},
    {name: 'E12', values: [1.0,1.2,1.5,1.8,2.2,2.7,3.3,3.9,4.7,5.6,6.8,8.2]},
    {name: 'E24', values: [1.0,1.1,1.2,1.3,1.5,1.6,1.8,2.0,2.2,2.4,2.7,3.0,
                           3.3,3.6,3.9,4.3,4.7,5.1,5.6,6.2,6.8,7.5,8.2,9.1]},
    {name: 'E48', values: [1.00,1.05,1.10,1.15,1.21,1.27,1.33,1.40,1.47,1.54,
                           1.62,1.69,1.78,1.87,1.96,2.05,2.15,2.26,2.37,2.49,
                           2.61,2.74,2.87,3.01,3.16,3.32,3.48,3.65,3.83,4.02,
                           4.22,4.42,4.64,4.87,5.11,5.36,5.62,5.90,6.19,6.49,
                           6.81,7.15,7.50,7.87,8.25,8.66,9.09,9.53]},
    {name: 'E96', values: [1.00,1.02,1.05,1.07,1.10,1.13,1.15,1.18,1.21,1.24,
                           1.27,1.30,1.33,1.37,1.40,1.43,1.47,1.50,1.54,1.58,
                           1.62,1.65,1.69,1.74,1.78,1.82,1.87,1.91,1.96,2.00,
                           2.05,2.10,2.16,2.21,2.26,2.32,2.37,2.43,2.49,2.55,
                           2.61,2.67,2.74,2.80,2.87,2.94,3.01,3.09,3.16,3.24,
                           3.32,3.40,3.48,3.57,3.65,3.74,3.83,3.92,4.02,4.12,
                           4.22,4.32,4.42,4.53,4.64,4.75,4.87,4.99,5.11,5.23,
                           5.36,5.49,5.62,5.76,5.90,6.04,6.19,6.34,6.49,6.65,
                           6.81,6.98,7.15,7.32,7.50,7.68,7.87,8.06,8.25,8.45,
                           8.66,8.87,9.09,9.31,9.53,9.76]},
  ];
  
  $scope.e=$scope.resistors[2];
  
});

A to je všetko. O celú dynamiku stránky sa následne stará AngularJS a vy nemusíte napísať ani o čiaročku kódu navyše. Vďaka tomu sa v nasledujúcich mesiacoch dočkáte viacerých aplikácií pre Arduino a elektroniku na mojich stránkach.

14.01.2017

AngularJS a aplikácie

HTML

Javascript

Menu