I am not an expert in AngularJS, I have learned it a bit and I have created a small application for calculation purpose using the AngularJS, in which I have implemented various directives of AngularJS such as ng-app,ng-model,ng-switch etc. Now for those who don't know anything about the AngularJS, I just want to tell you guys that AngularJS is a framework of javascript that is best suited for the creation of Single Page Application(SPAs).
AngularJS extends the functionality of HTML with new attributes. These attributes are nothing but the directives that AngularJS provides, now in order to make your application AngularJS compliant you need to add a script URL into the <head> tag of your application using the <script> tag, which is:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Once you have added the script source, you will be able to use the AngularJS in your application. Now If you want to learn more about AngularJS you can learn it from here.
Let us get started with the example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style type="text/css">
//simple css has been added into the application
body
{
background:#2ECC71;
background-size: cover;
}
//here I have used the pseudo class invalid and valid, to change the bg color of input field I have defined input field as required so if nothing is entered it will be in invalid state and when something is entered it will get into the valid state
input:invalid
{
background-color: red;
}
input:valid
{
background-color: pink;
}
td,tr
{
text-align: center;
background-color: #66ff33;
font-weight: bold;
background-repeat: repeat-y;
}
td:hover
{
background-color: pink;
border: solid #333333 10px;
}
table
{
margin-left: 600px;
border: double blueviolet 10px;
}
h1,h3,p
{
text-align:center;
}
</style>
</head>
//here the ng-app directive will initialize the Application
<body ng-app="">
<form>
<div style="text-align: center;margin-top: 70px ">
//The ng-model directive is used to bind the data with the HTML controls in our case with input type and radio buttons are the controls.
Number 1:<input type='number' ng-model="number1" required=""/><br/>
Number 2:<input type='number' ng-model="number2" required=""/><br/>
<h1>Pick a Operation:</h1><br/>
<table border='1'>
<tr>
<td><input type="radio" ng-model="myVar" value="ADD">Addition</td>
</tr>
<tr>
<td><input type="radio" ng-model="myVar" value="Sub">Subtraction </td>
</tr>
<tr>
<td><input type="radio" ng-model="myVar" value="Mul">Multiplication </td>
</tr>
<tr>
<td> <input type="radio" ng-model="myVar" value="Div">Division </td>
</tr>
<tr>
<td><input type="radio" ng-model="myVar" value="Mod">Modular Division</td>
</tr>
</table>
</div>
</form>
//ng-switch will perform operation according to the radio button is selected
<div ng-switch="myVar">
<div ng-switch-when="ADD">
<h1>Your choice is Addition</h1>
//here {{expression}}will output the data it consists expression within it like in our case {{number1+number2}} which are the name of input fields defined above
<p><b>Addition is : {{number1+number2}}</b></p>
</div>
<div ng-switch-when="Sub">
<h1>Your choice is Subtraction</h1>
<p><b>Subtraction is : {{number1-number2}}</b></p>
</div>
<div ng-switch-when="Mul">
<h1>Your choice is Multiplication</h1>
<p><b>Multiplication is : {{number1*number2}}</b></p>
</div>
<div ng-switch-when="Div">
<h1>Your choice is Division</h1>
<p><b>Division is : {{number1/number2}}</b></p>
</div>
<div ng-switch-when="Mod">
<h1>Your choice is Modular Division</h1>
<p><b>Modular Division is :{{number1%number2}}</b></p>
</div>
<div ng-switch-default>
<h3> Enter two numbers in the Given Fields and then select the Operation that you want to Perform !</h3>
</div>
</div>
</body>
</html>
ScreenShots:
Try to implement the given code, and if any problem comes feel free to ask me! Make sure you have a working Internet connection in order to load the AngularJS script that we have added in the head action, otherwise nothing will work.
No comments:
Post a Comment
Thanks for Your Time!