javascript - 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

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

Thanks

Share Improve this question asked Oct 23, 2013 at 13:05 MBU 5,09812 gold badges63 silver badges99 bronze badges

I think this post answers your question: stackoverflow./questions/11541695/… – user3393575 Commented Mar 10, 2014 at 18:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 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/'});
});

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS application multiple pages - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)