How to combine ng-view with complete pages in AngularJS?

Question

I am developing an application that is supposed to be a single-page application. The tools I am using are AngularJS, NodeJS, ExpressJS and Jade for templating.

So far I've been working with a page that has a ng-view directive on it, and I can change its content to display the page I want, while maintaining the side menu.

Now I've come to a point where I need to create a login/create account page (that I am calling 'intro', for now), and this one should use all the screen space, removing the menu as well.

How can I achieve this? My route file looks as follows:

var akaAcademicManagerApp = angular.module('akaAcademicManagerApp', ['ngRoute', 'akaAcademicControllers']);

akaAcademicManagerApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/dashboard', {
        templateUrl: 'partials/dashboard',
        controller: 'DashboardController'
      }).
      when('/profile', {
        templateUrl: 'partials/profile',
        controller: 'ProfileController'
      }).
      when('/intro', {
        templateUrl: 'partials/introPage',
        controller: 'IntroController'
      }).
      otherwise({
        redirectTo: '/dashboard'
      });
  }]);

angular.module('akaAcademicControllers', []);

Answer 1

I think this can help you (yet, i don't think it's the optimal solution but it works)

in your index.html,after your body tag put this:

<div ng-include="accessToApplication()"></div>

Now in your controller:

$scope.loggedIn = false;// true when the user is logged in

$scope.accessToApplication = function () {
            if (!$scope.loggedIn) {
                return "partials/introPage.html";
            }
            else {
                return "path to the page containing the ng-view";
                }
};

I advice you to take a look at ui-router and multiple named views (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views)