Today’s starting programmers mostly directly dive into Jquery / angularjs , Programmers of last decade started with javascript . and Now Angularjs is on hike .
See whenever a WebPage is opened , JS / Jquery / AngularJS Code is on Client Side So Amount of Code is adds to Page will Increase Request Time .
We Use Javascript Before Jquery , Different types of Sliders , Dom Manipulations were done with lot of Javascript code like using But After Jquery We took a Relief for many things as below
Lines of Code Decides Lifeline of App as below -
Javascript -
Function changeBachground(color) {
Document.body.style.background = color;
}
Onload=”changeBackground (‘red’);”Jquery
$ (‘body’) .css (‘background’, ‘#ccc’);So Simple if we can achieve something easily with less code why we will not adopt it
Then AngularJS Came that is a complete MVC Framework . It is also Javascript Framework . So whatever you do with AngularJS you can also achieve with Javascript . But Why you need to it start it from scratch you can join angularjs repository to propose some solid changes to it and extend it if you strongly need as doing everything you need to do in a website using javascript doesn’t look good idea .
JAVASCRIPT CODE
Characters: 700
Lines of JavaScript: 13
<!DOCTYPE html>
<html>
<body>
<h1>Hello World with pure JavaScript</h1>
Write some text in textbox:
<input id="hello-input" type="text" />
<h2 id="hello-output">Hello </h2>
<script>
var inputField = document.getElementById('hello-input');
var label = document.getElementById('hello-output');
var handleKeyup = function() {
var value = inputField.value;
label.innerHTML = 'Hello ' + value;
}
if (document.addEventListener) {
document.addEventListener('keyup', handleKeyup);
} else if (document.attachEvent) {
document.attachEvent('keyup', handleKeyup);
}
</script>
</body>
</html>
JQUERY
Characters: 529
Lines of JavaScript: 7
<!DOCTYPE html> <html> <body> <h1>Hello World with jQuery</h1> Write some text in textbox: <input id="hello-input" type="text" /> <h2 id="hello-output">Hello </h2> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> var inputField = $('#hello-input'); var label = $('#hello-output'); inputField.on('keyup', function() { var value = inputField.val(); label.html('Hello ' + value); }); </script> </body> </html>
ANGULARJS
Characters: 325
Lines of JavaScript: 0
<!DOCTYPE html> <html ng-app> <body> <h1>Hello World with AngularJS</h1> Write some text in textbox: <input type="text" ng-model="sometext" /> <h2>Hello {{sometext}}</h2> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </body> </html>