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.
Step 2 − Define AngularJS Application using ng-app directive
1 2 3 | <div ng-app = "" >
...
</div>
|
Step 3 − Define a model name using ng-model directive
1 | <p>Enter your Name: <input type = "text" ng-model = "name"></p>
|
Step 4 − Bind the value of above model defined using ng-bind directive.
1 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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>
</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.