Using ui-router to handle states and views for Angular applications

<!DOCTYPE html>
<html>

<head>

  <!-- CSS (load bootstrap) -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="sidebar.css">
  <link rel="stylesheet" href="main.css">
  <style>
    .navbar {
      border-radius: 0;
    }
  </style>

  <!-- JS (load angular, ui-router, and our custom js file) -->
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>

<!-- apply our angular app to our site -->

<body ng-app="routerApp">

  <!-- NAVIGATION -->


  <!-- MAIN CONTENT -->
  <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
  <div class="container" ng-controller="mainController">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        
        <li><a ui-sref="admin">Admin</a></li>
      </ul>
    </nav>
    <div class="row">
      <div class="col-md-3" ng-show="isAdmin()">
        <div ui-view="columnOne"></div>
      </div>
      <div class="col-md-{{isAdmin() ? 9 : 12}}">

        <div ui-view class="content"></div>
        <div class="text-center navbar-inverse footer">
         Footer
        </div>
      </div>
    </div>
  </div>



</body>

</html>

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/home');

  $stateProvider.state('admin', {
    url: '/admin',
    views: {
      '': {
        templateUrl: 'admin.html',
        controller: 'nickController'
      },
      'columnOne': {
        templateUrl: 'admin-sidebar.html'

      }
    }

  })



  // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
  .state('home', {
    url: '/home',
    views: {
      '': {
        templateUrl: 'partial-about.html'
      },
      'columnOne@home': {
        template: 'Look I am a column!'
      },
      'columnTwo@home': {
        templateUrl: 'table-data.html',
        controller: 'nickController'
      }
    }

  });

});

routerApp.controller('mainController', function($scope, $location) {
  $scope.isAdmin = function(viewLocation) {

    return '/admin' === $location.path();
  };
});

routerApp.controller('nickController', function($scope, $location) {
  $scope.message = 'test';

  $scope.scotches = [{
    name: 'Macallan 12',
    price: 50
  }, {
    name: 'Chivas Regal Royal Salute',
    price: 10000
  }, {
    name: 'Glenfiddich 1937',
    price: 20000
  }];

});

# Demonstration of AngularUI Router
Code and demo by Nick Satija

<div class="jumbotron text-center">
    <h1>The Home Page</h1>
    
</div>

<div class="row">

    <div class="col-sm-6">
        <div ui-view="columnOne"></div>
    </div>
    
    
    <div class="col-sm-6">
        <div ui-view="columnTwo"></div>
    </div>

    
</div>

<h2>Fine Scotches</h2>

<table class="table table-hover table-striped table-bordered">
    <thead>
        <tr>
            <td>Name</td>
            <td>Cost</td>
        </tr>
    </thead>
    <tbody>
    
        <tr ng-repeat="scotch in scotches">
            <td>{{ scotch.name }}</td>
            <td>${{ scotch.price }}</td>
        </tr>
        
    </tbody>
</table>

<div class="side-bar">
                <ul class="menu">
                  
                        <li>
                            <a href="#">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#" class="active">Love snippet<span class="glyphicon glyphicon-heart pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Like it? <span class="glyphicon glyphicon-star pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Settings <span class="glyphicon glyphicon-cog pull-right"></span></a>
                        </li>
                    
                    
                </ul>
    	    </div>

@import url(http://fonts.googleapis.com/css?family=Lato);





.side-bar ul
{
    list-style:none;
    padding:0px;
    
}



.side-bar ul li  a 
{
  background:#ccc;
    color:#fff;
    text-decoration:none;
    display:inline-table;
    width:100%;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
}

.side-bar ul li  a:hover
{
    border-left:3px solid #ECECEA;    
    padding-left:17px;
}

.side-bar ul  li  a.active
{
    padding-left:17px;
    background:#D9853B;
    border-left:3px solid #ECECEA;
}

.side-bar ul  li  a.active:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
	
	border-left: 7px solid #D9853B;
    margin-top: -10px;
    margin-left: 180px;
}

<h1>Admin</h1>

.content {
  min-height: calc(100vh - 110px);
}

.navbar {
    
    min-height: 50px;
    margin-bottom: 0px;
    
}
.side-bar
{
    background:#333;
    min-height: calc(100vh - 40px);
    height:100%;
    width:100%;
    color:#fff;
    transition: margin-left 0.5s;
}
.footer{
    background:#333;
  color:#fff;
  padding:10px 0;
  margin-left: -30px;
}