Self Learning Techie: June 2015

Thursday, June 25, 2015

Palindrome in AngularJS

Code Snippet:

<head>

<title>Check whether the given word is palindrome or not</title>

var app = angular.module('palindromeApp', []);

app.controller('palindromeController', ['$scope', function ($scope) {

$scope.palicheck = function (word) {

var revword = word.split('').reverse().join('');

return revword == word;

};

}]);

</script>

</head>

<h3>Check whether the given word is palindrome or not</h3>

<div>

Enter Word: <input type="text" ng-model="word" />

</div>

<div ng-if="palicheck(word)">The Given word <b>{{word}}</b> is palindrome</div>

<div ng-if="!palicheck(word)">The Given word <b>{{word}}</b> is not palindrome</div>

</body>

</html>

How it Looks:

Wednesday, June 24, 2015

Example showing difference between One-Time and One-Way data bindings in Angularjs

Code Snippet:

<head>

<title>Difference between One-Time and One-Way Data Bindings</title>

var app = angular.module('OneTimeBinding', []);

app.controller('OneTimeBindingController', function ($scope) {

$scope.i = 0;

$scope.places = ['Agartala', 'Agra', 'Amritsar', 'Bangalore', 'Chennai', 'Hyderabad', 'Visakhaptanam', 'Delhi', 'Kerala', 'Tamil Nadu'];

$scope.ClickMe = function (clickEvent) {

$scope.place = $scope.places[$scope.i];

$scope.i++;

};

});

</script>

</head>

<div>

<button ng-click="ClickMe($event)">Click Me</button>

<br />

<p>One-Time Data-Binding: {{::place}}</p>

<p>One-Way Data-Binding: {{place}}</p>

</div>

</body>

</html>

How it Looks:

Monday, June 22, 2015

Download any youtube video in just a single click using this AngularJS program

Code Snippet:

<head>

<title>Download Any Youtube Video in a single click</title>

</head>

<div>

<h2>Download Any Youtube Video in single click</h2>

Enter video ID:<input type="text" ng-model="ID" /><br />

For Example: link= youtube.com/watch?v=<b>0o0kNeOyH98</b>

<br /> Here bolded text is ID

<br />

<div>

</div>

<br />

<h2>Want to download multiple videos at once then store ids in array </h2>

</div>

</body>

</html>

How it Looks:

Using setTimeout function in AngularJS developed - Kids Alphabets Tutor

Code Snippet:

Blinker.html

<html>

<head>

<title>Angular.js Example</title>

var nameApp = angular.module('NameApp', []);

nameApp.controller('NameCtrl', function ($scope) {

// I initialized only till alphabet 'H'.. Add more if you are topper in LKG.

$scope.letters = ['A-Apple', 'B-Ball', 'C-Cat', 'D-Dog', 'E-Elephant', 'F-Frog', 'G-Girafee', 'H-Horse'];

var time = 0;

$scope.testname = function (letter) {

setTimeout(function () {

$scope.test = letter;

$scope.$apply();

}, time);

time = time + 2000;

return letter;

}

});

</script>

</head>

<h1>Kids Alphabet Tutor</h1><br />

</div>

<h1>

</h1>

</center>

</body>

</html>

Points to Note:

Image file Name should be the array element names initialized in the $scope.letters.
Below is the folder structure:

After you make sure everything is ready run the Blinker.html and you see the below output.

This is how it looks: