AngularJS and Twitter Bootstrap and search glyphicon

<!DOCTYPE html>
<html lang="en">


<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<script>
    angular.module("simpleapp", [])
        .controller("SimpleController", function ($scope) {
            $scope.entity = {};
            $scope.entity.title = "A simple AngularJS app";
        });
</script>
<body ng-app="simpleapp">


    <div ng-controller="SimpleController">

        <h2>Hello, {{entity.title}}</h2>

    </div>

    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" ng-model="main.searchInput">
    </div>

</body>

</html>

A simple AngularJS app

<!DOCTYPE html>
<html lang="en">


<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="simpleapp">


    <div ng-controller="SimpleController">

        <h2>Hello, {{entity.title}}</h2>

    </div>


    <script>
angular.module("simpleapp", [])
    .controller("SimpleController", function($scope) {
        $scope.entity = {};
        $scope.entity.title = "A simple AngularJS app";
    } );
    </script>



</body>

</html>

Angular Js $index, $odd and $even with ng-if directive

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="customersCtrl">

        <table>
            <tr ng-repeat="x in names">
                <td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
                    {{$index + 1  }}
                </td>
                <td ng-if="$even">
                    {{ $index + 1  }}
                </td>
                <td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
                    {{ x.Name }}
                </td>
                <td ng-if="$even">
                    {{ x.Name }}
                </td>
                <td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
                    {{ x.Country }}
                </td>
                <td ng-if="$even">
                    {{ x.Country }}
                </td>
            </tr>
        </table>

    </div>

    <script>
        angular.module('myApp', [])
           .factory('customersService', function ($http, $q) {
               var deferred = $q.defer();

               return {
                   getPerson: function () {
                       return $http.get("/api/Home/getperson")
                           .then(function (response) {
                               // promise is fulfilled
                               deferred.resolve(response);
                               return deferred.promise;
                           }, function (response) {
                               deferred.reject(response);
                               return deferred.promise;
                           })
                       ;
                   }
               }

           })
           .controller("customersCtrl", function ($scope, $q, customersService) {

               customersService.getPerson().then(
                       function (result) {
                           $scope.names = result.data;
                       },
                       function (error) {
                           // handle errors here
                           alert('error');
                       }
                   );
           });

    </script>

</body>
</html>

Angular Js Factory and $q

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="customersCtrl">

        <ul>
            <li ng-repeat="x in names">
                {{ x.Name + ', ' + x.Country }}
            </li>
        </ul>

    </div>

    <script>
        angular.module('myApp', [])
           .factory('customersService', function ($http, $q) {
               var deferred = $q.defer();

               return {
                   getPerson: function () {
                       return $http.get("/api/Home/getperson")
                           .then(function (response) {
                               // promise is fulfilled
                               deferred.resolve(response);
                               return deferred.promise;
                           }, function (response) {
                                deferred.reject(response);
                              return deferred.promise;
                           })
                       ;
                   }
               }

           })
           .controller("customersCtrl", function ($scope, $q, customersService) {

               customersService.getPerson().then(
                       function (result) {
                           $scope.names = result.data;
                       },
                       function (error) {
                           // handle errors here
                           alert('error');
                       }
                   );
           });

    </script>

</body>
</html>

Retrieve Data in Angular Js from Web Api as HttpResponseMessage

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="customersCtrl">

        <ul>
            <li ng-repeat="x in names">
                {{ x.Name + ', ' + x.Country }}
            </li>
        </ul>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {
            $http.get("/api/Home/getperson").success(function (data) {
                alert(JSON.stringify(data));
                $scope.names = data;
            });
        });
    </script>

</body>
</html>






    public class records
    {
        public string Name { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }
    public class HomeController : ApiController
    {
        public HttpResponseMessage getperson()
        {
            var data = new List();
            records item1 = new records();
            item1.Name = "Name1";
            item1.City = "City1";
            item1.Country = "Country1";
            data.Add(item1);
            records item2 = new records();
            item2.Name = "Name2";
            item2.City = "City2";
            item2.Country = "Country2";
            data.Add(item2);
            records item3 = new records();
            item3.Name = "Name3";
            item3.City = "City3";
            item3.Country = "Country3";
            data.Add(item3);

            return Request.CreateResponse(HttpStatusCode.OK, data);
        }
    }

Angular Js Upper Case And Lower Case

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="personCtrl">

        <p>The name is {{ firstName | uppercase }}</p>
        <p>The name is {{ lastName | lowercase }}</p>

    </div>

    <script type="text/javascript">
        angular.module('myApp', []).controller('personCtrl', function ($scope) {
            $scope.firstName = "jobin";
            $scope.lastName = "jonny";
        });
    </script>
</body>
</html>

File Download using Java Script

<script>
        function saveTextAsFile() {
            var textToWrite = document.getElementById("inputTextToSave").value;
            var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
            var fileNameToSaveAs = "myNewFile.txt";
            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.innerHTML = "My Hidden Link";
            window.URL = window.URL || window.webkitURL;
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = destroyClickedElement;
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }

        function destroyClickedElement(event) {
            document.body.removeChild(event.target);
        }
    </script>
</head>
<body>
    <textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
    <button onclick="saveTextAsFile()">Save Text to File</button>
</body>