AngularJS application multiple pages

Question

I have an angularjs SPA application with an index.html page as the main template and the rest of the views are loaded as subviews in an ng-view tag. I'm using a twitter bootstrap template for the site so the template has a login page thats different from the rest of the pages. Is there a way to have multiple main template pages, one for the login page and one for everything else? I've been trying to figure out how to specify a different page in the route provider but I haven't been able to figure out how to specify a page rather than a partial view as the templateURL or if thats even possible.

I'm new to angularjs so i'm not sure what the best way to handle this situation.

Thanks

I think this post answers your question: http://stackoverflow.com/questions/11541695/angular-js-redirecting-to-a-certain-route-based-on-condition — user3393575, Mar 10 '14 at 18:15

score 2 · Answer 1 · answered Sep 12 '14 at 14:46

You are on the right track with RouteProvider

angular.module('mymodule', ['ngRoute'])

.config(function($routeProvider) {

    $routeProvider.
        when('/index.html/page1/', {templateUrl : './templates/template1.html'}).
        when('/index.html/page2/', {templateUrl : './templates/template2.html'}).
        otherwise({redirectTo : '/index.html/page1/'});
});

score 1 · Answer 2 · answered Oct 23 '13 at 13:11

You would have to do this using ng-include. Your main view should look like

<body ng-app>
    <div id='topNav' ng-include='templateUrl' ng-controller='topNavController'></div>
    <div id='left' ng-include='templateUrl' ng-controller='leftNavController'></div>
    <div ng-view>
</body>

The templateUrl can be from server or preloaded onto the client using <script> tag.

The javascript would look like.

function topNavController($scope, $route, $location) {
     //Check using $route or $location if login view is loaded
    // if yes $scope.templateUrl='loginTopNavTemplateUrl'
    //else $scope.templateUrl='mainNavTemplateUrl'
}

Check documentation for ng-include, $route and $location to see how how these elements work.

AngularJS application multiple pages

2 Answers2