Route to new base page

Question

In angular I have defined my routes like this:

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {templateUrl: 'pages/main.html', controller: 'MainController'});
  $routeProvider.when('/login', {templateUrl: 'pages/login.html', controller: 'AccountController'});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

So my web site loads the pages/main.html page inside my index.html. When I goto #/login then my pages/login.html inside index.html.

But I actually don't want to load page/login.html inside index.html. I want my login page to have its own layout.

So is there a way to load login.html in such a way so that it's not included inside index.html as a partial, but so that it can have it's own base layout?

One way would be not use routing at all, that way each page could have it's own layout. — Mohammad Sepahvand, Jul 25 '14 at 22:24
So, you actually want the ng-view directive to be on the of index.html, don't you? — JB Nizet, Jul 25 '14 at 22:33

score 0 · Answer 1 · answered May 17 '18 at 04:08

Yes you could create new html page for login page so it could use bage template for eg: base-template.html

<html>
<head>Your scripts</head>
<body ng-app="yourmodule">
<ng-view></ng-view>
</body>
</html>

create login.html

<div>
First Name:<input type="text"/>
Last Name:<input type="password"/>
</div>

var app = angular.module("Your module",[ngroute]);
app.config(function($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl:'login.html',
            controller:'your controller'
        });
app.controller("Your controller",function($scope){
//your logic
});

Hope it helps you

Route to new base page

1 Answers1