AngularJS login form separated from ng-app

Question

Good morning, i'm creating a dashboard in AngularJS with a lot of features. That site is a multi user application so every user most login before using it. With AngularJS i can define only one ng-app and one ng-view, but I need to have a template for login pages (login, lost password, onboarding wizard etc) and another template for the dashboard pages that appears afer succefull login (user managing, settings). I use token authentication. How can i accomplish this task? Now i'm triyng to hide elements like header and left menu when the user is not logged in but i doesn't seem a good solution.

You'll get better help by showing what you've tried and pointing out where you're stuck or having problems. — Phil, Nov 10 '14 at 00:23
**ng-if** will help you solve alot of problems. You just have to declare the state. i.e **logged-out**, **logged-in** and toggle html accordingly. — Coldstar, Nov 10 '14 at 01:33
add an interceptor for $routeChange and then add logic to have restricted v/s auth routes — harishr, Nov 10 '14 at 03:14

score 1 · Answer 1 · edited May 23 '17 at 11:44

First you can have multiple ng-app in a single page. But you will have to do manual bootstrapping. As only first ng-app is automatically bootstrapped by Angular. Take a look at this stack overflow discussion

AngularJS Multiple ng-app within a page

For adding authorization token to your requests, you will have to use interceptors. Here is the example code for an interceptor from book 'angularjs up and running'

angular.module('notesApp', []).factory('AuthInterceptor', ['AuthInfoService', '$q',
function(AuthInfoService, $q) {
    return {
        request : function(config) {
            if (AuthInfoService.hasAuthHeader()) {
                config.headers['Authorization'] = AuthInfoService.getAuthHeader();
            }
        return config;
    },
    responseError : function(responseRejection) {
        if (responseError.status === 403) {
            // Authorization issue, access forbidden
            AuthInfoService.redirectToLogin();
        }
        return $q.reject(responseRejection);
    }
};
}]).config(['$httpProvider',
function($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
}]);

Nope. I don't think so. Root scope will be different for different ng-apps. — Red Devil, Nov 11 '14 at 07:40
Hv you tried using ui-router instead of ng-route? ui-router is state based instead of routes. And you may be able to overcome the limitation of single ng view. — Red Devil, Nov 12 '14 at 05:45

AngularJS login form separated from ng-app

1 Answers1