Q:

how to add a login page using angularjs

in my dynamic web app i am using angularjs to have master page so,
in index.html have ng-view so that i can inject my other pages into ng-view.  so that my menu ,header and foot will be constant. 
index.html
<body ng-app="mainApp" > 
 //header
//menu    
<ng-view></ng-view> 

//footer
</body>`

main.js
     var mainApp = angular.module("mainApp", ['ngRoute']);

   mainApp.config(function($routeProvider) {
$routeProvider 
    .when('/home', {
        templateUrl: 'home.html',

    })
    .when('/business', {
        templateUrl: 'franchiseMainContainer.html', 
    })

    .when('/individual', {
        templateUrl: 'individualLeadMainContainer.html', 

    })
    .when('/newIndividaul', {
        templateUrl: 'newIndividualLead.html', 

    })
     });

till here its fine , the problem is i want to have a login page before loading index.html
where in my login.html i wont have menu,header and footer. 
i want to have login page in the same single page(index.html) , when logging in  i don't want menu footer and header .  how can I achieve this. 
please can any one help me. 

A:

redirect the base page to login page whenever user visit your web then check the user status, logged in or not if logged in redirect to home if not stay in the same page.  as for navigation, menu item etc, a simple way you may create it in separate html document and include it in the page you wanted to show except login page, other alternative you may use angular ng-show/hide.  i have sample workaround based on your code above https://embed.plnkr.co/hs09Tj5p3KNhb8KIqm4i/

