Angularjs handles login and login

Question

I use a third-party account on the client side, then I have <ng-view> for each route, so this means all navigators will just reboot within <ng-view> .

then I have a global footer that displays user-registered information about each partial part. So I put it under <ng-view> . There will be something like this

 <ng-view></ng-view> <div ng-controller="FooterCtrl">User logged-in Info</div> 

My problems FooterCtrl will not display user information entered into the system after logging in, because only for logging in the restart <ng-view> not a complete reboot. (unless I refresh the page manually using F5).

My questions:

• How can I hide FooterCtrl when the user is not logged in.
• Where should I put FooterCtrl?

Answer 1

In your FooterCtrl controller FooterCtrl watch for route changes.

Whenever a route changes, select whether the user is registered or not.

Thus, your code will look something like this: in your controller, enter the following code:

 $scope.$on('$routeChangeStart', function (next, current) { //Get the current state of the user log in. //Accordingly, set the variable //If user is logged in $scope.userIsLoggedIn = true; //Else $scope.userIsLoggedIn = false; }); 

Thus, your area is now aware that the user is logged in or not each time the route changes, which I assume if your application is configured correctly, every time a different template is loaded into ng-view .

Now your presentation may be as simple as:

 <div ng-view> </div> <div ng-controller="FooterCtrl"> <footer ng-show="userIsLoggedIn"> <!-- Info to show when user is logged in --> </footer> <footer ng-hide="userIsLoggedIn"> <!-- Info to show when user is NOT logged in --> </footer> </div> 

Thus, your footer displays data based on the user's login state. Each time the viewing template is changed, the controller will determine the login state and display the view accordingly.