Software Developer's Bookmark: September 2014

Monday, September 29, 2014

How to create Fixed Menu When Scrolling Page with CSS and jQuery

HTML

<ul>

<li><a href="">jQuery</a></li>

<li><a href="">Wordpress</a></li>

<li><a href="">Services</a></li>

</ul>

<div class="clear"></div> /*clear floating div*/

</div>

CSS

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.nav { height: 42px;}

.nav ul { list-style: none; }

.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}

.nav ul li:first-child{ padding-left: 0;}

.nav ul li a { }

.nav ul li a:hover{ text-decoration: underline;}

JQUERY

jQuery("document").ready(function($){

    var nav = $('.nav-container');

    $(window).scroll(function () {
       if ($(this).scrollTop() > 136) {
           nav.addClass("f-nav");
       } else {
           nav.removeClass("f-nav");
       }
    });

});

Sunday, September 28, 2014

How to override base class methods in JavaScript (when used with "prototype")

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        //DEMO: Overriding methods using prototype

        //create parent class
        var Person = function (vId, vName) {
            this.Id = vId;
            this.Name = vName;
        };

        Person.prototype.Display = function () {
            alert("Id=" + this.Id.toString() +
                    ", Name=" + this.Name);
        }

        //create new class
        var Emp = function (vId, vName, vOfficeMail) {
            if (arguments.length < 3) return;
            Person.call(this, vId, vName)
            this.OfficeEmail = vOfficeMail;
        };

        //make Emp class as a child of Person class
        Emp.prototype = new Person();
        Emp.prototype.constructor = Emp;
        //overriding method
        Emp.prototype.Display = function () {
            alert("Id=" + this.Id.toString() +
                    ", Name=" + this.Name +
                    ", OfficeMail=" + this.OfficeEmail);
        }

        //create instance of child class
        var oEmp = new Emp(1001, "Jag", "a@a.com"); //using Child's constructor
        //call display method in child class
        oEmp.Display();

        //create instance of parent class
        var oPerson = new Person(1002, "Chat"); //using Parent's constructor
        //call display method in parent class
        oPerson.Display();

    </script>
</head>
<body>
</body>
</html>

Monday, September 8, 2014

AngularJS Extracting factories and directives to separate modules using method chaining.

init order :
ngRoutes, factories, controllers, directives

index.html

<html ng-app="countryApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>

    <script src="countryControllers.js"></script>
    <script src="countriesFactory.js"></script>
    <script src="countryDirective.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

app.js

var countryApp = angular.module('countryApp', [
'ngRoute', // system module
'countryControllers', // my sepatated modules
'countriesFactory',
'countryDirective'
]);

countryApp.config(function($routeProvider) {
$routeProvider.
    when('/', {
      templateUrl: 'country-list.html',
      controller: 'CountryListCtrl'
    }).
    when('/:countryId', {
      templateUrl: 'country-detail.html',
      controller: 'CountryDetailCtrl'
    }).
    otherwise({
      redirectTo: '/'
    });
});

countriesFactory.js

angular.module('countriesFactory', [])
       .factory('countries', function($http){
return {
    list: function (callback){
      $http({
        method: 'GET',
        url: 'countries.json',
        cache: true
      }).success(callback);
    },
    find: function(id, callback){
      $http({
        method: 'GET',
        url: 'country_' + id + '.json',
        cache: true
      }).success(callback);
    }
};
});

countryControllers.js

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

countryControllers.controller('CountryListCtrl', function ($scope, countries){
countries.list(function(countries) {
    $scope.countries = countries;
});
});

countryControllers.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
countries.find($routeParams.countryId, function(country) {
    $scope.country = country;
});
});

countryDirective.js

angular.module('countryDirective', [])
       .directive('country', function(){
return {
    scope: { country: '=' },
    restrict: 'A',
    templateUrl: 'country.html',
    controller: function($scope, countries){
      countries.find($scope.country.id, function(country) {
        $scope.flagURL = country.flagURL;
      });
    }
};
});

Extracting controllers into a separate module using angularJS

Fetching data within custom directives - adding flags to the country listing in angularJS

