<!DOCTYPE html>
<html ng-app='MyModule'>

  <head>
    <link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    
  
    <my-header></my-header>
    
    <div class='container' ng-controller='articleCtrl'>
      <!-- angularJs readed test -->
      <div class='row'>
        <input type='text' ng-model='name' placeholder='UserName' />
        <div>
          hello, {{name}}
        </div>
      </div>
      
      <div class='row'>
        <div class='span12'>
          
          <user-list></user-list>
          
        </div>
      </div>  
    </div>
  
    <my-footer></my-footer>
    
    <!-- scripts road -->
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

var MyModule = angular.module('MyModule', []);

MyModule.directive('myHeader', function(){
  return {
    restrict : 'E',
    link : function(scope, element, attr){
    },
    templateUrl : 'header.html'
  };
});

MyModule.directive('myFooter', function(){
  return {
    restrict : 'E',
    link : function(scope, element, attr){
    },
    templateUrl : 'footer.html'
  };
});

MyModule.directive('userList', function(){
  return {
    restrict : 'E',
    link : function(scope, element, attr){
    },
    templateUrl : 'userlist.html'
  };
});

MyModule.controller('articleCtrl', function($scope){
  $scope.users = [
    { _id: 125 , username: 'Tom'    },
    { _id: 224 , username: 'Dick'   },
    { _id: 314 , username: 'Harry'  },
    { _id: 451 , username: 'Bob'    },
    { _id: 515 , username: 'George' },
    { _id: 653 , username: 'Sally'  }
  ];
  
});

/* Styles go here */


<header>
  <div class='container' id='mainHeader'>
    <h1>HEADER</h1>
  </div>
</header>
<footer>
  <div class='container' id='mainFooter'>
    <h1>FOOTER</h1>
  </div>
</footer>
<table class='table'>
    <thead>
        <th>ID</th>
        <th>NAME</th>
        <th>EDIT</th>
    </thead>
    <tbody>
    <tr ng-repeat='user in users'>
      <td>{{user._id}}</td>
      <td>{{user.username}}</td>
      <td><button class='btn btn-primary'>EDIT</button></td>
    </tr>
  </tbody>
</table>