Как отображать содержимое боковой панели с помощью углового ui-router?

Question

На домашней странице у меня есть боковая панель и основное содержимое, когда я нажимаю на элементы боковой панели, я хочу отображать содержимое боковой панели в правой части, где у меня есть основное содержание. Я хочу, чтобы фиксированная боковая панель на всех страницах содержала только основной контент, который должен изменять и отображать данные на основе состояний. Как я могу достичь этой задачи с помощью маршрутизации angularjs?

home.html

<div class="row"> 
    <div class="col s3"> 
     <div> 
      <ul> 
       <li ui-sref="desktop"> Desktop</li> 
       <li ui-sref="laptop"> Laptops</li> 
       <li ui-sref="monitor"> Monitors</li> 
      </ul> 
     </div> 
    </div> 
    <div class="col s9"> 
     <h1>Main Content</h1> 
    </div> 
</div> 

routes.js

angular.module('computerTrading').config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'views/home.html', 
     controller: 'MainController' 
    }) 
    .state('contact',{ 
     url:'/contact', 
     templateUrl:'views/contact.html', 
     controller:'ContactController' 
    }). 
    state('inventory',{ 
    url:'/inventory', 
    templateUrl:'views/inventory.html', 
    controller:'InventoryController' 
    }). 
    state('laptop',{ 
     templateUrl:'views/laptop.html', 
     controller:'LaptopController' 
    }) 
    . 
    state('desktop',{ 
     templateUrl:'views/desktop.html', 
     controller:'DesktopController' 
    }) 
    . 
    state('monitor',{ 
     templateUrl:'views/monitor.html', 
     controller:'MonitorController' 
    }); 
}); 

Answer 1

Вам потребуется ui-directive в вашей col s9 части:

<div class="row"> 
    <div class="col s3"> 
     <div> 
      <ul> 
       <li ui-sref="desktop"> Desktop</li> 
       <li ui-sref="laptop"> Laptops</li> 
       <li ui-sref="monitor"> Monitors</li> 
      </ul> 
     </div> 
    </div> 
    <div class="col s9"> 
     <h1>Main Content</h1> 
     <div ui-view></div><!--you need this--> 
    </div> 
</div> 

Вот working plnkr