Home > DeveloperSection > Blogs > Hello World in Angular JS

Hello World in Angular JS


Angular JS Angular JS  Single Page App 
Ratings:
0 Comment(s)
 1977  View(s)
Rate this:

Hello World in Angular JS

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:

<script type="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:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Angular JS Hello World Example</title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

   <!-- <script src="angular.min.js"></script>-->

</head>

<body>

    <div ng-app>

        Your Name:

    <input type="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.


Don't want to miss updates? Please click the below button!

Follow MindStick