How to combine ng-view with complete pages in AngularJS? - 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)