AngularJS Hello World Example


      This tutorial will explain you how to write a simple AngularJS program or in other words a Hello World program. We will be using Eclipse to write this hello world program. Alternatively you do this in notepad and run the program.

Basic intention of this tutorial is to explain AngularJS code that we write for Hello World.

Step 1: Create Static WebProject in Eclipse
       Create a Static Web project in Eclipse. If you are not sure, follow this link.

Step 2: Create a HTML file
       Create a HTML file in your project and add the below code and run the program.

<!doctype html>
<html ng-app>   
   <head>
      <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   </head>
   
   <body>
      <div>
         <label>Name:</label>
         <input type ="text" ng-model ="yourtext" placeholder ="Enter a name here">
         <hr />
         
         <h1>{{yourtext}}</h1>
      </div>
      
   </body>
</html>

Type something in the textbox of the output screen, you should see something like below..

Output

Thats it.. But wait ! how did this happen.. Lets see one by one now..

ng-app directive

<html ng-app>

As you see we have added ng-app directive to <html> tag. This tell Angular to be active in this page or in other words this tells AngularJS that this is the root element of the AngularJS application. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

You can also specify a module name to ng-app, but thats optional
ng-app ="name"


ng-model directive

     ng-model directive can bind the value of input field to a vairable OR in other words the model value is bound with the value of textbox using ng-model attribute. Thus when text box value changes the variable value also changes. This is called as Two Way Binding

Two Way Binding in AngularJS
     Data binding in AngularJS is the synchronization between the model and the view. Changing the value of textbox also changes the AngularJS property values.
Here model is your input textbox and view is the variable. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

{{yourtext}}
     Always your model value should be wrapped in curly braces for Angular to bind the value in view.

Hope this tutorial helps you to understand the below stuff 

  • Hello World in AngularJS example using eclipse as IDE
  • AngularJS ng-app directive
  • AngularJS ng-model directive
  • Two way Binding in AngularJS
  • Using curly braces for model value






Reactions:

0 comments :

Post a Comment