AngularJS and Applications

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.

Applications

HTML

The HTML code contains several parts:

  • Some Javascript files will be added at the beginning. AngularJS takes care of logic and Bootstrap for a nice and simple design that will work smoothly on your mobile phone.
  • AngularJS requires that you use the DIV tag and two ng-app and ng-controller attributes somewhere in the code. They do not have to be explicitly used as I did, but it is sufficient for this simple example.
  • Note the following line. How to elegantly append data to a drop-down menu using the ng-options attribute. Also important is the ng-model attribute, which specifies the name of the variable that is associated with the drop-down menu. By assigning a value to this variable, you can programmatically change the selected item from the menu.
  • The last element is a table that automatically adjusts to what is selected in the drop-down menu. This is due to the ng-repeat attribute that linked the spreadsheet to the drop-down menu.
<!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

Writing Javascript in AngularJS is incredibly beautiful. Everything is done within $scope, where all data is stored.

  • $scope.resistors contains all E classes and the corresponding resistor values.
  • $scope.e=$scope.resistors[2] ensures that E12 is set by default in the drop-down menu.
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


Menu