How to use multiple index pages in angularjs

All we need is an easy explanation of the problem, so here it is.

I want to access the localhost:3000/admin which is in my views ..
the index.html and the admin.html are my two different base files one is for users and the other is for admin dashboard respectively

in my app.routes.js I have this

 angular.module('appRoutes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {

$routeProvider

    .when('/', {
        templateUrl: 'app/views/pages/home.html',
        controller: 'MainController',
        controllerAs: 'main'
    })
    .when('/admin', {
        templateUrl: 'app/views/admin.html',
    })
    .when('/logout', {
        templateUrl: 'app/views/pages/home.html'
    })
    .when('/login', {
        templateUrl: 'app/views/pages/login.html'
    })
    .when('/signup', {
        templateUrl: 'app/views/pages/signup.html'
    })
    .when('/admin/login' ,{
        templateUrl: 'app/views/pages/adminlogin.html'
    })

    $locationProvider.html5Mode(true);
   })

in server.js I have this

app.get('*', function(req, res){
res.sendFile(__dirname + '/public/app/views/index.html');
});

there are two html index files: index.html, admin.html
i want to open admin.html when the url is: localhost:3000/admin

and index.html when the url is: localhost:3000

screenshot of the app structure

in views/pages I have all the html pages required by index.html and admin.html using ng-view

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

As I understand your question, you would want to just add one more routing rule to express. Express uses the first route that matches, so order is important here.

app.get('/admin/*', function(req, res){
    res.sendFile(__dirname + '/public/app/views/admin.html');
});

app.get('*', function(req, res){
    res.sendFile(__dirname + '/public/app/views/index.html');
});

The angular docs state about html5mode that you should rewrite all your urls to a single app entry point: Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html).
https://docs.angularjs.org/guide/$location#server-side

So to be clear: What I suggest is that you create server-routes for two separate apps. Nothing prevents you from using the first app one more time on another route, but I would advice against it. Separate anything with real power over your backend from the public app. I.e. remove /admin/login and /admin from your ng-routes and simply create a separate app for that.

Method 2

I found a better solution for this..

app.get('*', function(req, res){
if (req.url.match('^\/admin')) {
    res.sendFile(__dirname + '/public/app/views/admin.html');
} else {
    res.sendFile(__dirname + '/public/app/views/index.html');
}
});

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply