CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
MBU
MBU

Reputation: 5098

AngularJS application multiple pages

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

Upvotes: 5

Views: 5035

Answers (2)

Booker
Booker

Reputation: 766

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

Upvotes: 2

Chandermani
Chandermani

Reputation: 42669

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.

Upvotes: 1

Related Questions