Introduction
Basic Angular Program for a Single Page Application to do two distinct tasks on two ng-controllers on one ng-app.
Background
I could not get my app to work, all I wanted was to create a basic math app to work, it did not at first, as it generally goes with all programming tasks so I hunted down some answers.
Using the Code
A basic app for use for pricing, maths or information for absolute beginners. The site and colouring is wierd as I am a wierdo and like to highlight what I have done.
In the below code, I have set up access to bootstap styling, and the JS Angular libraries. I have also used my own styling and put my JavaScript in its own file. Upon downloading this, all files should be run from one folder.
My main reason for using numbers was that the W3 school had little on the basics of numbers, so here I am authoring a very basic JS Angular Numbers App.
<!DOCTYPE html>
<html>
<head>
<title>
Angular Work
</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular.ng-modules.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel ="stylesheet" href="angcss.css">
<script src ="mcsc.js">
</script>
</head>
<body ng-app ="myApp">
HTML Basic Layout and Setup
Both the inside division contains input boxes that are numeric as to do some basic mathematics functions. My Angular App is set to cover the whole body of the HTML. My angular controllers cover the inside divisions and orchestrate the maths involved. For this app to use angular one component must carry the ng-app code, in this case, it is the HTML's body. The JavaScript is run from a script.
<body ng-app ="myApp">
<center><h1> Angular Maths</h1></center>
<div id ="mc2a" >
<h1>Try to change the Values.</h1>
<div ng-controller="myCtrl" id="angApp">
<center><h3> Addition</h3></center>
Value 1: <input type="number" ng-model="val1"><br>
Value 2: <input type="number" ng-model="val2"><br>
<p> Answer: {{val3()}}</p>
<center><h3> Subtraction</h3></center>
Value 4: <input type="number" ng-model="val4"><br>
Value 5: <input type="number" ng-model="val5"><br>
<p> Answer: {{val6()}}</p>
<center><h3> Multiplication</h3></center>
Value 7: <input type="number" ng-model="val7"><br>
Value 8: <input type="number" ng-model="val8"><br>
<p> Answer: {{val9()}}</p>
<center><h3> Division</h3></center>
Value 10: <input type="number" ng-model="val10"><br>
Value 11: <input type="number" ng-model="val11"><br>
<p> Answer: {{val12()}}</p>
</div>
The JavaScript for the Simple Mathematical Operators
The first variable makes available the different parts of the JSAngular App. In this case, that is our two controllers and the models which binds our data. So after the app as a whole opens up for use, the 'ng- controller' can orchestrate the math for each section.
This controller firstly sets all the input boxes to 0 and the last division to input 'one' as to avoid any numeric error. In both sections, there are 4 variables that are configured by the 4 functions which do the mathematics. These four variables derived from the function are then used to fill the answer areas. Please note I did choose to round my numbers on two functions, so I had a consistency in my answers, as I did not want to have a bunch of recurring numbers.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.val1= 0;
$scope.val2= 0;
$scope.val4 = 0;
$scope.val5 = 0;
$scope.val7= 0;
$scope.val8= 0;
$scope.val10 = 0;
$scope.val11 = 1;
$scope.val3 = function(){
return $scope.val1 + $scope.val2;
}
$scope.val6 = function(){
return $scope.val4 - $scope.val5;
}
$scope.val9 = function(){
return $scope.val7 * $scope.val8;
}
$scope.val12 = function(){
return ($scope.val10 / $scope.val11).toFixed(3);
}
});
Second JSAngular Controller
The second part of the HTML will not be shown as it is almost identical to the first shown above bar. I create a table to keep the structure of the input and titles level and even looking. The next part of the JS to call is the other controller to do some different maths which involves the calculating of areas and volumes. This time, I call my second controller and all its component, and add one more facet to the maths and that is I call PI from the Math library which is called as Math.PI, I could have used 3.14, but if we have the tools to be exact why not use them.
app.controller('myCtrl1', function($scope) {
$scope.val1a= 0;
$scope.val2a= 0;
$scope.val4a = 0;
$scope.val5a = 0;
$scope.val7a= 0;
$scope.val8a= 0;
$scope.val10a = 0;
$scope.val11a = 0;
$scope.valcublen = 0;
$scope.val3a = function(){
return $scope.val1a * $scope.val2a;
}
$scope.val6a = function(){
return ($scope.val4a * $scope.val5a) / 2;
}
$scope.val9a = function(){
return ($scope.val7a * $scope.val8a * $scope.val7a * Math.PI).toFixed(3);
}
$scope.val12a = function(){
return $scope.val10a * $scope.val11a * $scope.valcublen;
}
});
Formatting Divisions
I created a background for the body by creating a background colour, as well as adding a bottom margin so the site does not end at the bottom of division or a table. I then create a main Division and place a border on it to mark it out. The two divisions, myDiv1 and myDiv2, are floated to the left and right of this division. This is done on the style sheet, see bold. I left most of myDiv2 styling off as it is identical to the first div bar the float and the background colour.
The float left and right does have to be done with a little precision, as my main division has a width of 1500 and the two other divisions go inside and are smaller than the main Div. If the float is not used, the other division will not go to the right or left and it will not take this form.
body
{
background-color: #F5EBCC;
margin-bottom: 75px;
}
#mainDiv
{
background-color: #F997EB;
border-style: solid;
border-width: 2px;
border-color: #290a33;
height: 800px;
width: 1500px;
margin-top: 35px;
margin-left: 35px;
font-family: Consolas;
font-size:20px;
text-align: center;
line-height:20px;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
}
#myDiv
{
background-color: #FFF7EB;
border-style: solid;
border-width: 2px;
border-color: #290a33;
height: 700px;
width: 655px;
float: left;
padding:10px;
}
#myDiv2
{
float:right
}
Points of Interest
I just wanted to make a Single Page App that did math in this case. It is very basic but the function can be used in any manner.
History
- 12th August, 2015: Initial version
On career 2.0 mainly work in the dot net environment predominantly SQL and SSMS.
Submit an article or tip
