Basic top navigation with ngRoute

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

<head>
  <!-- Bootstrap 3 -->
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <link data-require="bootstrap-css@~3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  
  <!-- Angular -->
  <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 src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
  
  <!-- App -->
  <script src="app.js"></script>
  <script src="UsersService.js"></script>
  <script src="HeaderController.js"></script>
  <script src="HomeController.js"></script>
  <script src="UsersController.js"></script>
  
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#/home">Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse" ng-controller="HeaderController as header">
        <ul class="nav navbar-nav">
          <li ng-class="{ active: header.isActive('/home')}"><a href="#/home">Home</a>
          </li>
          <li ng-class="{ active: header.isActive('/users')}"><a href="#/users">Users</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div ng-view class="container-fluid slide"></div>
</body>

</html>

/* Styles go here */

# Basic website example using Bootstrap 3
Demonstrates a simple website with a top navigation using `ngRoute` and `ng-view`.

##AngularJS Features
- Modules:
  - ngRoute
- Directives:  
  - ng-controller (using controller as notation)
  - ng-class
  - ng-view

##Structure
- There are two sections:
  - Homepage, 'Home' section with route: `/` or `/home`. 
  - Users list, 'Users' seciton with route `/users`. Displays a User list.

#Versions
- 1.0
  - Added Bootstrap 3 responsive navigation bar
  - Added `isActive(route)` to highlight active section
  - Applied [John Papas Guidelines](https://github.com/johnpapa/angular-styleguide) to code 

#More Information
You can read a post explaining more details [here](http://bit.ly/ngNewRouter)

/**
 * My app module
 */
angular
  .module('myapp', [
    'ngRoute'
  ]);

// Routing setup
angular
  .module('myapp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        controller: 'HomeController',
        controllerAs: 'home',
        templateUrl: 'home.tpl.html'
      }).when('/users', {
        controller: 'UsersController',
        controllerAs: 'users',
        templateUrl: 'users.tpl.html'
      }).otherwise({
        // default page
        redirectTo: '/home'
      });
  });

<h1>Hello {{home.name}}</h1>

<h1>Users</h1>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Username</th>
      <th>Roles</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users.list">
      <td>{{$index}}</td>
      <td>{{user.username}}</td>
      <td>{{user.roles.join(', ')}}</td>
    </tr>
  </tbody>
</table>

(function() {
'use strict';

/**
 * Users Service
 */
angular
  .module('myapp')
  .factory('UsersService', service);

function service(){
  var get = function() {
    return [{
      username: 'batman',
      roles: ['admin', 'user']
    }, {
      username: 'spiderman',
      roles: ['user']
    }];
  }

  return {
    get: get
  }
}

})();

(function() {
'use strict';

/**
 * Users Controller
 */
angular
  .module('myapp')
  .controller('UsersController', Controller);

Controller.$inject = [
  'UsersService'
];

function Controller(UsersService) {
  var vm = this;
  vm.list = UsersService.get();
}

})();

(function() {
'use strict';

/**
 * Home Controller
 */
angular
  .module('myapp')
  .controller('HomeController', Controller);

function Controller() {
  var vm = this;
  vm.name = "Plunker";
}

})();

(function() {
'use strict';

/**
 * Header Controller
 */
angular
  .module('myapp')
  .controller('HeaderController', Controller);

Controller.$inject = [
  '$location'
];

function Controller($location) {
  var vm = this;
  vm.isActive = isActive;
  
  function isActive(route){
    return route === $location.path();
  }
}

})();