Introduction
In this article we will learn what is the advantages of Angularjs over Javascript with example. How angularjs follows the WLDM (Write Less Do More) concept. Angular Js MVVM example and Javascript MVVM example.
Previous Updates
In previous articles we have learnt EncryptByPassPhrase and DecryptByPassphrase function in Sql Base64 Encoding And Decoding In SQL Server. Read Write connection string from web.config file.
Why AngularJs Used
As per AngularJs official website "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."
But we can use Javascript, Jquery ,Node.js and many more client side scripting language to perform dynamic operations with HTML. So why angular is used rapidly in WebApplications and in all Web-Api's. you can find the best example here for this and you will get the best idea which language you should use.
Achieve MVVM Using JavaScript Example :-
MVVM is Model–view–viewmodel software architecture pattern. By using this method you can bind your given input values on web page at the same time.
If you are using Visual Studio for this then Create a WebApplication project and add a simple Html page and paste the below given code in your page.
<html>
<head>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
debugger;
var name = $('#txtname');
var msg = $('#msg');
name.keyup(function () {
msg.text('Hello ' + name.val() + '!');
})
})
</script>
</head>
<body>
<input id="txtname" type="text" />
<h2 id="msg"></h2>
</body>
</html> |
Output of this Code
Achieve MVVM Using AngularJs Example
Now here i will write a small code snippet to achieve the same which we already did with JavaScript.
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="txtname" />
<h2>Hello {{txtname}}!</h2>
</body>
</html> |
Output of this Code
Just look at the both URls, In javascript my web page is Js_Exp.Html and here in Angular it is Angular_Exp.html. So now you can easily understand both the code doing the same thing but in Angular we write only a single line to achieve this and in Javascript we need to read all values and then performing the operations on key events of control.
0 comments:
Post a Comment