same url ('/') with different templates based on login status in AngularJS

Question

I'd like to know the best practice, how to set up routing and templates in AngularJS to show a different front & login area to visitors, and then show a dashboard to logged in users on the same base url ('/').

The two pages are structurally completely different, and also different assets are needed.

Is it better to setup two different apps for the 2 parts of the website, but then how would I manage the session between the 2?

Or is it better to make an "empty" layout with nothing between the body tags an load the different templates into that, and make separate routing for the front part and the dasboard part?

I'm looking for kind of like the way Facebook's login is made. To stay on the root domain after logging in.

I spent my afternoon Googling and searching SO, but couldn't find any guides on this. Any ideas how you usually do this kind of separation in AngularJS would be very welcome.

Klaster_1 Нет войне · Accepted Answer · 2014-09-06T01:38:01.360

Martin's answer is fine, but I'd rather solve the problem with ui-router module:

Create three states: root, dashboard and landing.
Capture URL with root state and redirect to dashboard or landing depending on authorization status.
dashboard and landing will have controller and templateUrl defined in one place together with other application states, which is nice.

Code example:

angular
  .module("app", ["ui.router"])
  .value("user", {
    name: "Bob",
    id: 1,
    loggedIn: true
  })
  .config(function($stateProvider) {
    $stateProvider
      .state("root", {
        url: "",
        template: "<section ui-view></section>",
        controller: function($state, user) {
          if ($state.is("root")) $state.go(user.loggedIn ? "dashboard" : "landing");
        }
      })
      .state("landing", {
        templateUrl: "landing.html",
        controller: "LandingCtrl"
      })
      .state("dashboard", {
        templateUrl: "dashboard.html",
        controller: "DashboardCtrl"
      });
  })
  .controller("DashboardCtrl", function($scope, user, $state) {
    $scope.logout = function() {
      user.loggedIn = false;
      $state.go("root");
    }
  })
  .controller("LandingCtrl", function($scope, user, $state) {
    $scope.login = function() {
      user.loggedIn = true;
      $state.go("root");
    }
  })

Complete example on Plunker.

This is very cool and elegant way to do it! :) Exactly what I needed. Thanks a lot! :) — Jack Gerson, Sep 06 '14 at 05:07
@Klaster_1 How would you go about separating the assets for the landing and the dashboard area? — Jack Gerson, Sep 06 '14 at 05:44
What type of assets are you talking about? Static images, styles, custom directives? — Klaster_1 Нет войне, Sep 06 '14 at 12:10
@Klaster_1 this is really cool. I'm interested in doing something similar but casing on `location.hostname` instead of logged in state. It seems really doable. Basically one app that provides different functionality depending on which domain you're loading it from. — Marius, Mar 25 '16 at 23:20

score 7 · Answer 2 · answered Sep 05 '14 at 14:34

7

You can use the same master template, include different partials depending on if the user is logged in or not.

<ng-include=" 'views/loggedout.html' " ng-if="!loggedIn"></ng-include>
<ng-include=" 'views/loggedin.html' " ng-if="loggedIn"></ng-include>

answered Sep 05 '14 at 14:34

Martin

15,820
4
47
56

Great, this makes sense. Thank you. And the loggedIn boolean should be set from the controller like `$scope.loggedIn` = true; right? – Jack Gerson Sep 05 '14 at 15:10

same url ('/') with different templates based on login status in AngularJS

2 Answers2

Linked