AngularJS
- First Application
Before we start with creating actual HelloWorld application using
AngularJS, let us see what are the actual parts of a AngularJS application. An
AngularJS application consists of following three important parts −
·
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.
Steps to create
AngularJS Application
Step 1 − Load framework
Being 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 3 − Bind the value of above model defined
using ng-bind directive.
<p>Hello <span ng-bind = "name"></span>!</p>
Steps to run AngularJS
Application
Use above mentioned three steps in an HTML page.
testAngularJS.htm
<html>
<head>
<title>AngularJS First Application</title>
</head>
<body>
<h1>Sample Application</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 textAngularJS.htm in a web browser. Enter your name and see
the result.
No comments:
Post a Comment