AngularJS Master Detail Demo

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="medsApp" >
    <!-- Main view goes here -->

    <div class="container">
      <div class="row">
        <div class="col-sm-3" ng-controller="MainCntl">
          <div class="list-group">
            <a href="#/detail/{{med.id}}" class="list-group-item" ng-repeat="med in meds">
              {{med.name}}
            </a>
          </div>

        </div>
        <div class="col-sm-9">
          Detail
      <div ng-view></div>
        </div>
      </div>
    </div>
        
    <!-- Scripts at end of page for faster page load -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-sanitize.min.js"></script>
    <script type="text/javascript">
      //this is here to make plunkr work with AngularJS routing
      angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
    </script>
    <script src="App.js"></script>
  </body>

</html>

angular.module('medsApp', ['ngRoute', 'ngSanitize'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider.
    when("/", {
      templateUrl: 'detail.html',
      controller: MainCntl
    }).
    when("/detail/:id", {
      templateUrl: 'detail.html',
      controller: DetailCntl
    }).
    otherwise({
      redirectTo: '/'
    });
    $locationProvider.html5Mode(true);
  })
  .service('db', function() {
    var meds = [{
      "id": "1",
      "name": "Judith",
      "dob":"Jan 13th 1990"
    }, {
      "id": "2",
      "name": "Fiyona",
      "dob":"Aug 03rd 1991"
    }, {
      "id": "3",
      "name": "James",
      "dob":"March 12th 1970"
    }];

    return {
      getMeds: function(medid) {
        if (medid === 0) {
          return meds;
        } else {
          return meds[medid - 1];
        }
      }
    };
  });

AppCntl.$inject = ['$scope', '$route'];
function AppCntl($scope, $route, $location) {
  $scope.$route = $route;
}

function MainCntl($scope, db, $route, $location) {
  $scope.meds = db.getMeds(0);

  //$scope.message = "ID = " + $route.current.params.id;
}
 

function DetailCntl($scope, db, $route, $location) {
  //$scope.meds = db.getMeds($route.current.params.id);
  $scope.pt = db.getMeds($route.current.params.id);
}

/* Styles go here */
body {padding:10px;}

<div class="jumbotron" ng-show="pt">
  ID: {{pt.id}}
  <BR/>
  <h3>{{pt.name}}</h3>
  <div class="text-danger">
    {{pt.dob}}
  </div>
</div>
<div class="jumbotron" ng-hide="pt">
  Select user from list
</div>

# AngularJS Master Detail Demo

**Author**: Jayesh Chandrapal

Note: Please edit and run the demo to see the
actual content.

Copyright © 2014-2015 [www.jayeshcp.com](www.jayeshcp.com) All rights Reserved.

Email: <me@jayeshcp.com>