Using setTimeout function in AngularJS developed - Kids Alphabets Tutor

Code Snippet:

Blinker.html

<html>

<head>

    <title>Angular.js Example</title>

    <script src="Scripts/angular.js"></script>

    <script>

        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>

<body ng-app="NameApp" ng-controller="NameCtrl">

    <center>

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

        <div ng-hide="letter" ng-repeat="letter in letters">

            <div ng-bind="testname(letter)"> </div>

        </div>

        <h1>

            {{test}}

            <img src="Images/{{test}}.PNG" width="75px" height="75px" />

        </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:

Search Box using AngularJS Filters

Code Snippet:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Search and know about places</title>

    <script src="Scripts/angular.js"></script>

</head>

<body ng-app="">

    <div ng-init="places=['Agartala','Agra','Amritsar','Bangalore','Chennai','Hyderabad','Visakhaptanam','Delhi','Kerala','Tamil Nadu'];">

        <h2>Search and know about places</h2>

        Search:<input type="text" ng-model="serPlace" /><br />

        <table>

            <tr ng-repeat="place in places| filter:serPlace">

                <td>

                    <a ng-show="serPlace" ng-href="https://www.google.co.in/#q={{place}}" target="_blank">{{place}}</a>

                </td>

            </tr>

        </table>

    </div>

</body>

</html>

How it Looks:

Login page with Show & Hide Functionality in AngularJS

Code Snippet:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Show/hide password</title>

    <script src="Scripts/angular.js"></script>

    

    <script type="text/javascript">

        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>

<body ng-app="passwordApp" ng-controller="passwordController">

    

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

        <input type="text" placeholder="Username" id="username" name="username" ng-model="username"><br />

       

        <input type="{{inputtype}}" placeholder="Password" id="password" name="password" ng-model="password"><br />

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

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

    

</body>

</html>

How it Looks:

Performing CRUD operations using angular services in Angularjs

Code Snippet:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>CRUD Operations</title>

    <script src="Scripts/angular.js"></script>

    <script type="text/javascript">

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

        app.service('CRUDService', function () {

            var uid = 1;

            var contacts = [{

                id: 0,

                name: "Developer",

                email: "developer@gmail.com",

                phone: 1234657890

            }];

            this.save = function (contact) {

                if (contact.id == null) {

                    contact.id = uid++;

                    contacts.push(contact);

                } else {

                    for (i in contacts) {

                        if (contacts[i].id == contact.id)

                            contacts[i] = contact;

                    }

                }

            };

            this.get = function (id) {

                for (i in contacts) {

                    if (contacts[i].id == id)

                        return contacts[i];

                }

            };

            this.delete = function (id) {

                for (i in contacts) {

                    if (contacts[i].id == id)

                        contacts.splice(i, 1);

                }

            };

            this.list = function () {

                return contacts;

            };

        });

        app.controller('CRUDController', function ($scope, CRUDService) {

            $scope.contacts = CRUDService.list();

            $scope.add = function () {

                CRUDService.save($scope.newcontact);

                $scope.newcontact = {};

            };

            $scope.edit = function (id) {

                $scope.newcontact = angular.copy(CRUDService.get(id));

            };

            $scope.delete = function (id) {

                CRUDService.delete(id);

                if ($scope.newcontact.id == id)

                    $scope.newcontact = {};

            };

        });

    </script>

</head>

<body ng-app="CRUDModule" ng-controller="CRUDController">

    <h3>CRUD Operations</h3>

    <table style="border:dashed">

        <tr>

            <td>Name:<input type="text" name="name" ng-model="newcontact.name" /></td>

        </tr>

        <tr>

            <td>Email:<input type="text" name="email" ng-model="newcontact.email" /></td>

        </tr>

        <tr>

            <td>Phone:<input type="number" name="phone" ng-model="newcontact.phone" /></td>

        </tr>

        <tr>

            <td><input type="hidden" ng-model="newcontact.id" /></td>

        </tr>

        <tr>

            <td><button ng-click="add()">Add</button></td>

        </tr>

    </table>

    <br /><br />

    <table style="border:dotted">

        <thead>

            <tr>

                <th>Name</th>

                <th>Email</th>

                <th>Phone</th>

            </tr>

        </thead>

        <tbody>

            <tr ng-repeat="contact in contacts">

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

                <td>{{contact.email}}</td>

                <td>{{contact.phone}}</td>

                <td><button ng-click="edit(contact.id)">Edit</button> | <button ng-click="delete(contact.id)">Delete</button></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

UI: How it Looks

We can Add new record , edit existing record and delete records.