AngularJS a aplikace

Zápisník experimentátora

Před pár dny jsem na mé stránky přidal sekci Aplikace. Vytvářím tam malé aplikace, které se mohou ve světě elektroniky hodit. Všechny aplikaci jsou vytvářeny pomocí JavaScriptu. Ale není to obyčejný javasript, ale framework AngularJS, pomocí kterého se dynamické stránky vytvářejí velmi snadno. V tomto článku si ukážeme, jak takový AngularJS funguje. Jako příklad použijeme aplikaci na zobrazení hodnot vyráběných rezistorů.

V tomto článku nebudu komentovat tu verzi, která je na hypertextu, ale odlehčenou verzi, kde vás nebude rušit zbytečně mnoho HTML kódu. Pouze čistá esence HTML a JavaScriptu. Finální verzi si můžete zobrazit přímo ze zdrojového textu zalinkovanej aplikace.

Aplikace

HTML

HTML kód obsahuje několik částí:

  • Na začátku se připojí několik JavaScriptu. AngularJS se stará o logiku a Bootstrap o pěkný a jednoduchý design, který bude bez problémů fungovat i na mobilním telefonu.
  • AngularJS vyžaduje, abyste někde v kódu použili tag DIV a dva atributy ng-app a ng-controller. Nemusí být vysloveně použity tak, jak jsem to udělal já, ale pro tento jednoduchý příklad je to dostačující.
  • Všimněte si následující řádek. Jak elegantně se připojí údaje do rozbalovací nabídky pomocí atributu ng-options. Podstatný je i atribut ng-model, který určuje jméno proměnné, která je svázána s rozbalovací nabídkou. Přiřazením hodnoty do této proměnné můžete programově měnit vybranou položku z nabídky.
  • Posledním prvkem je tabulka, která se automaticky přizpůsobuje tomu, co je vybrané v rozbalovací nabídce. Je to díky atributu ng-repeat, který provázal tabulku s rozbalovací nabídkou.
<!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

Psaní Javascriptu v AngularJS je neskutečně krásné. Vše se děje v rámci $scope, kde se ukládají všechny údaje.

  • $scope.resistors obsahuje všechny třídy E a příslušné hodnoty rezistorů.
  • $scope.e=$scope.resistors[2] nám zajistí, že implicitně bude v rozbalovací nabídky nastavena třída 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šechno. O celou dynamiku stránky se následně stará AngularJS a vy nemusíte napsat ani o čárečku kódu navíc. Díky tomu se v následujících měsících dočkáte více aplikací pro Arduino a elektroniku na mých stránkách.


01.07.2019

Menu