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: stackoverflow.com/questions/11541695/… — user3393575
– user3393575, Commented Mar 10, 2014 at 18:15

Booker · Accepted Answer · 2014-09-12 14:46:53Z

2

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/'});
});

answered Sep 12, 2014 at 14:46

Booker

7661 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chandermani · Accepted Answer · 2013-10-23 13:11:39Z

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.

Collectives™ on Stack Overflow

AngularJS application multiple pages

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related