How to use multiple index pages in angularjs

Question

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

Please state what you're asking about, as currently it's not clear what is the problem. — Dmitriy Khudorozhkov
– Dmitriy Khudorozhkov, Commented Jun 6, 2016 at 22:48
Possible hint for you: stackoverflow.com/questions/24927784/… — Dmitriy Khudorozhkov
– Dmitriy Khudorozhkov, Commented Jun 6, 2016 at 22:49
@DmitriyKhudorozhkov i want to access localhost:3000/admin.. localhost:3000 is just working fine , it is rendering index.html file — Sahil Chauhan
– Sahil Chauhan, Commented Jun 6, 2016 at 22:50
Consider reading this; 1st answer contains the answer to your question. — Dmitriy Khudorozhkov
– Dmitriy Khudorozhkov, Commented Jun 6, 2016 at 23:00

ippi · Accepted Answer · 2016-06-06 23:16:57Z

5

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.

edited Jun 6, 2016 at 23:16

answered Jun 6, 2016 at 23:08

ippi

10.2k3 gold badges41 silver badges51 bronze badges

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

3 Comments

Sahil Chauhan Over a year ago

thanks.. now it is rendering admin.html by localhost:3000/admin and now what you are suggesting me is that i have to create 2 ng-app i.e one for index.html and the other for admin.html ??

ippi Over a year ago

That's how I would do it. Dependency injection in angular makes it so easy to reuse stuff, so it's basically just another angular.module(...

Sahil Chauhan Over a year ago

can you provide me with a working example? I'm still having some issues. thanks in advance.

Sahil Chauhan · Accepted Answer · 2016-06-07 00:28:56Z

0

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

answered Jun 7, 2016 at 0:28

Sahil Chauhan

1851 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to use multiple index pages in angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related