July 11th, 2013 
Jijo K Jose multipleViews-AngularJS.html
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/multipleViews_controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.css
/* app css stylesheet */
body {
padding-top: 20px;
}
.phones {
list-style: none;
}
.thumb {
float: left;
margin: -1em 1em 1.5em 0em;
padding-bottom: 1em;
height: 100px;
width: 100px;
}
.phones li {
clear: both;
height: 100px;
padding-top: 15px;
}
multipleViews_controllers.js
'use strict';
/* Controllers */
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
//PhoneListCtrl.$inject = [‘$scope’, ‘$http’];
function PhoneDetailCtrl($scope, $http, $routeParams) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
$scope.phoneId = $routeParams.phoneId;
}
//PhoneDetailCtrl.$inject = [‘$scope’, ‘$routeParams’];
app.js
'use strict';
/* App Module */
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!–Sidebar content–>
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
<option value="snippet">Snippet</option>
<option value="-name">Desc Alphabetical</option>
<option value="-age">Desc Newest</option>
<option value="-snippet">Snippet</option>
</select>
</div>
<div class="span10">
<!–Body content–>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
phone-detail.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!–Sidebar content–>
<a href="multipleViews-AngularJS.html">Go Back</a>
</div>
<div class="span10">
<!–Body content–>
<h2> <center> <br />TBD: detail view for {{phoneId}} <br /> <br /> </center> </h2>
<ul class="phones">
<li ng-repeat="phone in phones | filter:phoneId | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
