Vikram Naidu

Saturday, April 7, 2018

AngularJS 1.6 routing

Hi all,

Please find below a link to download and practice SPA in angular 1.6.

https://drive.google.com/open?id=1p0UEWVKMmmmixdGn3sEBGygJGYsidkEB

Please follow below steps to execute application
STEP 1: DOWNLOAD AND EXTRACT FROM PROJECT.
STEP 2: OPEN COMMAND AND EXECUTE FOLLOWING COMMANDS.

npm install angula angular-route jquery
npm install gulp -g
npm install gulp gulp-rename gulp-concat gulp-uglify

STEP 3: DONWLOAD SERVER MEAN PROGRAM from below.

http://trainervikram.blogspot.in/2016/11/ajax-examplejavascript-jquery-angularjs_4.html

STEP 4: EXTRACT ABOVE PROJECT AND DO FOLLWING

npm install
npm start

STEP 5: IN CLIENT PROGRAM USE FOLLOWING COMMAND TO START SERVER

npm install http-server -g
http-server ./ -c-1

Thanks & regards,

Vikram Y.

Tuesday, February 13, 2018

map & area tag example

Please find below link to download example.

SOURCE CODE

Thanks & regards,

Vikram Y.

Saturday, November 25, 2017

SPA Using angular-route.js & angular-ui-route.js

Hi All,

Please donwload below link to get the SPA examples. Use below command to donwload dependencies:

npm install angular angular-router angular-ui-router

SPA Using angular-route.js & angular-ui-route.js

Thanks & regards,

Vikram Y.

Monday, November 20, 2017

EXPRESSIONS & FILTERS

EXPRESSION & FILTERS EXAMPLE
<html ng-app="myApp">
<body ng-controller="myCtrl">
<table border=1>
<caption>STUDENT DETAILS</caption>
<tr>
<td>FIRST NAME</td>
<td>{{student.fn | uppercase}}</td>
</tr>
<tr>
<td>LAST NAME</td>
<td>{{student.ln | lowercase}}</td>
</tr>
<tr>
<td>ROLL NO</td>
<td>{{student.rn}}</td>
</tr>
<tr>
<td>FULL NAME</td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>FEES</td>
<td>{{student.qty * student.price | currency: "₹"}}</td>
</tr>
<tr>
<th colspan=2>STATE DETAILS</th>
</tr>
<tr>
<th colspan=2><input placeholder="Enter state filter text" ng-model="stateFilter"/></th>
</tr>
<tr>
<th>STATE CODE</th>
<th>STATE NAME</th>
</tr>
<tr ng-repeat="s in student.states | filter: stateFilter | orderBy:'-key' | limitTo: 5">
<td>{{s.key}}</td>
<td>{{s.name}}</td>
</tr>
</table>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("myApp", [])
.controller("myCtrl", function($scope){
$scope.student = {
fn: "Naresh",
ln: "Student",
rn: 1001,
fullName: function(){
return this.fn + " " + this.ln;
},
qty: 16,
price: 172549.50,
states: [{"key":"AN","name":"Andaman and Nicobar Islands"},{"key":"AP","name":"Andhra Pradesh"},{"key":"AR","name":"Arunachal Pradesh"},{"key":"AS","name":"Assam"},{"key":"BR","name":"Bihar"},{"key":"CG","name":"Chandigarh"},{"key":"CH","name":"Chhattisgarh"},{"key":"DH","name":"Dadra and Nagar Haveli"},{"key":"DD","name":"Daman and Diu"},{"key":"DL","name":"Delhi"},{"key":"GA","name":"Goa"},{"key":"GJ","name":"Gujarat"},{"key":"HR","name":"Haryana"},{"key":"HP","name":"Himachal Pradesh"},{"key":"JK","name":"Jammu and Kashmir"},{"key":"JH","name":"Jharkhand"},{"key":"KA","name":"Karnataka"},{"key":"KL","name":"Kerala"},{"key":"LD","name":"Lakshadweep"},{"key":"MP","name":"Madhya Pradesh"},{"key":"MH","name":"Maharashtra"},{"key":"MN","name":"Manipur"},{"key":"ML","name":"Meghalaya"},{"key":"MZ","name":"Mizoram"},{"key":"NL","name":"Nagaland"},{"key":"OR","name":"Odisha"},{"key":"PY","name":"Puducherry"},{"key":"PB","name":"Punjab"},{"key":"RJ","name":"Rajasthan"},{"key":"SK","name":"Sikkim"},{"key":"TN","name":"Tamil Nadu"},{"key":"TS","name":"Telangana"},{"key":"TR","name":"Tripura"},{"key":"UK","name":"Uttar Pradesh"},{"key":"UP","name":"Uttarakhand"},{"key":"WB","name":"West Bengal"}]
};
});
</script>
</body>

</html>

CUSTOM FILTERS IN ANGULARJS
<html ng-app="myApp">
<body>
ENTER NUMBER: <input ng-model="no"/><br>
VIEW ORDINAL NO: {{no | ordinal}}
<script src="node_modules/angular/angular.js"></script>
<script>
function ordinal(no){
if(!no || isNaN(no))
return "";
if(parseInt(no)>10 && parseInt(no)<=20){
return no+"th";
}
var lastDigit = no % 10;
var ordinalNo = no;
if(lastDigit == 1){
ordinalNo += 'st';
}
else if(lastDigit == 2){
ordinalNo += 'nd';
}
else if(lastDigit == 3){
ordinalNo += 'rd';
}
else{
ordinalNo += 'th';
}
return ordinalNo;
};
angular.module("myApp", [])
.filter("ordinal", function(){
return ordinal;
});
</script>
</body>

