CODEWITHSUNDEEP
angularjs
MChan
MChan

Reputation: 7182

AngularJS using ng-if vs ng-show

In my AngularJS I have the following code where I check if there is a currently logged in user or not in order to switch the top app menu text from Login to Logout (login if no user is logged in) and vice versa. When I used ng-show ng-hide the app started to be extremely heavy so I tried switching to ng-if, but then the css effects on the top menu started not to work specifically in the login/ logout tab. So can someone please tell me what is the best approach to handle this situation with example please? Thanks

index.html 

<div ng-controller="MenuController">
      <li>
          <div ng-if="userLevel() == 1">
              <a href="#/login">Login</a>
          </div>
          <div ng-if="userLevel() == 2">
               <a href="#/logout">Logout</a>
          </div>
      </li>
    </ul>
</div>

Controller:

  controller('MenuController',
    function MenuController($scope, UService){

        $scope.userLevel = function(){                
            var userType = UService.checkULevel(); //This will return either 1, 2,3,4...etc
            return userType;
        };
   });

Upvotes: 3

Views: 3217

Answers (4)

Mimo
Mimo

Reputation: 6075

The difference between ng-show and ng-if is that ng-show applies a display: none to the element when the specified expression is a false value, while the ng-if removes the node from the DOM, basically equivalent to the .empty in jQuery.

An approach you can consider for your element, is rather than using it within a controller, use a directive for the access level, and follow the approach described in this article, which is really flexible and allows you to have different elements in the UI depending on the user level: http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/

Another reason for your application to be slow when you check the user level, could be that every time that is evaluated your application has to perform a check on the server side, slowing the application. An approach for it would be to cache the result of that query, and then use it while the login status doesnt change. At that stage you can invalidate the cache and fetch the user level again, ready to update the UI.

Upvotes: 2

kaushal patel
kaushal patel

Reputation: 54

when ever you use ng-if it will render only that code which satisfy the condition.

while ng-show ng-hide will render the code on page but will be hidden with the help of CSS properties.

so better to use ng-if for reducing the line of code to be rendered on page.

Upvotes: 1

Vamsi
Vamsi

Reputation: 9780

If you use ng-if the node is rendered only when the condition is true

In case of ng-show ng-hide the Nodes will be rendered but shown/hidden based on the condition if condition changes the same nodes are shown/hidden

Upvotes: 1

CoderSpinoza
CoderSpinoza

Reputation: 2165

The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.

I am pretty sure that no-show is lighter than ng-if and no-show should not make the app too heavy. If it is becoming heavy, I think there could be other causes for it.

Upvotes: 1

Related Questions