Author: admin
Filters
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>Filters (uppercase, lowercase, currency, filter, Custom filter)</h2>
<fieldset>
<legend>
Uppercase
</legend>
<div ng-init='name = {"first_name":"Shailesh"}'>
{{name.first_name| uppercase}}
</div>
</fieldset>
<fieldset>
<legend>
Lowercase
</legend>
<div ng-init='month = {"first":"january"}'>
{{month.first| lowercase}}
</div>
</fieldset>
<fieldset>
<legend>
Currency
</legend>
<div ng-init='currency = {"inr": 20000, "usd":30000, "euro": 25000}'>
<!-- {{ currency_expression | currency : symbol : fractionSize}} -->
{{currency.inr| currency : ' ₹' : 3}} <br/>
{{currency.usd| currency}} <br/>
{{currency.euro| currency : '€'}}
</div>
</fieldset>
<fieldset>
<legend>
Single Filter
</legend>
<div ng-init='city = ["Mumbai", "Pune", "Nagpur"]'>
<table border="1">
<ul>
<li ng-repeat="x in city">
{{x}}
</li>
</ul>
</table>
</div>
</fieldset>
<fieldset>
<legend>
Multiple Filter
</legend>
<div>
Search by any <input type="text" name="" ng-model="search.$"/> <br/>
Search by Name <input type="text" name="" ng-model="search.name"/> <br/>
Search Country <input type="text" name="" ng-model="search.country"/> <br/>
<table border="1">
<tr ng-repeat="x in emp_records| filter:search">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
</fieldset>
<fieldset>
<legend>
Multiple Filter Skip Few
</legend>
<div>
Search by Name or Country Only <input type="text" name="" ng-model="query"/> <br/>
<table border="1">
<tr ng-repeat="x in emp_records| filter:search2">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.emp_records = [
{name: 'Jani', country: 'Norway', 'age': 20},
{name: 'Carl', country: 'Sweden', 'age': 21},
{name: 'Margareth', country: 'England', 'age': 22},
{name: 'Hege', country: 'Norway', 'age': 23},
{name: 'Joe', country: 'Denmark', 'age': 24},
{name: 'Gustav', country: 'Sweden', 'age': 25},
{name: 'Birgit', country: 'Denmark', 'age': 26},
{name: 'Mary', country: 'England', 'age': 27},
{name: 'Kai', country: 'Norway', 'age': 28}
];
$scope.search2 = function (row) {
return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
angular.lowercase(row.country).indexOf(angular.lowercase($scope.query) || '') !== -1);
};
});
</script>
</html>
ng-repeat
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>ng-repeat</h2>
<fieldset>
<legend>
List
</legend>
<div ng-init='name = ["Shailesh", "Mahesh", "Shilpa"]'>
<ul>
<li ng-repeat="x in name">{{x}}</li>
</ul>
</div>
</fieldset>
<fieldset>
<legend>
Table
</legend>
<div ng-init='months = ["Jan", "Feb", "Mar"]'>
<table border="1">
<tr ng-repeat="x in months">
<td>{{x}}</td>
</tr>
</table>
</div>
</fieldset>
<fieldset>
<legend>
Select
</legend>
<div ng-init='cities = [{"id":"1", "value":"Mumbai"}, {"id":"2", "value":"Pune"}, {"id":"3", "value":"Nagpur"}]'>
<select>
<option ng-repeat="x in cities" value="{{x.id}}">{{x.value}}</option>
</select>
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
</script>
</html>
Working with JSON
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>JSON</h2>
<fieldset>
<legend>
String
</legend>
<div ng-init='name = {"first_name":"Shailesh", "last_name" : "Sonare"}'>
{{name.first_name}} <br/>
{{name.last_name}}
</div>
</fieldset>
<fieldset>
<legend>
Numbers
</legend>
<div ng-init='months = {"jan": 1, "feb" : 2}'>
{{months.jan}} <br/>
{{months.feb}}
</div>
</fieldset>
<fieldset>
<legend>
Objecs
</legend>
<div ng-init='result = {employee:{"name": "Shailesh", "age" : 28}}'>
{{result.employee.name}} <br/>
{{result.employee.age}}
</div>
</fieldset>
<fieldset>
<legend>
Array
</legend>
<div ng-init='result = {employee:[{"name": "Shailesh", "age" : 28},{"name": "Mahesh", "age" : 26}]}'>
{{result.employee[0].name}} <br/>
{{result.employee[1].age}}
</div>
<div ng-init='result2 = {months:["Jan","Feb"]}'>
{{result2.months[0]}} <br/>
{{result2.months[1]}}
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
</script>
</html>
Routing without hashtag
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<base href="/">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body ng-app="myApp">
<aside>
<a href="testlab/angular/sample/26_routing_without_hashing.html">Home</a>
<a href="red">Red</a>
<a href="green">Green</a>
<a href="blue">Blue</a>
<a href="default">Default</a>
</aside>
<section ng-view></section>
</body>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/red", {
template: "<h2 style='color:red;'>Red Color</h2>"
/*
templateUrl : "red.html",
controller : "myCtrl"
*/
})
.when("/green", {
template: "<h2 style='color:green;'>Green Color</h2>"
})
.when("/blue", {
template: "<h2 style='color:blue;'>Blue Color</h2>"
})
.otherwise({
template: "<h2>Default Black Color</h2>"
});
$locationProvider.html5Mode(true);
});
</script>
</html>
Routing
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body ng-app="myApp">
<aside>
<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>
<a href="#default">Default</a>
</aside>
<section ng-view></section>
</body>
<script>
var app = angular.module("myApp", ["ngRoute"]); // where ngRoute is a dependent module
app.config(function ($routeProvider) {
$routeProvider
.when("/red", {
template: "<h2 style='color:red;'>Red Color</h2>"
})
.when("/green", {
template: "<h2 style='color:green;'>Green Color</h2>"
})
.when("/blue", {
template: "<h2 style='color:blue;'>Blue Color</h2>"
})
.otherwise({
template: "<h2>Default Black Color</h2>"
});
});
</script>
</html>
Services
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>Scope</h2>
<fieldset>
<legend>
Location
</legend>
<div>
Absolute URL {{current_url}} <br/>
Protocol {{protocol}} <br/>
Port {{port}} <br/>
Host {{host}} <br/>
</div>
</fieldset>
<fieldset>
<legend>
Timeout
</legend>
<div>
{{greeting}}
</div>
</fieldset>
<fieldset>
<legend>
Time Interval
</legend>
<div>
{{counter}}
</div>
</fieldset>
<fieldset>
<legend>
Custom Service
</legend>
<div>
Square of 5 is {{square}} <br/>
Cube of 5 is {{cube}} <br/>
</div>
</fieldset>
<fieldset>
<legend>
HTTP Service
</legend>
<div>
{{ajax_response}}
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.service('square_cube', function () {
this.square = function (x) {
return x * x;
}
this.cube = function (x) {
return x * x * x;
}
});
app.controller("myCtrl", function ($scope, $location, $timeout, $interval, square_cube, $http) {
$scope.current_url = $location.absUrl();
$scope.protocol = $location.protocol();
$scope.port = $location.port();
$scope.host = $location.host();
$timeout(function () {
$scope.greeting = "Hello India"
}, 5000);
$scope.counter = 0;
$interval(function () {
$scope.counter = $scope.counter + 1;
}, 1000);
$scope.square = square_cube.square(5);
$scope.cube = square_cube.cube(5);
$http.get('ajax_response.html').then(function (response) {
$scope.ajax_response = response.data[1].name;
});
});
</script>
</html>
Scope
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h2>Scope</h2>
<fieldset>
<legend>
Circle
</legend>
<div ng-controller="Circle">
Radius = {{radius}} <br/>
Diameter = {{diameter}} <br/>
Area = {{area}} <br/>
Circumference = {{circumference| number:2}} <br/>
</div>
{{globalMessage}}
</fieldset>
<fieldset>
<legend>
Root Scope
</legend>
<div>
{{globalMessage}}
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.run(function ($rootScope) {
$rootScope.globalMessage = "I am from root Scope available throughout the module";
});
app.controller("Circle", function ($scope) {
$scope.radius = 5;
$scope.diameter = $scope.radius * 2;
$scope.area = 3.14 * $scope.radius * $scope.radius;
$scope.circumference = 2 * 3.14 * $scope.radius;
});
</script>
</html>
Controller
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h2>Controller</h2>
<fieldset>
<legend>
Circle
</legend>
<div ng-controller="Circle">
Radius = {{radius}} <br/>
Diameter = {{diameter}} <br/>
Area = {{area}} <br/>
Circumference = {{circumference| number:2}} <br/>
</div>
</fieldset>
<fieldset>
<legend>
Rectangle
</legend>
<div ng-controller="Rectangle">
Length = {{length}} <br/>
Breadth = {{breadth}} <br/>
Area = {{area}} <br/>
Circumference = {{circumference| number:2}} <br/>
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("Circle", function ($scope) {
$scope.radius = 5;
$scope.diameter = $scope.radius * 2;
$scope.area = 3.14 * $scope.radius * $scope.radius;
$scope.circumference = 2 * 3.14 * $scope.radius;
});
app.controller("Rectangle", function ($scope) {
$scope.length = 5;
$scope.breadth = 6;
$scope.area = $scope.length * $scope.breadth;
$scope.circumference = 2 * $scope.length * $scope.breadth;
});
</script>
</html>
Modules
<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<fieldset>
<legend>
Modules
</legend>
<div>
Radius = {{radius}} <br/>
Diameter = {{diameter}} <br/>
Area = {{area}} <br/>
Circumference = {{circumference| number:2}} <br/>
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.radius = 5;
$scope.diameter = $scope.radius * 2;
$scope.area = 3.14 * $scope.radius * $scope.radius;
$scope.circumference = 2 * 3.14 * $scope.radius;
});
</script>
</html>