<html ng-app="countryApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', ['ngRoute']);

      countryApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'country-list.html',
            controller: 'CountryListCtrl'
          }).
          when('/:countryId', {
            templateUrl: 'country-detail.html',
            controller: 'CountryDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      });

      countryApp.factory('countries', function($http){
        return {
          list: function (callback){
            $http({
              method: 'GET',
              url: 'countries.json',
              cache: true
            }).success(callback);
          },
          find: function(id, callback){
            $http({
              method: 'GET',
              url: 'country_' + id + '.json',
              cache: true
            }).success(callback);
          }
        };
      });

      countryApp.directive('country', function(){
        return {
          scope: {
            country: '='
          },
          restrict: 'A',
          templateUrl: 'country.html',
          controller: function($scope, countries){
            countries.find($scope.country.id, function(country) {
              $scope.flagURL = country.flagURL;
            });
          }
        };
      });

      countryApp.controller('CountryListCtrl', function ($scope, countries){
        countries.list(function(countries) {
          $scope.countries = countries;
        });
      });

      countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
        countries.find($routeParams.countryId, function(country) {
          $scope.country = country;
        });
      });

    </script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

country-list.html

<ul>
<li ng-repeat="country in countries" country="country">
</li>
</ul>

country.html

<img ng-src="{{flagURL}}" width="20">
<a href="#/{{country.id}}">{{country.name}}</a>

country-detail.html

<h1>{{country.name}}</h1>
<ul>
<li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li>
<li>Population: {{country.population | number }}</li>
<li>Capital: {{country.capital}}</li>
<li>GDP: {{country.gdp | currency }}</li>
</ul>

countries.json

[
{
    "name": "China",
    "id": 1
},
{
    "name": "India",
    "id": 2
},
{
    "name": "United States of America",
    "id": 3
}
]

country_1.json

{
"name": "China",
"population": 1359821000,
"flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
"capital": "Beijing",
"gdp": 12261
}

country_2.json

{
"name": "India",
"population": 1205625000,
"flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
"capital": "New Delhi",
"gdp": 4716
}

country_3.json

{
"name": "United States of America",
"population": 312247000,
"flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
"capital": "Washington, D.C.",
"gdp": 16244
}

Simulating a RESTful service by splitting the JSON data across files using angularJS

<html ng-app="countryApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', ['ngRoute']);

      countryApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'country-list.html',
            controller: 'CountryListCtrl'
          }).
          when('/:countryId', {
            templateUrl: 'country-detail.html',
            controller: 'CountryDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      });

      countryApp.factory('countries', function($http){
        return {
          list: function (callback){
            $http({
              method: 'GET',
              url: 'countries.json',
              cache: true
            }).success(callback);
          },
          find: function(id, callback){
            $http({
              method: 'GET',
              url: 'country_' + id + '.json',
              cache: true
            }).success(callback);
          }
        };
      });

      countryApp.controller('CountryListCtrl', function ($scope, countries){
        countries.list(function(countries) {
          $scope.countries = countries;
        });
      });

      countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
        countries.find($routeParams.countryId, function(country) {
          $scope.country = country;
        });
      });

    </script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

country-detail.html

<h1>{{country.name}}</h1>
<ul>
<li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li>
<li>Population: {{country.population | number }}</li>
<li>Capital: {{country.capital}}</li>
<li>GDP: {{country.gdp | currency }}</li>
</ul>

country-list.html

<ul>
<li ng-repeat="country in countries">
    <a href="#/{{country.id}}">{{country.name}}</a>
</li>
</ul>

countries.json

[
{
    "name": "China",
    "id": 1
},
{
    "name": "India",
    "id": 2
},
{
    "name": "United States of America",
    "id": 3
}
]

country_1.json

{
"name": "China",
"population": 1359821000,
"flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
"capital": "Beijing",
"gdp": 12261
}

country_2.json

{
"name": "India",
"population": 1205625000,
"flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
"capital": "New Delhi",
"gdp": 4716
}

country_3.json

{
"name": "United States of America",
"population": 312247000,
"flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
"capital": "Washington, D.C.",
"gdp": 16244
}

Extracting the country details query into a service factory callback method with cacheData in angular js

