Let me share my first small app in Angular JS.
binding_name.html:-
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Two way data binding</title>
</head>
<body ng-init="name='Anik'">
<input type="text" ng-model="name"/>
<div><h1>Hello, {{name}}</div>
<script src="lib/angular/angular.js"></script>
</body>
</html>
Now, let me show you the screen-shot -
Initially, "Anik" is written in the code, but if you erase the name & type other name, then it will be displayed in the browser.
binding_name.html:-
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Two way data binding</title>
</head>
<body ng-init="name='Anik'">
<input type="text" ng-model="name"/>
<div><h1>Hello, {{name}}</div>
<script src="lib/angular/angular.js"></script>
</body>
</html>
Now, let me show you the screen-shot -
Explanation:-
It is one of the example of Data-Binding. Here, "ng-init" directive is used, declared with a name called Anik. This directive is mainly used to define a value initially. "ng-model" directive is used as a property in the text box. Now, we just need to define that ng-model within the curly braces. Then, the value of that "ng-model" will be shown within the curly braces, similar to the above example. Here, "name" is the value of the "ng-model", so when we define this "name" within the curly braces, then whatever we type in the text box, that will appear in the screen under the "<h1>" tag.
nice work anik!!ALL the BeSt
ReplyDeleteThank You,SIR
Delete