<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Welcome to BooKart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="headerWrapper" ng-controller="HeaderCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline pull-left">{{appDetails.tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li ng-class="{active: nav.isActive('/books')}"><a href="#/books">Books</a></li>
<li ng-class="{active: nav.isActive('/kart')}"><a href="#/kart">Kart</a></li>
</ul>
</div>
</div>
<div ng-view class="container"></div>
</body>
</html>
#headerWrapper {
width: 100%;
height: 80px;
}
.logo {
padding: 10px;
margin-right: 10x;
font-size: 35px;
font-family: fantasy;
}
.tagline {
font-size: 10px;
margin-top: 50px;
margin-left: -123px;
font-family: monospace;
}
.nav-wrapper {
margin-left: 100px;
margin-top: 15px;
}
#bookListWrapper {
width: 100%;
padding: 10px;
}
#bookListWrapper input {
width: 25%;
}
#bookListWrapper .book {
border: 1px solid gray;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
#bookListWrapper .book .book-details {
margin-left: 160px;
}
.container.ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
}
.container.ng-enter-active {
opacity:1;
}
.book.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
left: 0;
}
.book.ng-leave-active {
opacity:0;
left: 600px;
}
.book.ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
left: 600px;
}
.book.ng-enter-active {
opacity:1;
left: 0;
}
var myApp = angular.module("myApp", ["ngRoute", "ngAnimate"]);
myApp.config(function($routeProvider) {
$routeProvider
.when("/books", {
templateUrl: "book-list.html",
controller: "BookListCtrl"
})
.when("/kart", {
templateUrl: "kart-list.html",
controller: "KartListCtrl"
})
.otherwise({
redirectTo: "/books"
});
});
myApp.factory("kartService", function() {
var kart = [];
return {
getKart: function() {
return kart;
},
addToKart: function(book) {
kart.push(book);
alert("Added to Kart");
},
buy: function(book) {
alert("Thanks for buying: " + book.name);
}
}
});
myApp.factory("bookService", function() {
var books = [
{
imgUrl: "http://via.placeholder.com/130x200",
name: "Adultery",
price: 205,
rating: 4,
binding: "Paperback",
publisher: "Random House India",
releaseDate: "12-08-2014",
details: "Linda, in her thirties, begins to question the routine and predictability of her days. In everybodys eyes, she has a perfect life-happy marriage, children and a career. Yet what she feels is an eno... <a href='#'>View More<a>"
},
{
imgUrl: "http://via.placeholder.com/130x200",
name: "Geronimo Stilton Spacemice#2 : You're Mine, Captain!",
price: 168,
rating: 5,
binding: "Paperback",
publisher: "Scholastic",
releaseDate: "01-07-2014",
details: "Geronimo Stilton meets outer space in this cosmically fun spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo Stilton of a parallel universe! He is captain of the spaceship Mou... View More"
},
{
imgUrl: "http://via.placeholder.com/130x200",
name: "Life or Death",
price: 339,
rating: 4,
binding: "Paperback",
publisher: "Hachette India",
releaseDate: "01-04-2014",
details: "Why would a man escape from prison the day before he's due to be released? Audie Palmer has spent a decade in prison for an armed robbery in which four people died, including two of his gang. Five... View More"
},
{
imgUrl: "http://via.placeholder.com/130x200",
name: "Playing It My Way : My Autobiography",
price: 599,
rating: 5,
binding: "Hardcover",
publisher: "Hodder & Stoughton",
releaseDate: "01-08-2014",
details: "I knew that if I agreed to write my story, I would have to be completely honest, as thats the way I have always played the game and that would mean talking about a number of things I have not addr... View More"
},
{
imgUrl: "http://via.placeholder.com/130x200",
name: "The Fault in Our Stars",
price: 227,
rating: 4.5,
binding: "Paperback",
publisher: "Penguin Books Ltd",
releaseDate: "25-01-2013",
details: "Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. But when a gorgeous plot twist n... View More"
},
{
imgUrl: "http://via.placeholder.com/130x200",
name: "Wings of Fire: An Autobiography",
price: 124,
rating: 5,
binding: "Paperback",
publisher: "Universities Press",
releaseDate: "25-08-2000",
details: "Wings of Fire traces the life and times of India's former president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well as his growth as India's Missile Man. Summary of the Book Wings... View More"
}
];
return {
getBooks: function() {
return books;
}
}
});
myApp.controller("KartListCtrl", function($scope, kartService) {
$scope.kart = kartService.getKart();
$scope.buy = function(book) {
//console.log("book: ", book);
kartService.buy(book);
}
});
myApp.controller("BookListCtrl", function($scope, bookService, kartService) {
$scope.books = bookService.getBooks();
$scope.addToKart = function(book) {
kartService.addToKart(book);
}
});
myApp.controller("HeaderCtrl", function($scope, $location) {
$scope.appDetails = {};
$scope.appDetails.title = "BooKart";
$scope.appDetails.tagline = "We have collection of 1 Million books";
$scope.nav = {};
$scope.nav.isActive = function(path) {
if (path === $location.path()) {
return true;
}
return false;
}
});
<div id="bookListWrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search here..."
ng-model="searchStr">
</div>
</form>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in books | filter:searchStr"
style="background: white url('{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price | currency:'Rs.'}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding | uppercase}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
</div>
</li>
</ul>
</div>
<div id="bookListWrapper">
<p>Please click on buy button to buy the book.</p>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in kart"
style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price | currency:'Rs.'}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding | uppercase}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="buy(book)">Buy</button>
</div>
</li>
</ul>
</div>