AngularJS Routing

<!DOCTYPE html>
<html ng-app="RoutingApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="angular-route@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="MainController.js"></script>
  <script src="PostController.js"></script>
  <script src="DetailsController.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="MainController">
  {{info}}
  
  <div class="divTable">
    <div class="divRow">
      <div class="divHeader">Employee Name</div>
      <div class="divHeader">User Name</div>
      <div class="divHeader">Email</div>
    </div>
    <div class="divRow" ng-repeat="user in users track by $index">
      <div class="divCell"><a href="#/users/{{user.id}}">{{user.name}}</a>
      </div>
      <div class="divCell">{{user.username}}</div>
      <div class="divCell">{{user.email}}</div>
    </div>

  </div>
<div ng-view>
</div>


</body>

</html>

.divTable{
  display:table;         
  width:auto;         
  background-color:#eee;         
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.divRow{
  display:table-row;
  width:auto;
  clear:both;
}
.divCell{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  background-color:#ccc;  
}
.divHeader{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  background-color:Gray;  
  font-weight:bold;
  color:white;
}

.details {
  width:90%;   
    border: 2px solid;
    border-radius: 25px;
    padding:20px;
    background-color:#ccc;
}

(function(){
var MainController = function($scope, $http) {

  console.log("MainController");

  var onUsersSuccess = function(response) {
    console.log("onUsersSuccess");
    $scope.user = response.data;

  };

  var onUsersError = function() {
    $scope.info = "Error retrieving User data";
  };

  $http.get("http://jsonplaceholder.typicode.com/users")
    .then(onUsersSuccess, onUsersError);



};

//Register controller with module
//angular.module("RoutingApp").controller("MainController", MainController);
app.controller("MainController", MainController);
})();

(function(){
app = angular.module("RoutingApp", ['ngRoute']);

var configurationFuntion = function($routeProvider) {
  $routeProvider.
  when('/users', {
      templateUrl: 'users.html',
    }).
    when('/users/:userId',{
       templateUrl : 'userdetails.html',
       controller : 'DetailsController'
    }).
     when('/posts/:userName/:userId',{
       templateUrl : 'posts.html',
       controller : 'PostController'
    }).
     otherwise({
        redirectTo: '/users'
     });
  }

  app.config(['$routeProvider', configurationFuntion]);
})();

<h2>Posts by {{userName}}</h2>

<div ng-repeat="post in posts">
    <div class="details">
    <strong>{{post.title}}</strong>
    <p><em>{{post.body}}</em></p>
    </div>
    <br>
  </div>

(function(){
var PostController = function($scope, $http,$routeParams) {
  
  console.log("PostController");

  var onPostSuccess = function(response) {
    console.log("onPostSuccess");
    $scope.userName = $routeParams.userName;
    $scope.posts = response.data;

  };

  var onPostError = function() {
    $scope.info = "Error retrieving Post data";
  };

  $http.get("http://jsonplaceholder.typicode.com/posts/?userId=" + $routeParams.userId)
    .then(onPostSuccess, onPostError);



};

//Register controller with module
app.controller("PostController", PostController);
})();

<br>
<div class="details">
  
  <div><strong>User Name:</strong> {{userDetails.username}}</div>
  <div><strong>Phone:</strong> {{userDetails.phone}}</div>
  <div><strong>Website:</strong> {{userDetails.website}}</div>
  <h3>Address</h3>
  <div><strong>Street:</strong>{{userDetails.address.street}}</div>
  <div><strong>Suite:</strong>{{userDetails.address.suite}}</div>
  <div><strong>City:</strong>{{userDetails.address.city}}</div>
  <div><strong>Zip code:</strong>{{userDetails.address.zipcode}}</div>
  
  <div><a href="#/posts/{{userDetails.name}}/{{userDetails.id}}">Go to Posts >></a></div>
</div>

(function(){
var DetailsController = function($scope, $http,$routeParams) {

  console.log("DetailsController");

  var onDetailsSuccess = function(response) {
    console.log("onDetailsSuccess");
    $scope.userDetails = response.data;

  };

  var onDetailsError = function() {
    $scope.info = "Error retrieving Post data";
  };

  $http.get("http://jsonplaceholder.typicode.com/users/" + $routeParams.userId)
    .then(onDetailsSuccess, onDetailsError);



};

//Register controller with module
app.controller("DetailsController", DetailsController);
})();