angular.js: Dynamic navigation depending on login status

Question

I have following routing with athentication, which is done via a PHP-Script and MySQL:

app.config

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            templateUrl: 'partials/login.html',
            controller: 'authCtrl'
        })
        .when('/logout', {
            title: 'Logout',
            templateUrl: 'partials/login.html',
            controller: 'logoutCtrl'
        })

        .when('/dashboard', {
            title: 'Dashboard',
            templateUrl: 'partials/dashboard.html',
            controller: 'authCtrl'
        })
        .otherwise({
            redirectTo: '/login'
        });
  }])
    .run(function ($rootScope, $location, Data) {
        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            $rootScope.authenticated = false;
            Data.get('session').then(function (results) {
                if (results.uid) {
                    $rootScope.authenticated = true;
                    $rootScope.uid = results.uid;
                    $rootScope.name = results.name;
                    $rootScope.email = results.email;
                } else {
                    var nextUrl = next.$$route.originalPath;
                    if (nextUrl == '/signup' || nextUrl == '/login') {

                    } else {
                        $location.path("/login");
                    }
                }
            });
        });
    });

authCtrl

app.controller('authCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) {
    $scope.login = {};
    $scope.signup = {};
    $scope.doLogin = function (customer) {
        Data.post('login', {
            customer: customer
        }).then(function (results) {
            Data.toast(results);
            if (results.status == "success") {
                $location.path('dashboard');
            }
        });
    };
    $scope.logout = function () {
        Data.get('logout').then(function (results) {
            Data.toast(results);
            $location.path('login');
        });
    }
});

Now I want to change the navigation depending on the login-status. If user is logged in there should bei a logOUT-Button and a link to the dashboard. If the user isn't logged in it should look like this

sample for unlogged-in user

 <header id="navigation">
     <nav id="main">
         <ul>
             <li id="login"><a href="#/login" class="btn"><i class="fa fa-power-off"></i> Login</a></li>
         </ul>
     </nav>
 </header>
 <main ng-view>
    Content goes here
 </main>

What is the best way for creating the navigation? Should it be a seperate template?

Answer 1

When things get complex, I'd rather use ui-router or maybe angular new router (haven't try this one yet) since they support multiple views in the same page. Thus nav becomes its own view, content its own view, etc. And to communicate between the views I'll use message passing with data in either $rootScope or some kind of shared state service.

So something like this... in the beginning, the login shared state is set to logged out . As the last part of login functionality, I'd set the login shared state and set it to logged in . Like I said, I rather make this a shared state service call since I can have it to also do $rootScope.$broadcast some sort of onLoginStateChange and pass the new value there.

Then I'd set up my nav view to listen to this onLoginStateChange using $scope.$on and set its internal view model state in its controller and bind that to ng-if directive so it will display Login if false , or Logout if true (logged in).