javascript - Angular partials in some views using ui-router -

i'm building mean application , having troubles dealing ui-router. have index.html have template of entire website header, sidebar , content place <div ui-view>. in file load every javascript necessary angular, ui-router, bootstrap, oclazyload, etc.

every partial view placed in index.html content ui-router states. ui-router configured way:

myapp.config(function ($stateprovider, $urlrouterprovider) {      $stateprovider          .state('home', {         url: '/home',         templateurl: '../views/home.html',         resolve: {             deps: ['$oclazyload', function ($oclazyload) {                 return $oclazyload.load([{                     name: 'myapp',                     files: [                         'js/controllers/homectrl.js'                     ]                 }]);             }]         }     }) }); 

up have controlled. problem this: how can create state login.html not have header , sidebar, because if user not logged in don't want show options login. how safest , best way achieve this?

thanks in advance.

my website shared same case you. did have 2 states: login , home. login state point login page , home state point home.html. here example of home.html:

<div id="wrapper" ng-class='{"toggled" : $root.toggle }'>   <div ng-include="'components/sidebar/sidebar.html'"></div>   <div ng-include="'components/navbar/navbar.html'"></div>     <div id="page-content-wrapper">         <div class="container-fluid">         <!-- <ui-breadcrumbs displayname-property="data.displayname" abstract-proxy-property="data.proxy" ></ui-breadcrumbs> -->         <ui-breadcrumbs displayname-property="data.displayname" template-url="components/breadcrumb/uibreadcrumbs.tpl.html"></ui-breadcrumbs>             <div ui-view="home"></div>         </div>     </div> </div> 

so states after user login should children state of home