Self Learning Techie: AngularJS

Showing posts with label AngularJS_Functions. Show all posts

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

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:

Wednesday, June 17, 2015

Login page with Show & Hide Functionality in AngularJS

Code Snippet:

<!DOCTYPE html>

<head>

<title>Show/hide password</title>

var app = angular.module("passwordApp", []);

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

$scope.inputtype = 'password';

$scope.showHidePassword = function showHidePassword() {

if ($scope.inputtype == 'password')

$scope.inputtype = 'text';

else

$scope.inputtype = 'password';

};

$scope.thankyou = function thankyou() {

window.alert("Thank you!");

};

}]);

</script>

</head>

<h2>Login page with Show & Hide Functionality:</h2>

<input type="checkbox" id="checkboxG1" class="testclass" ng-click="showHidePassword()" />Show Password<br />

<button ng-click="thankyou()">Login</button>

</body>

</html>

How it Looks: