How to code the Angular JS ‘ng-model’ directive in Vanilla JS without a library.

/, Java Script, Programming/How to code the Angular JS ‘ng-model’ directive in Vanilla JS without a library.

How to code the Angular JS ‘ng-model’ directive in Vanilla JS without a library.

Angular JS is one of the widely used Javascript frameworks in the coding world today, it is essentially useful for declaring dynamic views in web applications. In fact, Angular JS is one of the most finest frameworks that can spur the passion for developing web applications at the speed of light. AngularJS enables easy extension of HTML with new attributes called Directives. It has a set of built-in directives which offer functionality to your applications. one of them is the ng-model. With Angular’s ng-model, you may not need to code necessarily to make a simple app that displays input element value in real time on the html. ng-model directive is basically used to bind the value of an input field to a property made in the controller. Let’s quickly build a simple web app that displays content typed in an html input element in real time. This simple technique can be integrated in great apps like chatting apps that mirrors what you have typed on a device into a database, and you can pick another device to continue from where you stopped on the previous device. Cool right? Copy these html codes into your text editor( e.g notepad), save it as angularapp.html or any other name you like, then launch the html file on your browser to view the result. NOTE: You have to be connected to the internet to load the Angular JS library remotely.
<!doctype html>
<html ng-app>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body>
<div>
<h1>Angular’s ng-model, NO-CODING!</h1>

<hr>
<h3>Hello, tell us about your coding experience below.What you type would show below the input element in in realtime</br> </h3>
<input type=”text” ng-model=”typeHere”>
<p>{{typeHere}}</p>
</div>
</body>
</html>

Coding This in Vanilla JS

In simple english, coding in Vanilla JS is like coding in plain JavaScript without any additional libraries like Angular JS. This has a super advantage because it gives you the quality of a veteran programmer who would not depend on libraries necessarily to work on demanding situations. With Vanilla JS, we can code exactly what we have just done using Angular ng-model without using any library. Let’s begin.
!doctype html>
<html >
<body>
<div>
<h1>Coding the Vanilla Javascript version of Angular ng-model</h1>
Type about what you have learnt here..<input type=”text” id=”textHere” onmousedown =”realtimeText()”>
<h3 id=”displayHere”></h3>
</div>
<script>
var displayHere = document.getElementById(‘displayHere’);
var textHere = document.getElementById(‘textHere’);
setInterval(realtimeText,1000);
function realtimeText(){
var textHereValue = textHere.value;
displayHere.innerHTML = textHereValue;
}
</script>
</body>
</html>


The advantage of coding this app in Vanilla JS

The advantage of coding the same app in Vanilla JS is evident. It does not require a library and of course it would be a lighter app compared to using the angular library.
By |2017-12-17T21:19:29+00:00December 10th, 2017|Angular JS, Java Script, Programming|0 Comments

About the Author:

Leave A Comment