Zápisník experimentátora
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.
HTML kód obsahuje niekoľko častí:
<!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>
Písanie Javascriptu v AngularJS je neskutočne krásne. Všetko sa deje v rámci $scope, kde sa ukladajú všetky údaje.
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