Filters are used to filter an item from a group of items, which are there in an array or an object array. It selects a subset of the items from an array and returns it as a new array and this item is displayed to user on user interface. Filters format the value of an expression. It can be used in view templates, controller or services.
What is AngularJS Filter?
AngularJS filter is a tool, which we can use to format the data. With this filter, the user can see and modify according to the requirement. It is added in angular to format the data that is being displayed on the view part.
Syntax of Filter
With pipe character (|), we can add filters in angularJS.
Filters can club with the expression as well as a directive.
Syntax:
{{expression| name_of_filter}}
Example: {{name | uppercase}}
Here, a name is the expression and uppercase is the built-in filter provided by angular. It converts the name in uppercase in view part.
Syntax:
1) By applying the Filters to expressions in view templates:
{{expression | filter}}
2) Filters can be applied to the result of another filter. It is called “chaining”:
{{expression | filter1 | filter2 | ...}}
3) Filters may have arguments:
{{expression | filter:argument1:argument2:...}}
When to use a filter in AngularJS?
• When we want to display the data in view part in a particular format in that scenario we can use AngularJS filter.
• We can display the data in the uppercase format, lowercase format etc.
• In whatever format, we entered the text but it can easily get displayed in any format by angular as per the type of filter used.
• AngularJS Filters can change the way of displaying the output.
Types of Built-In Filters in AngularJS
These are the following built-in filters, let’s discuss them one by one:
Uppercase Filter use to convert the string into an uppercase string.
If Uppercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in an uppercase format as an output.
Syntax:
{{expression | uppercase}}
Example:
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js”></script>
</head>
<body ng-app >
<h1>AngularJS Uppercase Filter: </h1>
<div ng-init=“firstName=‘avantika’; lastName=’mahadik’”>
Name in Upper case: {{firstName + ‘ ‘ +lastName | uppercase}} </div>
</body>
</html>
Output:
AngularJS Uppercase Filter:
Name in Upper case: AVANTIKA MAHADIK
Lowercase Filter in AngularJS uses to convert the string into a lowercase string.
If a lowercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in the lowercase format as an output.
Syntax:
{{expression | lowercase}}
Example:
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js”></script>
</head>
<body ng-app >
<h1>AngularJS lowercase Filter: </h1>
<div ng-init=“firstName=‘AVANTIKA’; lastName=’MAHADIK’”>
Name in lower case: {{firstName + ‘ ‘ +lastName | lowercase}} </div>
</body>
</html>
Output:
AngularJS lowercase Filter:
Name in lower case: avantika mahadik
Currency filter is used to convert the number in the specified currency. In case no symbol of currency is specified then by default the symbol for current local is used.
Syntax:
{{expression | currency: ‘currency_symbol’: ‘fraction’}}
Example:
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js”></script>
</head>
<body ng-app >
Enter Amount:<input type=“number” ng-model= “price”><br>
The amount is: {{price | currency:‘Rs’:’2’}}
</body>
</html>
Output:
Enter Amount:
The amount is:
When you enter text in the textbox the output will be
Enter Amount: 8
The amount is: Rs8.00
It is applied only on array elements. A particular element is selected from an array based on certain condition and a new array is created from the existing array.
Syntax:
{{expression | filter: filter_criteria}}
Example:
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body>
<div ng-app=“myApp” ng-controller=”namesCtrl”>
<ol>
<li ng-repeat=“x in names | filter: ‘i’”>
{{x}}
</li>
</ol>
</div>
<script>
angular.module(‘myApp’, []).controller(‘namesCtrl’, function($scope) {
$scope.names = [
‘Avantika’,
‘Sameer’,
‘Ravindro’,
‘Jaya’,
‘Asha’
];
});
</script>
<p>The names containing the letter “i”.</p>
</body>
</html>
Output:
1. Avantika
2. Rabindro
The names containing the letter “i”.
It is used to sort the data either in ascending or in descending order.
Syntax:
{{expression | orderBy: predicate_expression: reverse}}
Ex 1 (ascending)
<html>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div ng-app=“myApp” ng-controller=”orderCtrl”>
<p>The array items are displayed alphabetically.</p>
<ul>
<li ng-repeat=“x in names | orderBy”>{{x}}</li>
</ul>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘orderCtrl’, function($scope) {
$scope.names = [“Avantika”, “Rabindro”, “Sushmit”, “Jayaluxmi”, “Sukanya”, “Sulekha”];
});
</script>
</body>
</html>
Ex 2.
<html>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div ng-app=“myApp” ng-controller=”orderCtrl”>
<p>The array items are displayed alphabetically.</p>
<ul>
<li ng-repeat=“x in names | orderBy: limitTo:1”>{{x}}</li>
</ul>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘orderCtrl’, function($scope) {
$scope.names = [“Avantika”, “Rabindro”, “Sushmit”, “Jayaluxmi”, “Sukanya”, “Sulekha”];
});
</script>
</body>
</html>
AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is ‘MMM d, yyyy’.
Syntax:
{{date | date: format: timezone}}
Parameter Values: The date filter contains format and timezone parameters which is optional.
Some common values used in format are as follow:
‘YYYY’ – define year ex. 2019
‘YY’ – define year ex. 19
‘Y’ – define year ex. 2019
‘MMMM’ – define month ex. April
‘MMM’ – define month ex. Apr
‘MM’ – define month ex. 04
‘dd’ – define day ex. 09
‘d’ – define day ex. 9
‘hh’ – define hour in AM/PM
‘h’ – define hour in AM/PM
‘mm’ – define minute
‘m’ – define minute
‘ss’ – define second
‘s’ – define second
Date.hml
<html>
<head>
<title>Date Filter</title>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”>
</script>
</head>
<body>
<div ng-app=“myApp” ng-controller=”dateCntrl”>
<p>{{today | date: “dd.MM.y”}}</p>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘dateCntrl’, function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
Some predefined values for format are as follow:
“short” – equivalent to “M/d/yy h:mm a”
“medium” – equivalent to “MMM d, y h:mm:ss a”
“shortDate” – equivalent to “M/d/yy” (5/7/19)
“mediumDate” – equivalent to “MMM d, y” (May 7, 2019)
“longDate” – equivalent to “MMMM d, y” (May 7, 2019)
“fullDate” – equivalent to “EEEE, MMMM d, y” (Tuesday, May 7, 2019)
“shortTime” – equivalent to “h:mm a” (2:35 AM)
“mediumTime” – equivalent to “h:mm:ss a” (2:35:05 AM)
Time.html
<html>
<head>
<title>Date Filter</title>
<script src= “https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”>
</script>
</head>
<body>
<div ng-app=“myApp” ng-controller=”dateCntrl”>
<p>{{today| date: ‘mediumTime’}}</p>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘dateCntrl’, function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
It is used to format the data or a numerical value taken as an input. It can add a comma or specified fraction size in it. In case the number expression doesn’t contain valid numeric data in that case number filter display an empty string.
Syntax:
{{number_expression | number:fractionSize}}
Example
<!DOCTYPE html>
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js”></script>
</head>
<body ng-app >
<h1>AngularJS Number Filter Demo: </h1>
Enter Price: <input type=“number” ng-model=”Price” /> <br />
100000 | number = {{100000 | number}} <br />
Price | number = {{Price | number}} <br />
Price | number:3 = {{Price | number:3}} <br />
Price | number = <span ng-bind=“Price | number”></span>
</body>
</html>
Output:
AngularJS Number Filter Demo:
Enter Price:
100 | number =
Price | number =
Price | number:3 =
Price | number =
When you enter a value in the text field then the output will be
AngularJS Number Filter Demo:
Enter Price: 8
100 | number = 100
Price | number = 8
Price | number:3 = 8.000
Price | number = 8
Three types of directives in AngularJs
A) Built- in B) Conditional c) customized
1) ng-app
2) ng-model
3) ng-bind
4) ng-controller
5) ng-init
6) ng-repeat
7) ng-if
8) ng-disabled
9) ng-readonly
10) ng-show
11) ng-hide
12) ng-click
13) ng-switch
14) ng-template
15) customized directives
Following is a list of AngularJS directives:
1) ng-bind.html
<html>
<head>
<title>
AngularJs ng-bind Directive Example
</title>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<script>
var app = angular.module(“myapp”, []);
app.controller(“mycotroller”, function ($scope) {
$scope.name = ““;
});
</script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“mycotroller”>
Enter Name to Display:
<input type=“text” ng-model=”name”><br />you entered: <span ng-bind=”name”></span>
</div>
</body>
</html>
2) ng-if directive
<html>
<head>
<title>
AngularJs ng-if Directive Example
</title>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<script>
var app = angular.module(“myapp”, []);
app.controller(“mycontroller”, function ($scope) {
$scope.values = [‘one’, ‘two’, ‘three’, ‘four’];
$scope.selectval = “one”;
});
</script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“mycontroller”>
Select value: <select ng-model=“selectval” ng-options=”value for value in values”>
</select>
<br /><br />
<div ng-if=“selectval==‘one’” style=”border:1px solid #000; padding:10px; width:20%”>
<b>Show Div If Selected Value One</b>
</div>
</div>
</body>
</html>
3) ng-show/ ng-hide directive
<html>
<head>
<title>
AngularJs ng-show, ng-hide Directive Example
</title>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<script>
var app = angular.module(“myapp”, []);
app.controller(‘showhidectrl’, function ($scope) {
$scope.showval = true;
$scope.hideval = false;
$scope.isShowHide = function (param) {
if (param == “show”) {
$scope.showval = true;
$scope.hideval = true;
}
else if (param == “hide”) {
$scope.showval = false;
$scope.hideval = false;
}
else {
$scope.showval = true;
$scope.hideval = false;
}
}
});
</script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“showhidectrl”>
Click button to Display:
<input type=“button” ng-click=”isShowHide(‘show’)” value=”Show Div”>
<input type=“button” ng-click=”isShowHide(‘hide’)” value=”Hide Div”>
<br />
<!--Show Div Based on showval-->
<div ng-show=“showval”>Show Div: I will Appear on Show Click</div><br />
<!--Hide Div Based on showval-->
<div ng-hide=“hideval”>Hide Div: I will Appear on Hide Click</div>
</div>
</body>
</html>
4) ng-switch
<html>
<head>
<title>
AngularJs ng-switch Directive Example
</title>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“ngswitchctrl”>
Select Item: <select ng-model=“selectval” ng-options=”item for item in items”>
</select>
<div ng-switch =“selectval”>
<div ng-switch-when=“one”><b>DIV1</b>: You Selected value one</div>
<div ng-switch-when=“two”><b>DIV2</b>: You Selected value two</div>
<div ng-switch-when=“three”><b>DIV3</b>: You Selected value three</div>
<div ng-switch-default>You are in default switch case.</div>
</div>
</div>
<script>
var app = angular.module(“myapp”, []);
app.controller(“ngswitchctrl”, function ($scope) {
$scope.items = [‘one’, ‘two’, ‘three’, ‘four’];
$scope.selectval = “one”;
});
</script>
</body>
</html>
5) ng-template
<html>
<!------when we are working wiht ng-template then two important point should keep in mind.
1) it is neccessary to include angular-route.min.js file in script src-->
<!------2nd important point is that we have to write script tag in following ways
<script type=“text/ng-template”>
-->
<head>
<title>
AngularJs ng-template Directive Example
</title>
<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.2.5/angular-route.min.js”></script>
<script >
var app = angular.module(“myapp”, [‘ngRoute’]);
//configuring the route of pages
app.config([‘$routeProvider’,function ($routeProvider) {
$routeProvider.when(‘/home’, {templateUrl: ‘home.html’})
.when(‘/aboutus’, {templateUrl: ‘aboutus.html’})
.when(‘/productlist’, {templateUrl: ‘productlist.html’});
}
]);
// creating controller
app.controller(‘ngtemplatectrl’, function ($scope) {
$scope.text = ‘Hello’;
});
</script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“ngtemplatectrl”>
<script type=“text/ng-template” id=”home.html”>
<h1>This is home page and these are the contents of home.html</h1>
</script>
<script type=“text/ng-template” id=”aboutus.html”>
<h1>This is aboutus page and these are the contents of aboutus.html</h1>
</script>
<script type=“text/ng-template” id=”productlist.html”>
<h1>This is Product list page and these are the contents of productlist.html</h1>
</script>
<a href=“#/home”>Home</a>
<a href=“#/aboutus”>About Us</a>
<a href=“#/productlist”>Product List</a>
<div ng-view>
</div>
</div>
</body>
</html>
6) ng-readonly, ng-disabled
<html>
<head>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body ng-app=““ ng-init=”checked=true” >
Click Me: <input type=“checkbox” ng-model=”checked” /> <br />
<div>
New: <input type=“text” ng-if=”checked” />
</div>
<div>
Read-only: <input type=“text” value=”This is read-only.” ng-readonly=”checked”/>
</div>
<div>
Disabled: <input type=“text” value=”This is disabled.” ng-disabled=”checked” />
</div>
</body>
</html>
We can write directive syntax in many ways
Variation.html
<html>
<head>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body ng-app>
Enter Name: <input type=“text” ng-model=”name” /> <br />
data-ng-bind: <span data-ng-bind=“name”></span><br />
data-ng:bind: <span data-ng:bind=“name”></span><br />
data:ng:bind: <span data:ng:bind=“name”></span><br />
x:ng:bind: <span x:ng:bind=“name”></span><br />
ng:bind: <span ng:bind=“name”></span><br />
x-ng-bind: <span x-ng-bind=“name”></span><br />
x_ng_bind: <span x_ng_bind=“name”></span><br />
ng_bind: <span ng_bind=“name”></span>
</body>
</html>
7) Custmoizeddirective.html
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>
AngularJs Adding Directives to Modules Example
</title>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<script type=“text/javascript”>
var app = angular.module(‘myapp’, []);
app.directive(‘googleDirective’, function () {
return {
template: ‘Welcome to Google.com’
};
});
</script>
</head>
<body>
<div ng-app=“myapp” google-directive></div>
</body>
</html>
8) ng-class
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”>
</script>
<style>
.red{
color: red;
font-size: small;
font-family: Georgia, ‘Times New Roman’, Times, serif;
background-color: seagreen;
}
.yellow
{
color: yellow;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
background-color:maroon
}
</style>
</head>
<body ng-app=““>
Select your color:<select ng-model=“colorvalue”>
<option value=“red”>Red</option>
<option value=“yellow”>Yellow</option>
</select>
<div ng-class=“colorvalue”>
<h1>This is the output according to your selection</h1>
</div>
</body>
</html>
9) ng-show
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body ng-app=““>
show the contents:<input type=“checkbox” ng-model=”value”>
<div ng-show=“value”>
<h1>hello everyone!!!!!!!!!!!!!!!!!!!!!!!!11</h1>
<h2> welcome to the journey of node js and angularjs!!!!!!!!!!!</h2>
</div>
</body>
</html>
10) Ng-hide
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body ng-app=““>
<div ng-hide=“myvalue”>
<p>This is the example of ng-hide directive. you can use this with ng-show.</p>
<p> All the best for your practical</p>
<h1 > you can hide the above contents by checking the checkbox</h1>
<input type= “checkbox” ng-model=”myvalue”>
</div>
</body>
</html>
11) ng-if
<html>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body ng-app=““>
Select: <input type=“checkbox” ng-model=”value” ng-init=”value = false”>
<div ng-if=“value”>
<h1>Good morining all of you!!!!!!!!!!!!!!!!!1!!</h1>
</div>
<p>If checkbox is not checked, the above div elements is removed</p>
<p> if you check the checkbox, the above div elements is not removed</p>
</body>
</html>
Angular Js application mainly rely on controllers to control the flow of data in the application. It is defined using ng-controller directive. A controller is a Javascript object that contains attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that the controller needs to handle.
ng-controller
<html>
<head>
<title>
Program for many controller
</title>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”>
</script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“mycontroller”>
Enteryour msg:<input type=“text” ng-model =”message”></br>
<button ng-click=“showmsg(message)”>click me</button>
</div>
</script>
</head>
<body ng-app=“myapp”>
<div id = “div1” ng-controller=”mycontroller”> message 1:{{message}}</br>
<div id=“div2”>
message 1.1:{{message}}
</div>
</div>
<div id= “div3”> message 2: {{
<div id= “div3”>
message 2: {{message}}
</div>
<div id=“div4” ng-controller=”anothercontroller”> message 3: {{message}}
</div>
<script>
var app = angular.module(‘myapp’,[]); app.controller(‘mycontroller’, function($scope){
$scope.message= “this is my my controller”;
});
app.controller(‘anothercontroller’, function($scope){
$scope.message=“this is my anothercotroller”;
});
</script>
</body>
</html>
Output:
Passing parameter
<html>
<head>
<title>AngualrJS Controller</title>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body>
<h2>Attach functions or behavior with arguments - AngularJS</h2>
<div ng-app=“app” ng-controller=”myController”> Click
<button ng-click=“Preference(‘English’)”>English</button>
<button ng-click=“Preference(‘Hindi’)”>Hindi</button>
<button ng-click=“Preference(‘Spanish’)”>Spanish</button>
<button ng-click=“Preference(‘English’)”>English</button>
<button ng-click=“Preference(‘Hindi’)”>Hindi</button>
<button ng-click=“Preference(‘Spanish’)”>Spanish</button>
<button ng-click=“Preference1(‘French’,’and Hindi language also.’)”>French</button>
<p>I like {{Language}} language {{Language1}} </p>
</div>
<script>
var app = angular.module(‘app’, []); app.controller(‘myController’, [‘$scope’, function($scope) {
$scope.Language = ‘Hindi’;
$scope.Preference = function(lang) {
$scope.Language = lang;
};
$scope.Preference1 = function(lang, lang1) {
$scope.Language = lang;
$scope.Language1 = lang1;
};
}]);
</script>
</body>
</html>
Output:
• controller in object
<head>
<title>
Program for many controller
</title>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”>
</script>
</head>
<body ng-app=“myapp”>
<h2> customer information</h2>
<div ng-controller=“mycontroller”>First name:{{customer.firstname}}</br> Last name:{{customer.lastname}}
</div>
<script>
var app= angular.module(‘myapp’,[]); app.controller(“mycontroller”,function($scope){
$scope.customer={firstname:‘urvashi’, lastname:’satra’};
});
</script>
</body>
</html>
Output:
• click event
<html>
<! understanding controller by click event-->
<head>
<title>Angulasjs Controller
</title>
<script src=“angular-min.js”></script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“mycontroller”>
Enter Message:<input type=“text” ng-model=”message”>
<button ng-click=“showmsg(message)”>Click Me!!</button>
</div>
<script>
var app= angular.module(‘myapp’,[]); app.controller(‘mycontroller’,function($scope){
$scope.message=““;
$scope.showmsg=function(message){alert(message);
};
})
</script>
</body>
</html>
Output:
• array
<html>
<head>
<title></title>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”>
</script>
<script>
var app= angular.module(“myapp”, []); app.controller(“customerctrl”, function($scope){
$scope.myarraybalances=[95000,8500,2500,6500];
});
</script>
</head>
<body ng-app=“myapp”>
<h1> customer balance list</h1>
<div ng-controller=“customerctrl”>
<h3 ng-repeat=“record in myarraybalances”> customer {{$index+1}}: {{record}}
</h1>
</div>
</body>
</html>
Output:
Form and controls provide validation services, so that the user can be notified of invalid input before submitting a form. This provides a better user experience than server-side validation alone because the user gets instant feedback on how to correct the error. Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus cannot be trusted. Server-side validation is still necessary for a secure application.
Code:
<html>
<head>
<title>AngularJs Form</title>
<script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<script type=“text/javascript”>
var app = angular.module(‘formApp’, []); app.controller(‘formCtrl’, function ($scope) {
$scope.sendForm = function () {
$scope.msg = “Form Submitted Successfully”;
};
});
</script>
</head>
<body>
<div ng-app=“formApp” ng-controller=”formCtrl”>
<form name=“personForm” ng-submit=”sendForm()”>
First Name:<input type=“text” name=”firstname” ng-model=”person.fname” required />
<span ng-show=“personForm.firstname.$error.required”>Required!</span> <br /><br /> Last Name:<input type=”text” name=”lastname” ng-model=”person.lname” required />
<span ng-show=“personForm.lastname.$error.required”> Required! </span> <br /><br />
<! using radio buttons-->
Pick a topic:
<input type=“radio” ng-model=”myVar” value=”MCA”>MCA
<input type=“radio” ng-model=”myVar” value=” MBA”>MBA
<input type=“radio” ng-model=”myVar” value=” MMS”>MMS
<!--using select option--> Select a City:
<select ng-model=“myVal” >
<option value=““>
<option value=“Mumbai”>Mumbai
<option value=“Pune”>Pune
<option value=“Nashik”>Nashik
</select>
<button type=“submit”>Submit Form</button><br /><br />
<!---message on the same page-->
<span ng-bind=“person.fname”></span>
<span ng-bind=“person.lname”></span>
<span>{{msg}}</span>
</form>
</div>
</body>
</html>
Output:
SPA is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.
Code:
Index.html
<html ng-app=“myApp”>
<head>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular- route.min.js”></script>
</head>
<body>
<script type=“text/ng-template” id=”SPA/home.html”>
<h1>Home</h1>
<h3>{{message}}</h3>
</script>
<script type=“text/ng-template” id=”SPA/blog.html”>
<h1>Blog</h1>
<h3>{{message}}</h3>
</script>
<script type=“text/ng-template” id=”SPA/about.html”>
<h1>about</h1>
<h3>{{message}}</h3>
</script>
<a href=“#/”>Home</a>
<a href=“#/blog”>Blog</a>
<a href=“#/about”>About</a>
<div ng-view></div>
<script src=“app.js”></script>
</body>
</html>
App.js
var app = angular.module(‘myApp’, [‘ngRoute’]);
//configuration code
app.config(function($routeProvider) {
$routeProvider
.when(‘/’, {
templateUrl: ‘SPA/home.html’, controller: ‘HomeController’
})
.when(‘/blog’, {
templateUrl: ‘SPA/blog.html’,
controller: ‘BlogController’
})
.when(‘/about’, {
templateUrl: ‘SPA/about.html’, controller: ‘AboutController’
})
.otherwise({redirectTo: ‘/’});
});
// this is controller code
app.controller(‘HomeController’, function($scope) {
$scope.message = ‘Hello from HomeController’;
});
app.controller(‘BlogController’, function($scope) {
$scope.message = ‘Hello from BlogController’;
});
app.controller(‘AboutController’, function($scope) {
$scope.message = ‘Hello from AboutController’;
});
Output:
Tweets
Web Technology with Node js, Angular js and MySQL
Twitter
Facebook
WhatsApp
LinkedIn
