Guruji Point - Code You Want To Write

  • Home
  • Asp.Net
  • WCF
  • SQL
  • Type Script
  • AngularJS
  • Tech News
  • Blog
  • Earn Online

Sunday, 25 June 2017

How AngularJs Is Advance And Less Complex From JavaScript With Example

 angular vs javascript, angularjs, javascript     No comments   


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.

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to TwitterShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Facebook Updates

Guruji Point

Categories

comma seperated string in sql Comman table Expression in SQL Dynamic Grid Row IQueryable in c# Learn AngularJS row_number() and dense_rank() salary table structure. Scope_Identity() Use of indexes while loop in sql why do we need cursor why tuple used

About Us

This blog is about the Programming ,Tech News and some intresting facts related Contents. Here you can find fundamental and expert level topic of programming languages very practically related to C# , Asp.Net ,Sql-Server, JavaScript, Jquery, WebServices And also Web-Api, WCF ,WPF, Angular Js.

Contact Us

Email Us - gurujipoints@gmail.com
Contact- 8077657477

Reach Us

Copyright © Guruji Point - Code You Want To Write