Minimal HandlebarsJS Demo
-
-
Save ramnathv/8090625 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { "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" | |
| } | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment