- static method
- instance method
- abstract method
- concrete method
- final method
Blog
Facebook Promotion
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>