Angular partials in some views using ui-router

Question

I'm building a MEAN application and having troubles dealing with ui-router. I have an index.html where i have the template of the entire website with a header, sidebar and a content where i place <div ui-view>. In this file I also load every javascript necessary like angular, ui-router, bootstrap, ocLazyLoad, etc.

Every partial view are placed in index.html content with ui-router states. My ui-router is configured this 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 to now I have everything controlled. My problem is this: How can i create a state login.html that does not have the header and the sidebar, because if the user is not logged in i don't want to show any options but login. How is the safest and best way to achieve this?

Thanks in advance.

Answer 1

My website shared the same case with you. What I did is I have 2 states: login and home. Login state will point to the login page and home state will point to home.html. Here is 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 all the states that after the user login should be the children state of home