Clever Geek Handbook

How do I use a controller to show and hide the login link?

I am creating a phone book application where I created a login system. When the user logs in successfully, the login button will be hidden. Perhaps I am doing it wrong.

//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 can I find it?
  • Explain how the controller updates the view on login or logout.
+3


source to share


1 answer


As mentioned in one of the comments, basic ng-show

or ng-hide

should do the trick. However, you need to have a solid understanding and solid foundation of how AngularJs works in order to have the correct login and logout page with the correct functionality, as well as a proper presentation of the UI logic.

My suggestion is to use service

or factory

in AngularJs to reduce the code base and also to simplify the login process. There will be times when you need to store some custom information, and a service or factory can actually be useful for these kinds of situations.

Before giving you a solution, let me first comment on your code and answer the three above questions.

  • Get rid of the jquery mentality when using AngularJs

    This is one of the most important parts when you first start learning AngularJs. As with the code example above, use $http

    queries instead of using $.ajax

    .

  • You need to understand the life cycle of AngularJs components

    Understanding what the life cycle is $scope

    . The glue between the app controller and the view basically answers your question. Here are some good resources: Angular scopes , Lifcycle of controller

  • Read Angular factory and service

    As mentioned above, factories and services are good tools for shrinking your code base. If you are requesting resources for learning AngularJs, then one of the good sites is the Angular site .

So here is a very simple plnkr I created for you, hopefully it can give you some basic ideas. Few things to note:



  • I used ui.router

    for routing. It may be biased here, but it's just amazing. If you're confused about plnkr, just assume that it just ngRoute

    does the job.
  • The code in plnkr is clearly for illustrative purposes and cannot be used in actual work. Real applications can be more complex. I didn't even write a plnkr login login. But I see that you are capable of doing this since you are writing something in your controller.

Conclusion / TL; DR: The main point of the 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

should be an expression computed based on logic logic; and of course use ng-hide

to do otherwise.

+4


source






More articles:


All Articles