Angular
JS is used to build the Single page web application. It extends the HTML DOM (Document
Object Model) by adding directive.
Definition
of AngularJs of on its website:
“AngularJS
is a structural framework for dynamic web apps. It lets you use HTML as your
template language and lets you extend HTML's syntax to express your
application's components clearly and succinctly. Angular's data binding and
dependency injection eliminate much of the code you would otherwise have to
write. And it all happens within the browser, making it an ideal partner with
any server technology.”
How to add AngularJs
to web page?
We
can add the Google CDN URL of AngularJs :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
Or
Download the latest version from official website, put it in Js folder of
project and link to web page.
Directive:
AngularJs
directive are used to create the custom HTML attributes. ng- or data-ng- is the
special attribute, it is used as prefix with directive.
ng-app : It defines the root element of application. You can define it
with body <body ng-app="">. You can also define it on
particular section like div <div ng-app="">.
ng-model : It
defines the model that bind the value of textbox, text area to application
variable.
ng-bind : It display
the data that we enter in input, text area etc.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="">
<form id="form1" runat="server">
<div >
Enter Your City Name : <input type="text" data-ng-model="city"
/> <br />
<p>City Name : <span data-ng-bind="city"></span></p>
</div>
</form>
</body>
</html>
DEMO :
No comments:
Post a Comment