How to setup a login page in AngularJS

Question

I'm using AngularJS to render my views and what not. This all works fine. But I now need to create a login page.

Normally my base layout has a top navbar and a side menu on the left and loads the body on the right side of the menu. Just like a typical admin dashboard: http://getbootstrap.com/examples/dashboard/

Now obviously when you're not logged in then you shouldn't be able to see the left menu and the top nav bar.

I could "hide" them with a ng-if="$root.isLoggedIn". Actually, that's what I have now. But when you load the page then you see all the menus for a split second. It then flashes away because that's when AngularJS is done loading and parsing the DOM.

Not really a pretty view if you ask me.

So how do others solve this problem? Is there a way to have a login page that uses a different base layout?

Look up ng-cloak. Also, reverse the logic behind that ng-if. Hide the menu by default, only show it if logged in. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Aug 21, 2014 at 14:03
ng-show/ng-hide can be turned off by disabling css styles in Safari. ng-if removes it from the dom completely so I would stick with ng-if. — Rob
– Rob, Commented Aug 21, 2014 at 14:08

nilsK · Accepted Answer · 2014-08-21 14:04:06Z

2

you can use ngCloak

Description in the docs:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading

answered Aug 21, 2014 at 14:04

nilsK

4,3512 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to setup a login page in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related