Learn Angular Js Simple

Filters
{{name|uppercase}}
{{name|lowercase}}
{{name|currency}}
{{name|currency:"Rs."}}
{{name|currency:"Rs.":4}} // 4 decimal points
{{name|number}}
{{name|number:5}}
ng-include
<div ng-include="'myext.html'"></div>
<script src="js/controllers.js" ></script>
Routing :
var myapp=angular.module("myroutepp",['ngRoute']); //$routeProvider comes from ngRoute
dependancy module
myapp.config(function ($routeProvider){
$routeProvider.when('/',{
template:'Welcome user !'
})
.when('/anotherpage',{
template:'Welcome user,again !'
})
.otherwise({
redirectTo:'/'
});
});
More on Routing
dependancy module
templateUrl:'login.html'
})
.when('/anotherpage',{
templateUrl:'pagenotfound.html'
})
.otherwise({
redirectTo:'/'
});
});
Login app part 1:

controllers.js:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
dependancy module
})
.when('/dashboard',{
templateUrl:'dashboard.html'
})
.when('/error',{
})
.otherwise({
redirectTo:'/error'
});
});
myapp.controller("loginctrl",function($scope,$location){
$scope.submit=function(){
var username=$scope.username;
var password=$scope.password;
if(username=='admin'&&password=='admin'){
//window.location.hash="#/dashboard";//alternative
$location.path('/dashboard')
}
else{
alert("invalid credentials");
}
}
});
login.html
<div ng-controller="loginctrl">
<form action="/" id="mylogin">
<input type="text" name="username" id="username" ng-model="username" ></br>
<input type="password" name="password" id="password" ng-model="password"></br>
<button type="button" ng-click="submit()" >Submit</button>
</form>
</div>
dashboard.html
<h1>This is user dashboard</h1>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Learn Angular</title>
<script src="js/angular.min.js" ></script>
<script src="js/angular-route.js" ></script>
</head>
<body ng-app="myroutepp">
<div ng-view="myview"></div>
</body>
</html>

