Create AngularJS First Application
Wednesday, June 10, 2015
Reading
Add Comment
How to create first Angular JS Application
ng-application : This order characterizes and joins an AngularJS application to HTML.
ng-model : This mandate ties the estimations of AngularJS application information to HTML data controls.
ng-tie : This mandate bidns the AngularJS Application information to HTML labels.
Steps to create AngularJS Application
Step 1: Load framework
Being an immaculate JavaScript system, It can be included utilizing <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
Use aforementioned three stpes in a HTML page.
FirstApplication.htm
<html> <title>AngularJS First Application</title> <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
Use aforementioned three stpes in a HTML page.
How AngularJS integrates with HTML
# ng-application order shows the begin of AngularJS application.
# ng-model order then makes a model variable named "name" which can be utilized with the html page and inside of the div having ng-application mandate.
# ng-tie then uses the name model to be shown in the html compass tag at whatever point client information something in the content box.
# Closing</div> tag demonstrates the end of AngularJS application
0 comments:
Post a Comment