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

app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .when('/admin', '/admin/dashboard')
    .when('/user', '/user/dashboard')
    .otherwise('/admin/dashboard');

  $stateProvider
    // .state('admin', {
    //   url: '/',
    //   abstract: true
    // })      
    .state('admin', {
      url: '/admin/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },      
      views: {
        'navigation': {
          template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
        },
        'content': {
          template: '<div>admin dashboard</div>'
        }
      }
    })
    .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
      url: '/admin/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      views: {
        'navigation': {
          template: '<div>admin navigation</div>'
        },
        'content': {
          template: '<div>admin link1</div>'
        }
      }
    })
    .state('user', {
      url: '/user/dashboard',
      views: {
        'navigation': {
          template: '<div>user navigation</div>'
        },
        'content': {
          template: '<div>user dashboard</div>'
        }
      }
    });
});

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js" data-semver="1.2.19"></script>
    <script data-require="angular-ui-router@0.2.10" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="app.js"></script>
    
    <style>
      div {
        border: 1px solid gray;
        padding: 5px;
      }
    </style>
    
  </head>

  <body ng-app="plunker">
    <div>
      <a ui-sref="admin">Admin</a>
      <a ui-sref="user">User</a>
    </div>
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>  
  </body>

</html>
/* Put your css in here */