Conditional templates in AngularJs

Question

I have a login page, which is just a simple form in the center of the page with no header, footer or sidebar. My regular pages will have a sidebar, header and footer (these 3 are directives). I call all my templates in ng-view, depending on the routes. I want to place my directives outside ng-view since they'll be common across all the pages except login and I don't want them to be fetched on every URL change.

How do I have a login page without the 3 directives?

As in view it! I mean when the `/login` route is hit, the login form should be loaded in `ng-view`. — Rutwick Gangurde, Sep 30 '14 at 06:28
Ah, so you want to take directives that are currently inside of your login ng-view, and put it outside of it. Sounds like a good plan, what issues are you having? — Michael Kang, Sep 30 '14 at 06:33
I want them to be hidden when I'm on the login page! But don't know the proper way to do it! — Rutwick Gangurde, Sep 30 '14 at 06:35
Personally, I would redirect to another page rather than show/hide components off of a login page. But its up to you. If you want to show hide components on a login page, you can bind elements using ng-show/ng-hide based on a persistent variable like an auth cookie, that is set server-side. — Michael Kang, Sep 30 '14 at 06:38
I hesitate to give this as an answer, because there is probably a sensible way to do it with built-in angular routing. Still using angular-ui-router this would be very easy: Have a top level state, one child state for the login page and another child state with the sidebar/header/footer layout which is the parent of all other "regular" (logged-in) states. — eekboom, Sep 30 '14 at 06:39
I may be on the right track with what the op is looking for (or I may be completely out to lunch). Anyways, check this out: https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/ — Michael Kang, Sep 30 '14 at 06:42
@StephenFriedrich Reached ui.router via some other resource! So my parent state will be a blank page, right? — Rutwick Gangurde, Sep 30 '14 at 09:36

score 0 · Answer 1 · answered Sep 30 '14 at 06:46

0

I dont know if I get what You really want to do, but i would suggest to use ng-if

such ng-if may look look like this:

<div ng-if="notLogin"> here is Your navbar contents. Directies, anything You need </div>

and then in controller -

$scope.notLogin = $location.path() !== "/login"

If You have directives for footers, navbars etc, i think You can do that in directive controller and hide all content of directive there, so directive will be empty.

You may also use global controller to do that job and wrap those directives in divs like in my example. Doing it in directives looks cleaner though.

Hope its what You need.

answered Sep 30 '14 at 06:46

Jarema

3,291
2
17
30

I tried this already, but the directive is already compiled when the login page loads, hence the condition stays true on all the pages and the directives stay hidden! – Rutwick Gangurde Sep 30 '14 at 06:51
Oh right! So the workaround is to wrap directives in divs like i showed You in example. Then directive will stay out of template if global controller catch another path another then /login. Angualar have all those precompile, compile options to use, but im not familiar with them. sorry. – Jarema Sep 30 '14 at 07:14
NO problem! :) I'm trying something with ui.router! – Rutwick Gangurde Sep 30 '14 at 09:37

score 0 · Answer 2 · answered Sep 30 '14 at 06:46

you can use ng-if to conditionally display/hide them on UI. Please note that ng-if is different than ng-switch. The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM.

More details - https://docs.angularjs.org/api/ng/directive/ngIf

Qucik Steps -

create a shell page and set the header, footer, sidebar and a view
use ng-if={{User.isLoggedin}} for header, footer, sidebar and login
set User.isLoggedin to false when user is not logged in
Set it to true once user loged in

Thanks! I already tried that! But it sounds very jQueryish, and I'm trying to be a bit more cleaner. — Rutwick Gangurde, Sep 30 '14 at 09:37

Sander Elias · Accepted Answer · 2014-10-01T05:26:01.613

0

I created a small plunk to offer you a solution to your issue.

this is the base of the solution:

<ng-include src="appVm.templatetoShow">
</ng-include>

in the Appcontroller :

  function AppController() {
     this.templatetoShow = 'login.html';
  }

I included a couple of templates that gets loaded when needed.

After some rereading, I made a new plunk to show you how this can be done. The hiding part is simple, just add some CSS into the mix, and you won't see anything from your main page. Added some cloaking to prevent FOUC, and wrote a couple of lines to show an authentication system. I introduced an User service that you can inject wherever you need the users data.

Is this more in what you wanted?

edited Oct 01 '14 at 05:26

answered Sep 30 '14 at 07:12

Sander Elias

754
6
9

Good example, but it loads the page on clicking the log in button and not after authentication! – Rutwick Gangurde Sep 30 '14 at 09:48
@Rutwick, I showed a way how to implement the system for showing/hiding a (login) dialog separate from a normal ng-view. The op knew hot to do the log in, so I didn't repeat that. – Sander Elias Sep 30 '14 at 11:29
:) oh, Now I noticed, @RutwickGangurde, you _are_ the op! :) do you want me to add the login form to the sample? – Sander Elias Sep 30 '14 at 11:46
Yes! That would be great :) – Rutwick Gangurde Sep 30 '14 at 14:24
@RutwickGangurde, I wrote a new plunk to show you how your problem might be solved! – Sander Elias Oct 01 '14 at 05:26
The new example looks better. Let me please check it! – Rutwick Gangurde Oct 01 '14 at 06:16
@RutwickGangurde, just curious, did you check out the example? Have any questions left? – Sander Elias Oct 07 '14 at 07:23
I ended up using `ui.router` and creating separate states for login and dashboard. But your example helped me a lot! Thanks! :) – Rutwick Gangurde Oct 07 '14 at 08:32

score 0 · Answer 4 · edited May 23 '17 at 11:57

0

Directives are shared across all views if you use the same controller however using different controllers is not adviced either. what makes you uncomfortable with that ?

have a look at this post: https://stackoverflow.com/a/16213055/1218551

best wishes:)

edited May 23 '17 at 11:57

Community

1
1

answered Sep 30 '14 at 07:20

katmanco

1,146
12
24

Conditional templates in AngularJs

4 Answers4