Basic top navigation with ui-router

angular
  .module('myapp', [
    'ui.router',
    'myapp.home',
    'myapp.users'
  ])

.config(Config);

Config.$inject = [
  '$urlRouterProvider',
  '$stateProvider'
];  

function Config($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise('/home'); // default route
  
  $stateProvider.state('home', {
    url: '/home',
    templateUrl: 'home.tpl.html',
    controller: 'HomeController',
    controllerAs: 'home'
  })
  .state('users', {
    url: '/users',
    templateUrl: 'users.tpl.html',
    controller: 'UsersController',
    controllerAs: 'users'
  })
  .state('users.details', {
      url: '/:id',
      templateUrl: 'details.tpl.html',
      controller: 'DetailsController',
      controllerAs: 'details'
  });
}

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
    document.write('<base href="' + document.location + '" />');
  </script>
    <!-- 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@~1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>

    <!-- App -->
    <!-- order is irrelevant after app.js -->
    <script src="app.js"></script>
    <script src="AppController.js"></script>
    <script src="HeaderController.js"></script>
    <!-- home -->
    <script src="home.js"></script>
    <script src="HomeController.js"></script>
    <!-- users -->
    <!-- now dependencies before users -->
    <!-- details -->
    <script src="details.js"></script>
    <script src="DetailsController.js"></script>
    <script src="users.js"></script>
    <script src="UsersController.js"></script>
    <script src="UsersService.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="AppController as app">
    <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="#bs-example-navbar-collapse-1">
            <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" ui-sref="home">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li ui-sref-active="active">
              <a ui-sref="home">Home</a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="users">Users</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div ui-view class="container-fluid slide"></div>
  </body>

</html>

/* Put your css in here */

.user-details {
  background-color: #eee;
  padding-top: 10px;
}

<h1>Hello Plunker</h1>
<p>
  <a href="#/users/34">cross link (href)</a><br/>
  <a ui-sref="users.details({id:34})">cross link (ui-sref)</a>
</p>

<h1>Users</h1>

<table class="table">
  <thead>
    <tr>
      <th>id</th>
      <th>Username</th>
      <th>Roles</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users.list">
      <td>{{user.id}}</td>
      <td><a ui-sref=".details({id:user.id})">{{user.username}}</a></td>
      <td>{{user.roles.join(', ')}}</td>
    </tr>
  </tbody>
</table>
<div ui-view></div>

(function() {
'use strict';

/**
 * Users Service
 */
angular
  .module('myapp')
  .factory('UsersService', Service);
  
Service.$inject = [
  '$filter'
];  

function Service($filter){
  var users = [{
      id: 34,
      username: 'batman',
      roles: ['admin', 'user']
    }, {
      id: 67,
      username: 'spiderman',
      roles: ['user']
    }];
  
  var get = function() {
    return users;
  }
  
  var getById = function(id) {
    if(!id) return {};
    return $filter('filter')(users, {id:id}, true)[0] || {};
  }

  return {
    get: get,
    getById: getById
  }
}

})();

(function() {
'use strict';

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

Controller.$inject = [
  'UsersService'
];

function Controller(UsersService) {
  console.log("Users controller instantiated");
  var vm = this;
  vm.list = UsersService.get();
}

})();

(function() {
'use strict';

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

function Controller() {
  console.log("Home controller instantiated");
  var vm = this;
  vm.name = "Plunker";
}

Controller.prototype.canDeactivate = function() {
  console.log("Home canDeactivate triggered");
  return true;
};

Controller.prototype.deactivate = function() {
  console.log("Home deactivate triggered");
};

Controller.prototype.canActivate = function() {
  console.log("Home canActivate triggered");
  return true;
};

Controller.prototype.activate = function() {
  console.log("Home activate triggered");
};



})();

(function() {
'use strict';

/**
 * App Controller
 */
angular
  .module('myapp')
  .controller('AppController', Controller);

function Controller() {
}

})();

angular
  .module('myapp.home', [
    'myapp.users'
  ]);

angular
  .module('myapp.users', [
    'myapp.details'
  ]);

# Basic website example using Bootstrap 3
Demonstrates a simple website with a top navigation using `ui-router`.

##AngularJS Features
- Modules:
  - ui-router
- Directives:  
  - ng-controller (using controller as notation)
  - ui-sref-active
  - ui-view
  - ui-sref

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

#Versions
- 3.0 
  - ui-router version
- 2.0 
  - Added child route `users/:id` to users
- 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)

angular
  .module('myapp.details', []);

<div class="container-fluid slide user-details">
  <p>Id: {{details.id}}</p>
  <p>Username: {{details.username}}</p>
  <p>Roles: {{details.roles.join(', ')}}</p>
</div>

(function() {
'use strict';

/**
 * Details Controller
 */
angular
  .module('myapp.details')
  .controller('DetailsController', Controller);

Controller.$inject = [
  'UsersService',
  '$stateParams'
];

function Controller(UsersService, $stateParams) {
  console.log("Details controller");
  var vm = this;
  angular.extend(vm, UsersService.getById(parseInt($stateParams.id)));
  console.log(window.location);
}

})();