<html ng-app="countryApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', ['ngRoute']);

      countryApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'country-list.html',
            controller: 'CountryListCtrl'
          }).
          when('/:countryName', {
            templateUrl: 'country-detail.html',
            controller: 'CountryDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      });

      countryApp.factory('countries', function($http){

        var cachedData;

        function getData(callback){
          if(cachedData) {
            callback(cachedData);
          } else {
            $http.get('countries.json').success(function(data){
              cachedData = data;
              callback(data);
            });
          }
        }

        return {
          list: getData,
          find: function(name, callback){
            getData(function(data) {
              var country = data.filter(function(entry){
                return entry.name === name;
              })[0];
              callback(country);
            });
          }
        };
      });

      countryApp.controller('CountryListCtrl', function ($scope, countries){
        countries.list(function(countries) {
          $scope.countries = countries;
        });
      });

      countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
        countries.find($routeParams.countryName, function(country) {
          $scope.country = country;
        });
      });
    </script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

or use cache option

function getData(callback){
          $http({
            method: 'GET',
            url: 'countries.json',
            cache: true
          }).success(callback);
        }

country-detail.html

<h1>{{country.name}}</h1>
<ul>
<li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li>
<li>Population: {{country.population | number }}</li>
<li>Capital: {{country.capital}}</li>
<li>GDP: {{country.gdp | currency }}</li>
</ul>

country-list.html

<ul>
<li ng-repeat="country in countries">
    <a href="#/{{country.name}}">{{country.name}}</a>
</li>
</ul>

countries.json

[
{
    "name": "China",
    "population": 1359821000,
    "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
    "capital": "Beijing",
    "gdp": 12261
},
{
    "name": "India",
    "population": 1205625000,
    "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
    "capital": "New Delhi",
    "gdp": 4716
},
{
    "name": "United States of America",
    "population": 312247000,
    "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
    "capital": "Washington, D.C.",
    "gdp": 16244
}
]

Moving templates for routes into separate files and Extracting and using parameters from routes in angularjs

index.html

country-detail.html

<h1>{{name}}</h1>
<ul>
<li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li>
<li>Population: {{country.population | number }}</li>
<li>Capital: {{country.capital}}</li>
<li>GDP: {{country.gdp | currency }}</li>
</ul>

country-list.html

<ul>
<li ng-repeat="country in countries">
<a href="#/{{country.name}}">{{country.name}}</a>
</li>
</ul>

countries.json

[
{
    "name": "China",
    "population": 1359821000,
    "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
    "capital": "Beijing",
    "gdp": 12261
},
{
    "name": "India",
    "population": 1205625000,
    "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
    "capital": "New Delhi",
    "gdp": 4716
},
{
    "name": "United States of America",
    "population": 312247000,
    "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
    "capital": "Washington, D.C.",
    "gdp": 16244
}
]

Getting started html templates with routing using ngRoute with ng-view in angularJS

Formatting currency, number using Angular filters in templates

Sorting with reversing sort order table columns interactively using angular js

Dependency injection syntax for minification with filter when Fetching JSON using angular $scope, $http

<html ng-app="countryApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', ['$scope', '$http', function (scope, http){
        http.get('countries.json').success(function(data) {
          scope.countries = data;
        });
      }]);
    </script>
</head>
<body ng-controller="CountryCtrl">
    Search:<input ng-model="query" type="text"/>
    <table>
      <tr>
        <th>Country</th>
        <th>Population</th>
      </tr>
      <tr ng-repeat="country in countries | filter:query">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
</body>
</html>

countries.json

[
{
    "name": "WORLD",
    "population": 6916183000
},
{
    "name": "More developed regions",
    "population": 1240935000
},
{
    "name": "Less developed regions",
    "population": 5675249000
},
{
    "name": "Least developed countries",
    "population": 838807000
},
{
    "name": "Less developed regions, excluding least developed countries",
    "population": 4836442000
},
{
    "name": "Less developed regions, excluding China",
    "population": 4284697000
},
{
    "name": "Sub-Saharan Africa",
    "population": 831464000
},
{
    "name": "AFRICA",
    "population": 1031084000
},
{
    "name": "Eastern Africa",
    "population": 342595000
},
{
    "name": "Burundi",
    "population": 9233000
},
{
    "name": "Comoros",
    "population": 683000
},
{
    "name": "Djibouti",
    "population": 834000
},
{
    "name": "Eritrea",
    "population": 5741000
},
{
    "name": "Ethiopia",
    "population": 87095000
},
{
    "name": "Kenya",
    "population": 40909000
},
{
    "name": "Madagascar",
    "population": 21080000
},
{
    "name": "Malawi",
    "population": 15014000
},
{
    "name": "Mauritius",
    "population": 1231000
},
{
    "name": "Mayotte",
    "population": 204000
},
{
    "name": "Mozambique",
    "population": 23967000
},
{
    "name": "Réunion",
    "population": 845000
},
{
    "name": "Rwanda",
    "population": 10837000
},
{
    "name": "Seychelles",
    "population": 91000
},
{
    "name": "Somalia",
    "population": 9636000
},
{
    "name": "South Sudan",
    "population": 9941000
},
{
    "name": "Uganda",
    "population": 33987000
},
{
    "name": "United Republic of Tanzania",
    "population": 44973000
},
{
    "name": "Zambia",
    "population": 13217000
},
{
    "name": "Zimbabwe",
    "population": 13077000
},
{
    "name": "Middle Africa",
    "population": 124978000
},
{
    "name": "Angola",
    "population": 19549000
},
{
    "name": "Cameroon",
    "population": 20624000
},
{
    "name": "Central African Republic",
    "population": 4350000
},
{
    "name": "Chad",
    "population": 11721000
},
{
    "name": "Congo",
    "population": 4112000
},
{
    "name": "Democratic Republic of the Congo",
    "population": 62191000
},
{
    "name": "Equatorial Guinea",
    "population": 696000
},
{
    "name": "Gabon",
    "population": 1556000
},
{
    "name": "Sao Tome and Principe",
    "population": 178000
},
{
    "name": "Northern Africa",
    "population": 199620000
},
{
    "name": "Algeria",
    "population": 37063000
},
{
    "name": "Egypt",
    "population": 78076000
},
{
    "name": "Libya",
    "population": 6041000
},
{
    "name": "Morocco",
    "population": 31642000
},
{
    "name": "Sudan",
    "population": 35652000
},
{
    "name": "Tunisia",
    "population": 10632000
},
{
    "name": "Western Sahara",
    "population": 515000
},
{
    "name": "Southern Africa",
    "population": 58803000
},
{
    "name": "Botswana",
    "population": 1969000
},
{
    "name": "Lesotho",
    "population": 2009000
},
{
    "name": "Namibia",
    "population": 2179000
},
{
    "name": "South Africa",
    "population": 51452000
},
{
    "name": "Swaziland",
    "population": 1193000
},
{
    "name": "Western Africa",
    "population": 305088000
},
{
    "name": "Benin",
    "population": 9510000
},
{
    "name": "Burkina Faso",
    "population": 15540000
},
{
    "name": "Cape Verde",
    "population": 488000
},
{
    "name": "Côte d'Ivoire",
    "population": 18977000
},
{
    "name": "Gambia",
    "population": 1681000
},
{
    "name": "Ghana",
    "population": 24263000
},
{
    "name": "Guinea",
    "population": 10876000
},
{
    "name": "Guinea-Bissau",
    "population": 1587000
},
{
    "name": "Liberia",
    "population": 3958000
},
{
    "name": "Mali",
    "population": 13986000
},
{
    "name": "Mauritania",
    "population": 3609000
},
{
    "name": "Niger",
    "population": 15894000
},
{
    "name": "Nigeria",
    "population": 159708000
},
{
    "name": "Saint Helena",
    "population": 4000
},
{
    "name": "Senegal",
    "population": 12951000
},
{
    "name": "Sierra Leone",
    "population": 5752000
},
{
    "name": "Togo",
    "population": 6306000
},
{
    "name": "ASIA",
    "population": 4165440000
},
{
    "name": "Eastern Asia",
    "population": 1593571000
},
{
    "name": "China",
    "population": 1359821000
},
{
    "name": "China, Hong Kong SAR",
    "population": 7050000
},
{
    "name": "China, Macao SAR",
    "population": 535000
},
{
    "name": "Dem. People's Republic of Korea",
    "population": 24501000
},
{
    "name": "Japan",
    "population": 127353000
},
{
    "name": "Mongolia",
    "population": 2713000
},
{
    "name": "Republic of Korea",
    "population": 48454000
},
{
    "name": "Other non-specified areas",
    "population": 23146000
},
{
    "name": "South-Central Asia",
    "population": 1743101000
},
{
    "name": "Central Asia",
    "population": 61694000
},
{
    "name": "Kazakhstan",
    "population": 15921000
},
{
    "name": "Kyrgyzstan",
    "population": 5334000
},
{
    "name": "Tajikistan",
    "population": 7627000
},
{
    "name": "Turkmenistan",
    "population": 5042000
},
{
    "name": "Uzbekistan",
    "population": 27769000
},
{
    "name": "Southern Asia",
    "population": 1681407000
},
{
    "name": "Afghanistan",
    "population": 28398000
},
{
    "name": "Bangladesh",
    "population": 151125000
},
{
    "name": "Bhutan",
    "population": 717000
},
{
    "name": "India",
    "population": 1205625000
},
{
    "name": "Iran (Islamic Republic of)",
    "population": 74462000
},
{
    "name": "Maldives",
    "population": 326000
},
{
    "name": "Nepal",
    "population": 26846000
},
{
    "name": "Pakistan",
    "population": 173149000
},
{
    "name": "Sri Lanka",
    "population": 20759000
},
{
    "name": "South-Eastern Asia",
    "population": 597097000
},
{
    "name": "Brunei Darussalam",
    "population": 401000
},
{
    "name": "Cambodia",
    "population": 14365000
},
{
    "name": "Indonesia",
    "population": 240676000
},
{
    "name": "Lao People's Democratic Republic",
    "population": 6396000
},
{
    "name": "Malaysia",
    "population": 28276000
},
{
    "name": "Myanmar",
    "population": 51931000
},
{
    "name": "Philippines",
    "population": 93444000
},
{
    "name": "Singapore",
    "population": 5079000
},
{
    "name": "Thailand",
    "population": 66402000
},
{
    "name": "Timor-Leste",
    "population": 1079000
},
{
    "name": "Viet Nam",
    "population": 89047000
},
{
    "name": "Western Asia",
    "population": 231671000
},
{
    "name": "Armenia",
    "population": 2963000
},
{
    "name": "Azerbaijan",
    "population": 9095000
},
{
    "name": "Bahrain",
    "population": 1252000
},
{
    "name": "Cyprus",
    "population": 1104000
},
{
    "name": "Georgia",
    "population": 4389000
},
{
    "name": "Iraq",
    "population": 30962000
},
{
    "name": "Israel",
    "population": 7420000
},
{
    "name": "Jordan",
    "population": 6455000
},
{
    "name": "Kuwait",
    "population": 2992000
},
{
    "name": "Lebanon",
    "population": 4341000
},
{
    "name": "Oman",
    "population": 2803000
},
{
    "name": "Qatar",
    "population": 1750000
},
{
    "name": "Saudi Arabia",
    "population": 27258000
},
{
    "name": "State of Palestine",
    "population": 4013000
},
{
    "name": "Syrian Arab Republic",
    "population": 21533000
},
{
    "name": "Turkey",
    "population": 72138000
},
{
    "name": "United Arab Emirates",
    "population": 8442000
},
{
    "name": "Yemen",
    "population": 22763000
},
{
    "name": "EUROPE",
    "population": 740308000
},
{
    "name": "Eastern Europe",
    "population": 296183000
},
{
    "name": "Belarus",
    "population": 9491000
},
{
    "name": "Bulgaria",
    "population": 7389000
},
{
    "name": "Czech Republic",
    "population": 10554000
},
{
    "name": "Hungary",
    "population": 10015000
},
{
    "name": "Poland",
    "population": 38199000
},
{
    "name": "Republic of Moldova",
    "population": 3573000
},
{
    "name": "Romania",
    "population": 21861000
},
{
    "name": "Russian Federation",
    "population": 143618000
},
{
    "name": "Slovakia",
    "population": 5433000
},
{
    "name": "Ukraine",
    "population": 46050000
},
{
    "name": "Northern Europe",
    "population": 98795000
},
{
    "name": "Channel Islands",
    "population": 160000
},
{
    "name": "Denmark",
    "population": 5551000
},
{
    "name": "Estonia",
    "population": 1299000
},
{
    "name": "Faeroe Islands",
    "population": 50000
},
{
    "name": "Finland",
    "population": 5368000
},
{
    "name": "Iceland",
    "population": 318000
},
{
    "name": "Ireland",
    "population": 4468000
},
{
    "name": "Isle of Man",
    "population": 84000
},
{
    "name": "Latvia",
    "population": 2091000
},
{
    "name": "Lithuania",
    "population": 3068000
},
{
    "name": "Norway",
    "population": 4891000
},
{
    "name": "Sweden",
    "population": 9382000
},
{
    "name": "United Kingdom",
    "population": 62066000
},
{
    "name": "Southern Europe",
    "population": 154712000
},
{
    "name": "Albania",
    "population": 3150000
},
{
    "name": "Andorra",
    "population": 78000
},
{
    "name": "Bosnia and Herzegovina",
    "population": 3846000
},
{
    "name": "Croatia",
    "population": 4338000
},
{
    "name": "Gibraltar",
    "population": 29000
},
{
    "name": "Greece",
    "population": 11110000
},
{
    "name": "Holy See",
    "population": 1000
},
{
    "name": "Italy",
    "population": 60509000
},
{
    "name": "Malta",
    "population": 425000
},
{
    "name": "Montenegro",
    "population": 620000
},
{
    "name": "Portugal",
    "population": 10590000
},
{
    "name": "San Marino",
    "population": 31000
},
{
    "name": "Serbia",
    "population": 9647000
},
{
    "name": "Slovenia",
    "population": 2054000
},
{
    "name": "Spain",
    "population": 46182000
},
{
    "name": "TFYR Macedonia",
    "population": 2102000
},
{
    "name": "Western Europe",
    "population": 190618000
},
{
    "name": "Austria",
    "population": 8402000
},
{
    "name": "Belgium",
    "population": 10941000
},
{
    "name": "France",
    "population": 63231000
},
{
    "name": "Germany",
    "population": 83017000
},
{
    "name": "Liechtenstein",
    "population": 36000
},
{
    "name": "Luxembourg",
    "population": 508000
},
{
    "name": "Monaco",
    "population": 37000
},
{
    "name": "Netherlands",
    "population": 16615000
},
{
    "name": "Switzerland",
    "population": 7831000
},
{
    "name": "LATIN AMERICA AND THE CARIBBEAN",
    "population": 596191000
},
{
    "name": "Caribbean",
    "population": 41625000
},
{
    "name": "Anguilla",
    "population": 14000
},
{
    "name": "Antigua and Barbuda",
    "population": 87000
},
{
    "name": "Aruba",
    "population": 102000
},
{
    "name": "Bahamas",
    "population": 360000
},
{
    "name": "Barbados",
    "population": 280000
},
{
    "name": "British Virgin Islands",
    "population": 27000
},
{
    "name": "Caribbean Netherlands",
    "population": 18000
},
{
    "name": "Cayman Islands",
    "population": 56000
},
{
    "name": "Cuba",
    "population": 11282000
},
{
    "name": "Curaçao",
    "population": 148000
},
{
    "name": "Dominica",
    "population": 71000
},
{
    "name": "Dominican Republic",
    "population": 10017000
},
{
    "name": "Grenada",
    "population": 105000
},
{
    "name": "Guadeloupe",
    "population": 459000
},
{
    "name": "Haiti",
    "population": 9896000
},
{
    "name": "Jamaica",
    "population": 2741000
},
{
    "name": "Martinique",
    "population": 401000
},
{
    "name": "Montserrat",
    "population": 5000
},
{
    "name": "Puerto Rico",
    "population": 3710000
},
{
    "name": "Saint Kitts and Nevis",
    "population": 52000
},
{
    "name": "Saint Lucia",
    "population": 177000
},
{
    "name": "Saint Vincent and the Grenadines",
    "population": 109000
},
{
    "name": "Sint Maarten (Dutch part)",
    "population": 43000
},
{
    "name": "Trinidad and Tobago",
    "population": 1328000
},
{
    "name": "Turks and Caicos Islands",
    "population": 31000
},
{
    "name": "United States Virgin Islands",
    "population": 106000
},
{
    "name": "Central America",
    "population": 160546000
},
{
    "name": "Belize",
    "population": 309000
},
{
    "name": "Costa Rica",
    "population": 4670000
},
{
    "name": "El Salvador",
    "population": 6218000
},
{
    "name": "Guatemala",
    "population": 14342000
},
{
    "name": "Honduras",
    "population": 7621000
},
{
    "name": "Mexico",
    "population": 117886000
},
{
    "name": "Nicaragua",
    "population": 5822000
},
{
    "name": "Panama",
    "population": 3678000
},
{
    "name": "South America",
    "population": 394021000
},
{
    "name": "Argentina",
    "population": 40374000
},
{
    "name": "Bolivia (Plurinational State of)",
    "population": 10157000
},
{
    "name": "Brazil",
    "population": 195210000
},
{
    "name": "Chile",
    "population": 17151000
},
{
    "name": "Colombia",
    "population": 46445000
},
{
    "name": "Ecuador",
    "population": 15001000
},
{
    "name": "Falkland Islands (Malvinas)",
    "population": 3000
},
{
    "name": "French Guiana",
    "population": 231000
},
{
    "name": "Guyana",
    "population": 786000
},
{
    "name": "Paraguay",
    "population": 6460000
},
{
    "name": "Peru",
    "population": 29263000
},
{
    "name": "Suriname",
    "population": 525000
},
{
    "name": "Uruguay",
    "population": 3372000
},
{
    "name": "Venezuela (Bolivarian Republic of)",
    "population": 29043000
},
{
    "name": "NORTHERN AMERICA",
    "population": 346501000
},
{
    "name": "Bermuda",
    "population": 65000
},
{
    "name": "Canada",
    "population": 34126000
},
{
    "name": "Greenland",
    "population": 57000
},
{
    "name": "Saint Pierre and Miquelon",
    "population": 6000
},
{
    "name": "United States of America",
    "population": 312247000
},
{
    "name": "OCEANIA",
    "population": 36659000
},
{
    "name": "Australia/New Zealand",
    "population": 26773000
},
{
    "name": "Australia",
    "population": 22404000
},
{
    "name": "New Zealand",
    "population": 4368000
},
{
    "name": "Melanesia",
    "population": 8729000
},
{
    "name": "Fiji",
    "population": 861000
},
{
    "name": "New Caledonia",
    "population": 246000
},
{
    "name": "Papua New Guinea",
    "population": 6859000
},
{
    "name": "Solomon Islands",
    "population": 526000
},
{
    "name": "Vanuatu",
    "population": 236000
},
{
    "name": "Micronesia",
    "population": 498000
},
{
    "name": "Guam",
    "population": 159000
},
{
    "name": "Kiribati",
    "population": 98000
},
{
    "name": "Marshall Islands",
    "population": 52000
},
{
    "name": "Micronesia (Fed. States of)",
    "population": 104000
},
{
    "name": "Nauru",
    "population": 10000
},
{
    "name": "Northern Mariana Islands",
    "population": 54000
},
{
    "name": "Palau",
    "population": 20000
},
{
    "name": "Polynesia",
    "population": 660000
},
{
    "name": "American Samoa",
    "population": 56000
},
{
    "name": "Cook Islands",
    "population": 20000
},
{
    "name": "French Polynesia",
    "population": 268000
},
{
    "name": "Niue",
    "population": 1000
},
{
    "name": "Samoa",
    "population": 186000
},
{
    "name": "Tokelau",
    "population": 1000
},
{
    "name": "Tonga",
    "population": 104000
},
{
    "name": "Tuvalu",
    "population": 10000
},
{
    "name": "Wallis and Futuna Islands",
    "population": 14000
}
]

Adding, remove entries to a list using forms and ng-submit, a ng-click and Clearing the entered name using data binding

<html ng-app="nameApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope){
        $scope.names = ['Larry', 'Curly', 'Moe'];

        $scope.addName = function() {
          $scope.names.push($scope.enteredName);
          $scope.enteredName = '';
        };
      });
    </script>
</head>
<body ng-controller="NameCtrl">
    <ul>
      <li ng-repeat="name in names">{{name}}</li>
    </ul>
    <form ng-submit="addName()">
      <input type="text" ng-model="enteredName">
      <input type="submit" value="add">
    </form>
</body>
</html>

Removing names from a list using ng-click.

<html ng-app="nameApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope){
        $scope.names = ['Larry', 'Curly', 'Moe'];

        $scope.addName = function() {
          $scope.names.push($scope.enteredName);
          $scope.enteredName = '';
        };

        $scope.removeName = function(name) {
          var i = $scope.names.indexOf(name);
          $scope.names.splice(i, 1);
        };
      });
    </script>
</head>
<body ng-controller="NameCtrl">
    <ul>
      <li ng-repeat="name in names">{{name}}
      <a href="" ng-click="removeName(name)">remove</a></li>
    </ul>
    <form ng-submit="addName()">
      <input type="text" ng-model="enteredName">
      <input type="submit" value="add">
    </form>
</body>
</html>