Hii,
This blog is in continuation with my previous blogs on AngularJs, In this blog i am sharing a simple example in which i have used few angularjs directives like ng-app, ng-init, ng-bind, ng-model.
1)ng-app directive is used to initialise an AngularJS application.
2) ng-init directive is used to initialise application data.
3) ng-model directive is used to bind any html control's value to an application data.
4) ng-bind directive is used to bind an application data to the HTML view.
Example:1 In the example given below i have created a form in which user can fill the required information in the given input fields dynamically,
and the output will be shown below.
Here's the code
<div ng-app="">
<h1>Dynamic data generated using angularjs</h1>
<p>My name is <span ng-bind="name"></span></p>
<input type="text" ng-model="name">
<p>My gender is <span ng-bind="gender"></span></p>
<input type="text" ng-model="gender">
<p>My age is <span ng-bind="age"></span></p>
<input type="text" ng-model="age">
<p>My complexion is <span ng-bind="age"></span></p>
<input type="text" ng-model="complexion">
</div>
Example:2 In the example given below whatever data user want as output can intialised in an array using ng-init directive.
Here's the code
<div ng-app="">
<div ng-init="person={Name:'mickey',gender:'Male',age:'12yrs',complexion:'fair'};">
<h1>Static data generated using angularjs</h1>
<p>name <span ng-bind="person.Name"></span></p>
<p>gender <span ng-bind="person.gender"></span></p>
<p>age <span ng-bind="person.age"></span></p>
<p>complexion <span ng-bind="person.complexion"></span></p>
</div>
</div>
Note:Must include this link in your file
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
0 Comment(s)