Getting Started with Angular JS Basics — Ng-model

Hello Everyone, I have started dabbling with front end technology recently and learning JavaScript as well as its much talked about front end framework — Angular JS.

In this post, I will discuss a powerful in-built feature of Angular JS — ng-model. Before we start with the core work, let us clear some of the basics of MVC for novice(including your author).

Model View Controller

Model stands for the data or properties related to your application

View is what you see on your browser.

Controllers are business logic or functions that hold data.

We will create a simple calculator that displays the result of the operands on change of the text. Let us quickly get started.

There are certain prerequisite which will help you know better.

  • Familiarity with fundamentals of HTML, CSS and JavaScript are needed.
  • You need to use an IDE or a text editor to work with Angular JS. I am using Visual Studio Community Edition 2015. It is free to use. I will share all relevant links at the end of the blog.
  • Download Angular JS version 1.x and you need to mention the path in the script tag in your application.

Create a module for your Angular JS application.

 // create a module here 
var mymodule = angular.module(“MyModule”, []);
In your HTML page, you need to include the ng-app directive. It is used to bootstrapped or initialise your application.
<!DOCTYPE html>
<html ng-app=”MyModule
<head>
<title></title>
<meta charset=”utf-8" />
<script src=”scripts/angular.js”></script>
</head>

Next, we need to create a controller. As said earlier, controllers are like functions in JavaScript that hold logic which can be reused across the project. We start by targeting our myModule variable and attach a controller to it.

mymodule.controller(“controller-name”, callback function){}
mymodule.controller(“CalculatorCheck”, function ($scope){
// $scope is the only way through which you can expose data to the view
// declare properties here or models (data) in angular js
     $scope.Operand1 = 0.00; // input 1
$scope.Operand2 = 0.00; // input 2
$scope.Operator = ""; // operator(+, -, /, *)
$scope.Result = 0.00; // final result
}
});

Now we need to structure our HTML or view page

<! — Here we will create a div tag for View purpose. Note div is View in MVC structure
<h2>Ng-Model in Angular JS</h2>
<div ng-controller=”CalculatorCheck”>
// here we will bind the value of operand with text box using ng-model. Ng-model is a two way data binding technique. It stores the user input in a variable.
</div>
Typically a one way binding in Angular JS is done through using {{operand}}

Inside your div tag, you need to add the input text

<h3>Operand is: {{Operand1}}  <input type="text" ng-model="Operand1" ng-change="showResult()" /></h3>
<h3>Operand is: {{Operand2}}  <input type="text" ng-model="Operand2" ng-change="showResult()" /></h3>
<h3>Operand is: {{Operator}}  <input type="text" ng-model="Operator" ng-change="showResult()" /></h3>
<h3>Result is:  {{Result}}</h3>

Here we will understand each piece of code. * We use a directive or in-built feature called ng-controller and attach it to the CalculatorCheck controller. *

Inside the div tag we have used {{}} braces. It typically indicates one way binding — change the data, view will get reflected, But we don’t need that. We need a two way binding that results in changing the data when we change the view. Any value or number we add in the input box, it should also update the data.

Here we will use ng-model that does two way binding. Use the tag snide the <H3> tag and give it the value of the respective operand. That’s it. When you refresh and run the page in your local, you will find the changes.

One last thing for the final result to display, we need to write a logic and put together in the view. Now let us go back to the controller function and add this piece of code.

// now let us create a controller for caluclator. A controller holds the function together.
mymodule.controller(“CalculatorCheck”, function ($scope)
$scope.Operand1 = 0.00;
$scope.Operand2 = 0.00;
$scope.Operator = “”;
$scope.Result = 0.00;
// now for the result to display the value we need to create a function
$scope.showResult = function ()
{
if ($scope.Operator == “+”) {
$scope.Result = parseFloat($scope.Operand1) + parseFloat($scope.Operand2);
}else if ($scope.Operator == “-”) {
$scope.Result = parseFloat($scope.Operand1) — parseFloat($scope.Operand2);
}else if ($scope.Operator == “*”) {
$scope.Result = parseFloat($scope.Operand1) * parseFloat($scope.Operand2);
}else if ($scope.Operator == “/”) {
$scope.Result = parseFloat($scope.Operand1) / parseFloat($scope.Operand2);
}
}; // showResult ends here
}); // calculatecontroller ends here

Now attach the ng-change directive to the h3 tag. Like this ng-change=””showResult()”.

You should see the final result as expected.

FInal html output

We will continue with our journey on learning Angular JS basics. Please do not forget, frameworks will come and go, but language will remain. Learn the JS fundamentals and keep learning. That is most important.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.