dependancy module
})
.when('/dashboard',{
resolve:{
"check":function($location,$rootScope){
if(!$rootScope.islogin){
$location.path('/');
}
}
},templateUrl:'dashboard.html'
})
.when('/error',{
})
.otherwise({
redirectTo:'/error'
});
});
myapp.controller("loginctrl",function($scope,$location,$rootScope){
$scope.submit=function(){
var username=$scope.username;
var password=$scope.password;
if(username=='admin'&&password=='admin'){
$rootScope.islogin=true;
//window.location.hash="#/dashboard";//alternative
$location.path('/dashboard');
}
else{
alert("invalid credentials");
}
}
});
$http Service
var myapp=angular.module("myhttpapp",[]);
myapp.controller("myctrl",function($scope,$http){
$http.get("http://localhost:8080/public_html/dbres.json").success(function(response){
$scope.persons= response.recs;
});
});
{
"recs": [
{ "name":"vignesh",
"Age":"22"
},
{ "name":"kiran",
"Age":"25"
},
{ "name":"praveen",
"Age":"22"
},
{ "name":"naren",
"Age":"27"
},
{ "name":"swarup",
"Age":"21"
},
{ "name":"swapna",
"Age":"24"
}
]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Learn Angular</title>
<script src="js/angular.min.js" ></script>
</head>
<body ng-app="myhttpapp">
<div ng-controller="myctrl">
<h2>Our Employees</h2>
<ul>
<li ng-repeat="person in persons">
{{ person.name +" : "+person.Age }}
</li>
</ul>
</div>
</body>
</html>
Simple Searchbox:
<input ng-model="sugg" type="text">
<ul>
<li ng-repeat="person in persons | filter:sugg">
{{ person.name +" : "+person.Age }}
</li>
</ul>
Advanced Searchbox
<div ng-controller="myctrl">
<h2>Our Employees</h2>
<div id="searchboxes">
<input ng-model="globalSearch.$" type="text">
<input ng-model="globalSearch.name" type="text">

<input ng-model="globalSearch.Age" type="text">
<input ng-model="globalSearch.FavColor" type="text">
</div>
<ul>
<li ng-repeat="person in persons | filter:globalSearch">
{{ person.name +" : "+person.Age+" : "+person.FavColor }}
</li>
</ul>
</div>
</body>
passing data betweeen scopes
Does not work
<input type="text" ng-model="name">
<span ng-repeat="i in [1]">
<input type="text" ng-model="name"></br>
inner you wrote: {{name}}
</span>
</br>
outer you wrote: {{name}}
</body>
works
<input type="text" ng-model="name.msg">
<span ng-repeat="i in [1]">
<input type="text" ng-model="name.msg"></br>
inner you wrote: {{name.msg}}
</span>
</br>
outer you wrote: {{name.msg}}
</body>
Range Based Loops

<div ng-controller="mycont">
<li ng-repeat="i in range track by $index">
<h4>test</h4>
</li>
</div>
</body>
myapp.controller("mycont",function($scope){
var ranger = new Array(100);
$scope.range=ranger;
});
Watch:
$scope.countern=0;
$scope.$watch("myinp",function(oldValue,newValue){
$scope.countern++;
});
});
<input type="text" ng-model="myinp">
<h1>{{myinp}}</h1>
<h4>{{countern}}</h4>
</div>
</body>
Digest
$scope.myrand=Math.random();
document.querySelector('#genbut').addEventListener('click',function(){
$scope.myrand=Math.random();
$scope.$digest();
});
});
<h1>{{myrand}}</h1>
<button type="button" id="genbut">generate</button>
</div>
</body>
Services:
myapp.service("ran",function (){
var num=Math.floor(Math.random()*10);
this.name="hello";
this.generate=function(){
return num;
};
});
myapp.controller("mycont",function($scope,ran){
//$scope.myrand=Math.random();
$scope.myrand=ran.generate();
$scope.$digest();
});
});
Factories:
myapp.factory("ran",function (){
var randobj={};
var num=Math.floor(Math.random()*10);
randobj.name="hello";
randobj.generate=function(){
return num;
};
return randobj;
});
myapp.controller("mycont",function($scope,ran){
$scope.myrand=ran.generate();
$scope.$digest();
});
});
Providers:
myapp.provider("date",function (){
return {
$get:function (){
return {
showdate:function (){
var date = new Date();
return date.getHours();
}
};
}
};
});
myapp.controller("mycont",function($scope,date){
$scope.myrand=date.showdate();
$scope.$digest();
});
});
More Providers
myapp.provider("date",function (){
var greet;
return {
setGreet:function(value){
greet=value;
},
$get:function (){
return {
showdate:function (){
return greet+" it is "+date.getHours()+":"+date.getMinutes();
},
devshowdate:function (){
return date.getHours();
}
};
}
};
});
myapp.config(function(dateProvider){
var time= dateProvider.$get().devshowdate();
if(time>0&&time<12){
dateProvider.setGreet("Good Morning!");
} else if(time>12&&time<17){
dateProvider.setGreet("Good AfterNoon!");
} else if(time>17&&time<19){
dateProvider.setGreet("Good Evening!");
} else{
dateProvider.setGreet("Good Night!");
}
});
myapp.controller("mycont",function($scope,date){
$scope.myrand=date.showdate();
$scope.$digest();
});
});
NG_SHOW
<h1>{{myrand}}</h1>
<button type="button" id="genbut">generate</button>
<h3 ng-show="myrand==23">This is 23</h3>
<h3 ng-show="myrand!=23">This is not 23</h3>
</div>
</body>

Learn Angular Js Simple

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learn Angular Js Simple

Uploaded by

Copyright:

Available Formats

Filters

Login app part 1:

var myapp=angular.module("myroutepp",['ngRoute']); //$routeProvider comes from ngRoute

<input ng-model="globalSearch.name" type="text">

Range Based Loops

You might also like