AngularJs Example
example : 1 => simple example
-----------
<input type="text" ng-model="name"/>
<div ng-bind="name"></div>
example : 2 => all area prints
-----------
<div ng-model="name" contenteditable="true"></div>
<div ng-bind="name"></div>
example : 3 => mathematics
-----------
<div>{{10 * 10 +12}}</div>
example : 4 => ng-init tag use
-----------
<div ng-init="name='jaydeep'">
{{name}}<input type="text" ng-model="name"/>
</div>
example : 5 ng-repeat loop examples
-----------
<div ng-init="detail=[{name:'jaydeep',age:'20',city:'rajkot'}]">
<ul ng-repeat="s in detail">
<li>{{s.name}}</li>
<li>{{s.age}}</li>
<li>{{s.city}}</li>
</ul>
</div>
example : 6 controller and module with function examples
-----------
<div ng-controller='language'>
<button ng-click="success()">success</button>
<button ng-click="warn()">warn</button>
<button ng-click="info()">info</button>
<button ng-click="delete()">delete</button>
<p>my button click is : {{MyFavouritelanguage}}</p>
</div>
<script>
var app = angular.module('demo',[]);
app.controller('language', function($scope)
{
$scope.MyFavouritelanguage='none';
$scope.success=function()
{
$scope.MyFavouritelanguage = 'sucess';
};
$scope.warn=function()
{
$scope.MyFavouritelanguage= 'warn';
};
$scope.info=function()
{
$scope.MyFavouritelanguage = 'info';
};
$scope.delete=function()
{
$scope.MyFavouritelanguage = 'delete';
};
});
</script>
example : 7 filter examples
-----------
<input type="text" ng-model="price"/>
<br/>
welcome
Currency : - {{ price | currency:"Rs. "}} <br/>
uppercase : - {{ price | uppercase}} <br/>
lowercase : - {{ price | lowercase}} <br/>
Currency only : - {{ price | currency}} <br/>
Currency points : - {{ price |currency:"Rs.":5 }} <br/>
number : - {{ price | number:5}} <br/>
Currency : - {{ price | currency:"Rs. "}} <br/>
example : 8 header footer include examples
-----------
<div ng-include="'extra.html'">
example : 9 textbox updated examples
-----------
<div ng-controller='counter'>
<input type="text" ng-model="nm"/>
<br/>You updated textbox : {{counter}} times.
</div>
<script>
var app=angular.module('con',[]);
app.controller('counter', function ($scope){
$scope.counter = '0';
$scope.$watch('nm',function(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
$scope.counter++;
if($scope.counter==100)
{
alert('congo');
}
});
});
</script>
</body>
example : 10
-----------
<div ng-controller='counter'>
<li ng-repeat='i in myRange'>
{{i}} <br/>
</li>
</div>
<script>
var app=angular.module('con',[]);
app.controller('counter', function ($scope){
var range=10 , i;
var myRange=[];
for(i=0; i < range; i++)
{
myRange.push(i);
}
$scope.myRange=myRange;
});
</script>
example : 11
-----------
<div ng-controller='counter'>
<li ng-repeat="i in myRange track by $index">
kingpatel9985689898<br/>
</li>
</div>
<script>
var app=angular.module('con',[]);
app.controller('counter', function ($scope){
var range= new Array(100);
$scope.myRange=range;
});
</script>
-----------
<input type="text" ng-model="name"/>
<div ng-bind="name"></div>
example : 2 => all area prints
-----------
<div ng-model="name" contenteditable="true"></div>
<div ng-bind="name"></div>
example : 3 => mathematics
-----------
<div>{{10 * 10 +12}}</div>
example : 4 => ng-init tag use
-----------
<div ng-init="name='jaydeep'">
{{name}}<input type="text" ng-model="name"/>
</div>
example : 5 ng-repeat loop examples
-----------
<div ng-init="detail=[{name:'jaydeep',age:'20',city:'rajkot'}]">
<ul ng-repeat="s in detail">
<li>{{s.name}}</li>
<li>{{s.age}}</li>
<li>{{s.city}}</li>
</ul>
</div>
example : 6 controller and module with function examples
-----------
<div ng-controller='language'>
<button ng-click="success()">success</button>
<button ng-click="warn()">warn</button>
<button ng-click="info()">info</button>
<button ng-click="delete()">delete</button>
<p>my button click is : {{MyFavouritelanguage}}</p>
</div>
<script>
var app = angular.module('demo',[]);
app.controller('language', function($scope)
{
$scope.MyFavouritelanguage='none';
$scope.success=function()
{
$scope.MyFavouritelanguage = 'sucess';
};
$scope.warn=function()
{
$scope.MyFavouritelanguage= 'warn';
};
$scope.info=function()
{
$scope.MyFavouritelanguage = 'info';
};
$scope.delete=function()
{
$scope.MyFavouritelanguage = 'delete';
};
});
</script>
example : 7 filter examples
-----------
<input type="text" ng-model="price"/>
<br/>
welcome
Currency : - {{ price | currency:"Rs. "}} <br/>
uppercase : - {{ price | uppercase}} <br/>
lowercase : - {{ price | lowercase}} <br/>
Currency only : - {{ price | currency}} <br/>
Currency points : - {{ price |currency:"Rs.":5 }} <br/>
number : - {{ price | number:5}} <br/>
Currency : - {{ price | currency:"Rs. "}} <br/>
example : 8 header footer include examples
-----------
<div ng-include="'extra.html'">
example : 9 textbox updated examples
-----------
<div ng-controller='counter'>
<input type="text" ng-model="nm"/>
<br/>You updated textbox : {{counter}} times.
</div>
<script>
var app=angular.module('con',[]);
app.controller('counter', function ($scope){
$scope.counter = '0';
$scope.$watch('nm',function(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
$scope.counter++;
if($scope.counter==100)
{
alert('congo');
}
});
});
</script>
</body>
example : 10
-----------
<div ng-controller='counter'>
<li ng-repeat='i in myRange'>
{{i}} <br/>
</li>
</div>
<script>
var app=angular.module('con',[]);
app.controller('counter', function ($scope){
var range=10 , i;
var myRange=[];
for(i=0; i < range; i++)
{
myRange.push(i);
}
$scope.myRange=myRange;
});
</script>
example : 11
-----------
<div ng-controller='counter'>
<li ng-repeat="i in myRange track by $index">
kingpatel9985689898<br/>
</li>
</div>
<script>
var app=angular.module('con',[]);
app.controller('counter', function ($scope){
var range= new Array(100);
$scope.myRange=range;
});
</script>
