How to use controller to show and hide login link?

Question

I am building a phone directory application, where I have made a Log in system. When user successfully logs in, the login button will hide. Maybe I am doing it in a wrong way.

//html code is
 <ul class="nav navbar-nav pull-right" ng-controller="chklogin as a" ng-switch on="a.logedin" >
        <li class="active"><a href="#/Home">Home</a></li>
         <li ng-switch-default><a href="#/login" >Login {{a.logedin;}}</a></li>

         <li ng-switch-when="true"><a href="#/Dashboard">Dashboard</a></li>
         <li ng-switch-when="true"><a href="#" ng-click="a.logout();">Logout</a></li>
        </ul>

//controller
myApp.controller("chklogin", function() {
this.logedin='false';
        $.ajax({
        url: "process/chklogin.php",
        type: "post"
        }).done(function(res) {

            if (res == 'true') {

            return this.logedin='true';
            }
            else
            {

        return this.logedin='false';
            }
        });

        this.logout= function(){
            $.ajax({
        url: "process/logout.php",
        type: "post"
        }).done(function(res) {

            window.location="#/login";
        });
        }
});

Now tell me what am I doing wrong and what should I do?
What should I learn for this and where I can find it?
Tell me how the controller updates the view when it logs in or logs out.

Its not something difficult to do with Angular http://jsfiddle.net/sravkum/EhTZW/light/ (Docs: https://docs.angularjs.org/api/ng/directive/ngShow) — sk8terboi87 ツ, Sep 17 '14 at 06:44
Thanks for the example and i understand this but i need it in the controller when user login its should be hide through the controller — , Sep 17 '14 at 06:46
First, don't use $.ajax, use $http service instead. Second, do use this.loggedin=false; don't use 'false' string - its truthy - which will cause problems — pixelbits, Sep 17 '14 at 08:06

score 4 · Accepted Answer · edited May 23 '17 at 12:33

As mentioned in one of the comments, basic ng-show or ng-hide shall do the trick. However, you need to have a firm grasp and strong foundation on how AngularJs works in order to have a proper login and logout page, with the correct functionality as well as proper UI logic presentation.

My suggestion is to use service or factory in AngularJs, to reduce code base as well as streamline the login process. There will be times you need to persist some user-information, and service or factory can really be handy for this kind of situation.

Before giving you a solution, let me first comment about your code and also answer the three questions stated.

Get rid of jquery mentality while using AngularJs

This is one of the most crucial part when you first begin learning AngularJs. Like in your code example above, use $http requests instead of using $.ajax.
You need to understand the life cycle of AngularJs' components

Understanding what is the life cycle of $scope i.e the glue between application controller and the view shall basically answer your question. Here are some good resources: Angular scopes, Lifcycle of controller
Read up on Angular's factory and service

As mentioned above, factories and services are good tools to reduce code base. If you are asking for resources to learn AngularJs, then one of the good sites is actually the Angular site itself.

So here is a very simple plnkr which I have created for you, hopefully it will be able to give you some basic insights. Few things to note though:

I used ui.router for the routing. Maybe biased here, but it's just too awesome. In the event you get confused in the plnkr, just treat that this is just ngRoute doing his work.
The code in plnkr is obviously for illustration purposes and cannot be used in real work. Real applications maybe more complex. I didn't even write the login logic in the plnkr. But I see you are capable of doing it, since your did write something in your controller.

Conclusion / tldr: The main gist of code that will do the magic is

<div ng-show='isLoggedIn'>
  <!--content that you want to show after a user has logged in-->
</div>

where isLoggedIn shall be the expression evaluated based on some login logic; and of course, use ng-hide to do otherwise.

Hmm very i really like your answer and its very very help full for me. thanks — , Sep 17 '14 at 08:58

How to use controller to show and hide login link?

1 Answers1