</html>

Saturday, November 18, 2017

SHARING DATA BETWEEN CONTROLLERS USING $scope

1) Use $parent while binding premetive model object

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1">
CTRL1 MSG: <input ng-model="msg"/>
<div ng-controller="ctrl2">
CTRL2 MSG: <input ng-model="$parent.msg"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="$parent.$parent.msg"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function($scope){
$scope.msg = "This is ctrl1 msg object.";
})
.controller("ctrl2", function($scope){})
.controller("ctrl3", function($scope){})
</script>
</body>

</html>

2) Use alias for controller bindings

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1 as c1">
CTRL1 MSG: <input ng-model="c1.msg"/>
<div ng-controller="ctrl2 as c2">
CTRL2 MSG: <input ng-model="c1.msg"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="c1.msg"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function(){
this.msg = "This is ctrl1 msg object.";
})
.controller("ctrl2", function($scope){
$scope.c1.msg = "Updated in ctrl2";
})
.controller("ctrl3", function($scope){})
</script>
</body>

</html>

3) Use json denfinition while defining models

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1">
CTRL1 MSG: <input ng-model="user.msg"/>
<div ng-controller="ctrl2">
CTRL2 MSG: <input ng-model="user.msg"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="user.msg"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function($scope){
$scope.user = {
msg: "This is ctrl1 msg object."
};
})
.controller("ctrl2", function($scope){
})
.controller("ctrl3", function($scope){})
</script>
</body>

</html>

4) $scope METHODS

<html ng-app="nestingApp">
<style>
div {
margin: 5px;
border: 1px solid gray;
padding: 10px;
}
</style>
<body>
<div ng-controller="ctrl1">
CTRL1 MSG: <input ng-model="msg" ng-keyup="updateModel(msg)"/>
<div ng-controller="ctrl2">
CTRL2 MSG: <input ng-model="msg" ng-keyup="updateModel(msg)"/>
<div ng-controller="ctrl3">
CTRL3 MSG: <input ng-model="msg" ng-keyup="updateModel(msg)"/>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("nestingApp", [])
.controller("ctrl1", function($scope){
$scope.msg = "This is ctrl1 msg object.";
$scope.updateModel = function(msg){
$scope.$broadcast("toChild", msg);
};
$scope.$on("toParent", function(event, data){
$scope.msg = data;
});
})
.controller("ctrl2", function($scope){
$scope.updateModel = function(msg){
$scope.$broadcast("toChild", msg);
$scope.$emit("toParent", msg);
};
$scope.$on("toParent", function(event, data){
$scope.msg = data;
});
$scope.$on("toChild", function(event, data){
$scope.msg = data;
});
})
.controller("ctrl3", function($scope){
$scope.updateModel = function(msg){
$scope.$emit("toParent", msg);
};
$scope.$on("toChild", function(event, data){
$scope.msg = data;
});
});
</script>
</body>

</html>

Friday, November 10, 2017

JQUERY PLUGIN EXAMPLES

Please look at following examples to get understanding about how to use jquery plugins.

drag & drop example using jquery UI
<html>
<head>
<link rel="stylesheet" href="node_modules/jqueryui/jquery-ui.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jqueryui/jquery-ui.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script>
$(function(){
$("#draggable").draggable();
$("#droppable").droppable({
drop: function( event, ui ){
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>

</html>

Tabs example using Jquery UI
<html>
<head>
<link rel="stylesheet" href="node_modules/jqueryui/jquery-ui.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jqueryui/jquery-ui.js"></script>
<script>
$(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
Nunc tincidunt
</a>
</li>
<li>
<a href="#tabs-2">
Proin dolor
</a>
</li>
<li>
<a href="#tabs-3">
Aenean lacinia
</a>
</li>
</ul>
<div id="tabs-1">
<p>This first tab para.</p>
</div>
<div id="tabs-2">
<p>This 2nd tab para..</p>
</div>
<div id="tabs-3">
<p>This 3rd tab para..</p>
</div>
</div>
</body>
</html>

Select box with suggestion list example using Select2
<html>
<head>
<link href="node_modules/select2/dist/css/select2.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/select2/dist/js/select2.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'data/us_states.json',
success: function (data) {
var states = [];
$.each(data, function(i, state){
states.push({
id: i + 1,
text: state.name
});
});
$("#states").select2({
data: states
});
}
});
});
</script>
</head>
<body>
<select id="states">
</select>
</body>

</html>

Monday, August 28, 2017

Angular BEST PRACTICES example

BEST PRACTICES

Please find the link below to download a simple project.

https://drive.google.com/open?id=0B9AYB6a-0LPnOEZ0Qm1TRUhucnc

Please follow below steps to execute project
extract rar files into any folder
open command and install node & npm
in command cd to rar extacted folder and execute below commands

npm install angular
npm install -g gulp
npm install gulp gulp-contact gulp-uglify gulp-rename
gulp build

After performing above commands open best-practice.htm file any browser.

Thanks & regards,

Vikram Y.