Dot Net Stuff

AngularJS - First Application Example


If you have read How to use Angularjs to develope your first Angularjs web Application. Article. Then you can easily understand this article. It is a suggestion to go through How to use Angularjs to develope your first Angularjs web Application Article to understand the basics of AngularJS setup. Here I am assuming that you had read that suggested article. So, let’s start creating our First AngularJS Application. Before, creating our sample AngularJS application, I think you should have the following concepts.

There are three major parts that an AngularJS application consists -

  • ng-app − This directive defines and links an AngularJS application to HTML.
  • ng-model− This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind− This directive binds the AngularJS Application data to HTML tags.

Now, Let’s start step by step tutorial to create your first AngularJS application.

Steps to create AngularJS Application

Step 1 − Load framework

As AngularJS library is a pure JavaScript framework, It can be added using </script> tag.

 
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Step 2 − Define AngularJS Application using ng-app directive

 
<div ng-app = "" >
   ...
</div>

Step 3 − Define a model name using ng-model directive

 
<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4 − Bind the value of above model defined using ng-bind directive.

 
<p>Hello <span ng-bind = "name"></span>!</p>

Steps to run AngularJS Application

Following are the sample code that we have created using above mentioned three steps in an HTML page.
sampleAngularJS.html

 
      <html>   
         <head>
            <title>AngularJS First Application Example – Dot Net Stuff</title>
         </head>   
         <body>
            <h1>Welcome to Dot Net Stuff      </h1>      
            <div ng-app = "">
               <p>Enter your Name:       <input type = "text" ng-model = "name">      </p>
               <p>Hello       <span ng-bind = "name">      </span>!</p>
            </div>      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>      
   </body>
</html>

Output

Open sampleAngularJS.html in a web browser. Now, type your name and see the result.

How AngularJS integrates with HTML

  • ng-app directive indicates the start of AngularJS application.
  • ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.
  • ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.
  • Closing</div> tag indicates the end of AngularJS application.

Summary: In this article we have learn to create our First AngularJS Application. We have also learn how AngularJS works and the concepts of AngularJS ng-app, ng-model and ng-bind.You can download sample code here Now you can easily start to works with AngularJS. I hope you will like this article and now you are able to start with AngularJS easily.


Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus