8090625 by ramnathv

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Concise AngularJS</title>

    <!-- 0a. CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- 0a. JS: JQuery.js & Handlebars.js libraries -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script><!-- online -->
  </head>

  <body ng-app='PeopleApp' ng-controller='PeopleCtrl'>
    <!-- 1. page content with anchor -->
    <div id="anchor">
      <div  ng-repeat='people in persons'>
        <img ng-src="{{ people.photo }}">
          <b><a href="{{ people.twitter }}">{{ people.family }} {{ peope.name }}</a></b> — {{ people.title }}, {{ people.place }} : {{ people.introduction }}.
       </div>.
    </div>
    
    <script type='text/javascript'>
      var PeopleApp = angular.module('PeopleApp', [])
      
      PeopleApp.controller('PeopleCtrl', function($scope, $http){
        $http.get('data.json').success(function(data) {
          $scope.persons = data.people
          console.log($scope.persons)
        })
      })
    </script>
  </body>
</html>

data.json

{ "people":
    [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris (France)",
            "introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
            "photo": "WikiAtlas_Lopez_Hugo_Yug.png",
            "twitter": "http://www.twitter.com/Hugo_lz"
        },        
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala (India)",
            "introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
            "photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg",
            "twitter": "http://www.twitter.com/planemad"
        },
        {
            "family": "Lopez",
            "name": "Edouard",
            "title": "Hero",
            "place": "Bordeaux (France)",
            "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
            "photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png",
            "twitter": "http://wwww.twitter.com/edouard_lopez"
        }
    ]
}

style.css

img { width:200px; }
a {
 color: #0084b4;
 text-decoration:none;
}
a:hover { text-decoration : underline; }
div#anchor { width: 230px; }
div#anchor:hover { 
  padding: 12px; /* padding + border = 16px */
  border: 4px solid #ddd;
}
div {
  display: block; /* or inline-block */
  overflow: hidden;
/*height: 200px; */
  width: 200px;
  margin: 3px;
  padding: 15px; /* padding + border = 16px */
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  background: #fff;
  color: #333;
}
div:hover { 
  padding: 12px; /* padding + border = 16px */
  border: 4px solid #0084b4;
}