First, solve the problem. Then, write the code.: June 2017

Thursday 22 June 2017

IntelliSense for angular in visual studio

There 3 simple steps to get better IntelliSense for angular in visual studio

Step 1: Download AngularJS extension for Visual Studio from the following link. The link displays the script in a web page.

https://raw.githubusercontent.com/jmbledsoe...

Step 2: Copy and paste the script into a new notepad. Name it angular.intellisense.js and save it to the following folder on your computer
C:\Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References
Step 3 : Now drag and drop the following 2 files from Scripts folder onto script.js file
angular.min.js
angular-route.min.js

Visual Studio will automatically add references to the above 2 files in script.js
/// [reference path="angular.min.js" /]
/// [reference path="angular-route.min.js" /]

like this:

/// <reference path="angular.js" />
/// <reference path="angular-route.js" />

var app = angular.module("demo", ["ngRoute"])

routing in angular js

Routing in Angular js and remove # in URL

Main.js:

var app = angular
.module("demo", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {

$routeProvider
.when("/home", {
templateUrl: "UI/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "UI/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "UI/students.html",
controller: "studentsController"
})
.when("/students/:id", { 
templateUrl: "/UI/studentsdetails.html",
controller: "studentsdetailsController"
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.message = "courses Page";
})
.controller("studentsController", function ($scope) {
$scope.message = "Student Page";
})
.controller("studentsdetailsController", function ($scope, $routeParams) {
$scope.message = "Student details Page" + $routeParams.id; 
}

Index.html :

<!DOCTYPE html>
<html ng-app="demo">
<head>
<title></title>
<meta charset="utf-8" />
<base href="/" /> 
<script src="RoutingApp/angular.js"></script>
<script src="RoutingApp/angular-route.js"></script>
<script src="RoutingApp/main.js"></script>
<link href="RoutingApp/Styles.css" rel="stylesheet" />

</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
<a href="home">Home</a>
<a href="courses">Courses</a>
<a href="students">Students</a>
<a href="students/1">Students using param</a> 
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>

</html>

Partial HTML Pages:

home.html:

<h1>{{message}}</h1>

courses.html:

<h1>{{message}}</h1>

studentsdetails.html:

<h1>{{message}}</h1>

student.html:

<h1>{{message}}</h1>
Write a rules in Web config:

<system.webServer>

<rewrite>
<rules>
<rule name="RewriteRules" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>

</system.webServer>

Wednesday 21 June 2017

Hide and show table column in Angular js

Will discuss ng-hide and ng-show directives in Angular:

Controler:

var app = angular

.module("myModule", [])

.controller("myController", function ($scope) {

var employees = [

{ name: "Ben", gender: "Male", city: "London", salary: 55000 },

{ name: "Sara", gender: "Female", city: "Chennai", salary: 68000 },

{ name: "Mark", gender: "Male", city: "Chicago", salary: 57000 },

{ name: "Pam", gender: "Female", city: "London", salary: 53000 },

{ name: "Todd", gender: "Male", city: "Chennai", salary: 60000 }

];

$scope.employees = employees;

});

Html:

<!DOCTYPE html>

<head>

</head>

<input type="checkbox" ng-model="hideSalary" />Hide Salary

<table>

<thead>

<tr>

<th>Gender</th>

<th ng-hide="hideSalary">Salary</th>

</tr>

</thead>

<tbody>

<td> {{ employee.name }} </td>

<td> {{ employee.gender}} </td>

<td> {{ employee.city}} </td>

<td ng-hide="hideSalary"> {{ employee.salary }} </td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

If you need to masks (####) and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox

<head>

</head>

<input type="checkbox" ng-model="hideSalary" />Hide Salary

<table>

<thead>

<tr>

<th>Gender</th>

<th ng-hide="hideSalary">Salary</th>

<th ng-show="hideSalary">Salary</th>

</tr>

</thead>

<tbody>

<td> {{ employee.name }} </td>

<td> {{ employee.gender}} </td>

<td> {{ employee.city}} </td>

<td ng-hide="hideSalary"> {{ employee.salary }} </td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

how to create a custom filter in Angular

We use the custom gender filter like any other angular built-in filter with a pipe character:

In this custom filter that converts integer values 1, 2, 3 to Male, Female and Not disclosed respectively. gender is the name of the filter.

Controler:

var app = angular
.module("myModule", [])
.filter("gender", function () {
return function (gender) {
switch (gender) {
case 1:
return "Male";
case 2:
return "Female";
case 3:
return "Not disclosed";
}
}
})
.controller("myController", function ($scope) {

var employees = [
{ name: "Ben", gender: 1, salary: 55000 },
{ name: "Sara", gender: 2, salary: 68000 },
{ name: "Mark", gender: 1, salary: 57000 },
{ name: "Pam", gender: 2, salary: 53000 },
{ name: "Todd", gender: 3, salary: 60000 }
];

$scope.employees = employees;
});

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender | gender}} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

single textbox search multiple column like- name and city in angular,

Single textbox search multiple properties - name and city.

ControlerScript.js :

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {

var employees = [
{ name: "Ben", gender: "Male", salary: 55000, city: "London" },
{ name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark", gender: "Male", salary: 57000, city: "London" },
{ name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
{ name: "Todd", gender: "Male", salary: 60000, city: "London" },
];

$scope.employees = employees;

$scope.search = function (item) {
if ($scope.searchText == undefined) {
return true;
}
else {
if (item.city.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
}

return false;
};
});

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Search : <input type="text" placeholder="Search city & name"
ng-model="searchText" />
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter: search">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Styles.css

body {
font-family: Arial;
}

table {
border-collapse: collapse;
}

td {
border: 1px solid black;
padding: 5px;
}

th {
border: 1px solid black;
padding: 5px;
text-align: left;

}

search filter by multiple column in AngularJS.

how to search filter by multiple properties in AngularJS. :

Controler Script.js :

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {

var employees = [
{ name: "Ben", gender: "Male", salary: 55000, city: "London" },
{ name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark", gender: "Male", salary: 57000, city: "London" },
{ name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
{ name: "Todd", gender: "Male", salary: 60000, city: "London" },
];

$scope.employees = employees;
});

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
<input type="checkbox" ng-model="exactMatch" /> Exact Match
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter: searchText : exactMatch">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Styles.css

body {
font-family: Arial;
}

table {
border-collapse: collapse;
}

td {
border: 1px solid black;
padding: 5px;
}

th {
border: 1px solid black;
padding: 5px;
text-align: left;

}

Implement search filter in angular

how to implement search in Angular using search filter.

As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed.
Controller:

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {

var employees = [
{ name: "Ben", gender: "Male", salary: 55000, city: "London" },
{ name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark", gender: "Male", salary: 57000, city: "London" },
{ name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
{ name: "Todd", gender: "Male", salary: 60000, city: "London" },
];

$scope.employees = employees;
});

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Search : <input type="text" placeholder="Search employees"
ng-model="searchText" />
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Styles.css :

body {
font-family: Arial;
}

table {
border-collapse: collapse;
}

td {
border: 1px solid black;
padding: 5px;
}

th {
border: 1px solid black;
padding: 5px;
text-align: left;
}

At the moment, the search is being done across all columns. If you want to search only one specific column, then change ng-model directive value on the search textbox as shown below. With this change only city column is searched.

<input type="text" ng-model="searchText.city" placeholder="Search employees" />

Filter ( lowercase,uppercase,number Formats,currency and date )components in angulajs

All Angular filter format documentation

https://docs.angularjs.org/api/ng/filter

Filters in angular can do 3 different things
Format data
Sort data
Filter data

Filters can be used with a binding expression or a directive

To apply a filter use pipe (|) character

Syntax : {{ expression | filterName:parameter }}

Angular filters for formatting data
lowercase - Formats all characters to lowercase
uppercase - Formats all characters to uppercase
number - Formats a number as text. Includes comma as thousands separator and the number of decimal places can be specified
currency - Formats a number as a currency. $ is default. Custom currency and decimal places can be specified
date - Formats date to a string based on the requested format

Component :

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {

var employees = [
{
name: "Ben", dateOfBirth: new Date("November 23, 1980"),
gender: "Male", salary: 55000.788
},
{
name: "Sara", dateOfBirth: new Date("May 05, 1970"),
gender: "Female", salary: 68000
},
{
name: "Mark", dateOfBirth: new Date("August 15, 1974"),
gender: "Male", salary: 57000
},
{
name: "Pam", dateOfBirth: new Date("October 27, 1979"),
gender: "Female", salary: 53000
},
{
name: "Todd", dateOfBirth: new Date("December 30, 1983"),
gender: "Male", salary: 60000
}
];

$scope.employees = employees;
$scope.rowCount = 3;
});

HtmlPage1.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Rows to display : <input type="number" step="1"
ng-model="rowCount" max="5" min="0" />
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Gender</th>
<th>Salary (number filter)</th>
<th>Salary (currency filter)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | limitTo:rowCount">
<td> {{ employee.name | uppercase }} </td>
<td> {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary | number:2 }} </td>
<td> {{ employee.salary | currency : "£" : 1 }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Styles.css

body {
font-family: Arial;
}

table {
border-collapse: collapse;
}

td {
border: 1px solid black;
padding: 5px;
}

th {
border: 1px solid black;
padding: 5px;
text-align: left;
}

Apply sorting on table column name in angularjs

AngularJS sort rows by table header

Here is what we want to do
1. The data should be sorted when the table column header is clicked
2. The user should be able to sort in both the directions - ascending and descending. Clicking on the column for the first time should sort the data in ascending order. Clicking on the same column again should sort in descending order.
3. An icon should be displayed next to the column showing the sort column and direction

Script.js : The controller function in the script does the following
Sets up the model sortColumn and reverseSort properties are attached to the $scope object. These 2 properties are used to control the column by which the data should be sorted and the sort direction.
sortColumn is set to name and reverseSort is set to false. This will ensure that when the form is initially loaded, the table data will be sorted by name column in ascending order.Depending on the column header the user has clicked, sortData() function sets the sortColumn and reverseSort property values.
Based on the sort column and the sort direction, getSortClass() function returns the CSS class name to return. The CSS class controls the sort icon that will be displayed next to the sort column.

Controller:

var app = angular

.module("myModule", [])

.controller("myController", function ($scope)

{

var employees = [

{ name: "Ben", dateOfBirth: new Date("November 23, 1980"), gender: "Male", salary: 55000 }, { name: "Sara", dateOfBirth: new Date("May 05, 1970"), gender: "Female", salary: 68000 },

{ name: "Mark", dateOfBirth: new Date("August 15, 1974"), gender: "Male", salary: 57000 },

{ name: "Pam", dateOfBirth: new Date("October 27, 1979"), gender: "Female", salary: 53000 }, { name: "Todd", dateOfBirth: new Date("December 30, 1983"), gender: "Male", salary: 60000 } ];

$scope.employees = employees;

$scope.sortColumn = "name";

$scope.reverseSort = false;

$scope.sortData = function (column)

{

$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false; $scope.sortColumn = column;

}

$scope.getSortClass = function (column)

{

if ($scope.sortColumn == column) { return $scope.reverseSort ? 'arrow-down' : 'arrow-up'; } return '';

}

});

HtmlPage1.html : sortData() function is called when any table header is clicked, passing the name of the column by which the data should be sorted. The div element's, ng-class directive calls getSortClass() function, which returns the CSS class to be applied. The CSS displays the UP or DOWN arrow depending on the sort direction. Finally, with the orderBy filter sortColumn and reverseSort properties of the $scope object are used to control the column by which the data should be sorted and the sort direction.

Html:

<table>

<thead>

<tr>

<th ng-click="sortData('dateOfBirth')"> Date of Birth <div

ng-class="getSortClass('dateOfBirth')"></div>

</th> <th ng-click="sortData('gender')"> Gender <div ng-class="getSortClass('gender')"></div> </th> <th ng-click="sortData('salary')"> Salary <div ng-class="getSortClass('salary')"></div> </th>

</tr>

</thead>

<tbody>

<td> {{ employee.name }} </td>

<td> {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} </td>

<td> {{ employee.gender }} </td>

<td> {{ employee.salary }} </td>

</tr>

</tbody>

</table>

</div>
</body>
</html>

CSS:

body {

font-family: Arial;

}

table {

border-collapse: collapse;

}

td {

border: 1px solid black;

padding: 5px;

}

th {

border: 1px solid black;

padding: 5px;

text-align: left;

/*cursor property displays hand symbol

when hovered over the th element*/

cursor: pointer;

}

/*This class displays the UP arrow*/

.arrow-up {

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 10px solid black;

display:inline-block;

}

/*This class displays the DOWN arrow*/

.arrow-down {

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-top: 10px solid black;

display:inline-block;

}

link:
http://csharp-video-tutorials.blogspot.in/2015/11/angularjs-sort-rows-by-table-header.html