AngularJS Program 6 – Multiple view pages using ng-view directive

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>


 

You can leave a response, or trackback from your own site.

Leave a Reply