Zápisník experimentátora
A few days ago I added the Applications section to my site. I create small applications there that can be useful in the electronics world. All applications are created using Javascript. But it's not just Javascript, but the AngularJS framework that makes dynamic pages very easy to create. This article will show you how AngularJS works. As an example, we will use the application to display the values of the resistors produced.
In this article, I will not comment on the version that is in the hypertext but a lightweight version where you will not be disturbed by a lot of HTML code. Only pure essence of HTML and Javascript. You can view the final version directly from the source of the linked application.
The HTML code contains several parts:
<!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>
Writing Javascript in AngularJS is incredibly beautiful. Everything is done within $scope, where all data is stored.
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];
});
And that is all. AngularJS then takes care of the whole page dynamics and you don't have to write too much extra source code. This will allow you to see more Arduino and electronics applications on my site over the coming months.
01.07.2019