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, Jun 06 '16 at 22:48
Possible hint for you: http://stackoverflow.com/questions/24927784/angularjs-ui-router-multiple-pages — Dmitriy Khudorozhkov, Jun 06 '16 at 22:49
http://stackoverflow.com/questions/16906231/multiple-index-html-pages-angular — Dmitriy Khudorozhkov, Jun 06 '16 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, Jun 06 '16 at 22:50
Consider reading [this](http://programmers.stackexchange.com/questions/239056/angularjs-structuring-a-web-application-with-multiple-ng-apps); 1st answer contains the answer to your question. — Dmitriy Khudorozhkov, Jun 06 '16 at 23:00

ippi · Accepted Answer · 2016-06-06T23:16:57.053

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.

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 ?? — Sahil Chauhan, Jun 06 '16 at 23:21
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(...` — ippi, Jun 06 '16 at 23:22
can you provide me with a working example? I'm still having some issues. thanks in advance. — Sahil Chauhan, Jun 07 '16 at 00:08

score 0 · Answer 2 · answered Jun 07 '16 at 00:28

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 07 '16 at 00:28

Sahil Chauhan

185
1
13

How to use multiple index pages in angularjs

2 Answers2

Linked