Multiple view for Single Router in angularjs

Question

I have a common HTML where the header got to change after login.

<div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand"></h3>
              <ul class="nav masthead-nav">
                <li class="active"  ng-show="NotLoggedIn" ><a href="#/login">Login &nbsp;<b>|</b></a></li>
                <li  ng-show="NotLoggedIn"><a href="#/register">Register</a></li>
              <li class="active"  ng-show="LoggedIn" ><a href="#/login">Welcome &nbsp;{{UserName}}<b>|</b></a></li>
                <li  ng-show="LoggedIn" ><a href="#/register">LogOut</a></li>

              </ul>
            </div>
          </div>

          <div ng-view class="mailContent">

          </div>

app.js

app.config(function($routeProvider){

    $routeProvider.when('/',{
        templateUrl : 'template/home.html',
        controller : 'HomeController'
    })
    .when('/login',{
        templateUrl :'template/login.html',
        controller : 'LoginController'

    })
    .otherwise({ redirectTo :'/'});
});

once the login in success NotLoggedIn should hide and LoggedIn should show. How to achieve this scenario.

Aravindh Venkat · Accepted Answer · 2014-05-16 13:24:33Z

1

ou can use ng-if in AngularJS. You have to assign a boolean value for ng-if. So that the DOM which is having the value false will get removed and the one which is having true will be displayed

<ul class="nav masthead-nav">
  <li class="active"  ng-if="NotLoggedIn" >
        <a href="#/login">Login &nbsp;<b>|</b></a>
  </li>
  <li  ng-if="NotLoggedIn">
        <a href="#/register">Register</a>
  </li>
  <li class="active"  ng-if="LoggedIn" >
        <a href="#/login">Welcome &nbsp;{{UserName}}<b>|</b></a>
  </li>
  <li  ng-if="LoggedIn" >
       <a href="#/register">LogOut</a>
  </li>
</ul>

answered May 16, 2014 at 13:24

Aravindh Venkat

1151 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

null · Accepted Answer · 2014-05-16 05:33:52Z

0

Create a service that maintains the login state of the user so that this information can be shared amongst controllers.

Inject the service into the login controller to perform the actual login.

Inject the service into main controller to have access to the state and adjust the user interface accordantly.

answered May 16, 2014 at 5:33

null

7,9163 gold badges39 silver badges38 bronze badges

Comments

NEOLPAR · Accepted Answer · 2014-05-16 12:59:00Z

0

You could put the two headers in the top of pages and use "ng-if" directive to enable/disable the desire template. For example:

'LoginController'

$scope.currentSection = "login";


'index.html'

<div ng-if="currentSection === login" ng-include="'views/headerLogOut.html'"></div>
<div ng-if="currentSection !== login" ng-include="'views/headerLogoIn.html'"></div>

answered May 16, 2014 at 12:59

NEOLPAR

3821 silver badge6 bronze badges

Collectives™ on Stack Overflow

Multiple view for Single Router in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related