In this blog, I’m explaining angular js and how to make a simple hello world example in angular js.
Angular Js
AngularJS is a JavaScript framework developed by a Googler and supported by Google. AngularJS is a framework that binds your HTML (views) to JavaScript objects (models). When your models change, the page updates automatically. The opposite is also true – a model, associated with a text field, is updated when the content of the field is changed. Angular handles all the glue code, so you don’t have to update HTML manually or listen for events, like you do with jQuery.
Example
First create an empty asp.net application and include an html page in it.
In order to write code in Angular JS, we have to include angular javascript file into our html page like this:
<scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
Now write the below code in your html page:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS Hello World Example</title>
<scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- <script src="angular.min.js"></script>-->
</head>
<body>
<divng-app>
Your Name:
<inputtype="text"ng-model="name"/>
<h1>Hello {{ name }}</h1>
</div>
</body>
</html>
Output
Now run the application:
Now type your name in the textbox:
Write your name in the textbox and see how the value changes after the “Hello”.
We have defined some Angular Js tags in our html page like:
ng-app
We have defined this tag with our div tag in the html page. This attribute tells the Angular to be active in this portion of the page. If you want to enable angular for whole html page, put it in html tag and if you want to enable angular for specific portion of the page like I did in the example put it into specific div tag.
ng-model
We define attribute ng-model in textbox as ng-model=”name”. The ng-model binds the state of textbox with model value. In our case we define a model “name”. This model value is bound with the value of textbox using ng-model attribute. Thus, when the textbox value changes, Angular automatically changes the model name’s value with textbox’s value. This is called two way data binding. Similarly, if we change the model value than Angular will change the value of textbox.
Leave Comment