mvark · August 29, 2015 14:10
diff --git a/BookCollection.html b/BookCollection.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>My Books</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script>
        //Telling Angular to use our module with ng-app
       //Second parameter of module is a blank array
        var myApp = angular.module("myApp", []);

        myApp.service('myservice', ['$http', '$q', function ($http, $q) {
            var entries = [];

            function getData(){
                var bookList = [];
 var bookFeed = "https://spreadsheets.google.com/feeds/list/insert_your_spreadsheet_key_here/od6/public/values?alt=json&callback=JSON_CALLBACK";
                $http.jsonp(bookFeed)
                .success(function(data){
                    angular.forEach(data.feed.entry, function(entryX){
                        bookList.push(entryX);
                    });
                    angular.copy(bookList, entries);
                })
                .error(function (data) {
                    $scope.data = "Request failed";
                });
            }
            return {
                getData: getData,
                entries: entries
            };
        }]);
        myApp.controller('books', function ($scope, myservice) {
            $scope.message = "";
            $scope.entries = myservice.entries;
            myservice.getData();
        });
 </script>
 <style>
 body {
     margin: 0;
     padding: 0;
     text-align: center;
 }
 #container {
 	 width: 99%;
     margin: 0 auto;
     text-align: left;
 }
 .cell {background-color:#f0f0f0;float: left;overflow: hidden;margin:2px;width:150px;height:250px;vertical-align:middle;}
 .text { margin:3px;text-align:center; }
 img { display: block; margin-left: auto; margin-right: auto; padding:3px}
 </style>
 </head>
 <body>
    <div ng-app="myApp">
        <div id="container" ng-controller="books">
            My Books
            <div ng-repeat="entry in entries">
                <div class="cell">
 				<a href="http://a-fwd.com/in=tetitrtr-21&com=webdevetipstr-20&asin={{entry.gsx$asin.$t}}">
 				<img ng-src="http://images.amazon.com/images/P/{{entry.gsx$asin.$t}}.01.20MTLZZZ" /></a>
                <p class="text"><a href="http://a-fwd.com/in=tetitrtr-21&com=webdevetipstr-20&asin={{entry.gsx$asin.$t}}">  {{entry.gsx$bookname.$t}}</a></p>
                </div>
            </div>
        </div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Books</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<script>
	//Telling Angular to use our module with ng-app
	//Second parameter of module is a blank array
	var myApp = angular.module("myApp", []);

	myApp.service('myservice', ['$http', '$q', function ($http, $q) {
	var entries = [];

	function getData(){
	var bookList = [];
	var bookFeed = "https://spreadsheets.google.com/feeds/list/insert_your_spreadsheet_key_here/od6/public/values?alt=json&callback=JSON_CALLBACK";
	$http.jsonp(bookFeed)
	.success(function(data){
	angular.forEach(data.feed.entry, function(entryX){
	bookList.push(entryX);
	});
	angular.copy(bookList, entries);
	})
	.error(function (data) {
	$scope.data = "Request failed";
	});
	}
	return {
	getData: getData,
	entries: entries
	};
	}]);
	myApp.controller('books', function ($scope, myservice) {
	$scope.message = "";
	$scope.entries = myservice.entries;
	myservice.getData();
	});
	</script>
	<style>
	body {
	margin: 0;
	padding: 0;
	text-align: center;
	}
	#container {
	width: 99%;
	margin: 0 auto;
	text-align: left;
	}
	.cell {background-color:#f0f0f0;float: left;overflow: hidden;margin:2px;width:150px;height:250px;vertical-align:middle;}
	.text { margin:3px;text-align:center; }
	img { display: block; margin-left: auto; margin-right: auto; padding:3px}
	</style>
	</head>
	<body>
	<div ng-app="myApp">
	<div id="container" ng-controller="books">
	My Books
	<div ng-repeat="entry in entries">
	<div class="cell">
	<a href="http://a-fwd.com/in=tetitrtr-21&com=webdevetipstr-20&asin={{entry.gsx$asin.$t}}">
	<img ng-src="http://images.amazon.com/images/P/{{entry.gsx$asin.$t}}.01.20MTLZZZ" /></a>
	<p class="text"><a href="http://a-fwd.com/in=tetitrtr-21&com=webdevetipstr-20&asin={{entry.gsx$asin.$t}}"> {{entry.gsx$bookname.$t}}</a></p>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>