How to use multiple index pages in angular

Question

I want to access localhost: 3000 / admin, which is in my views. index.html and admin.html are my two different base files, one for users and one for the admin control panel, 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 url: localhost: 3000 / admin

and index.html when url: localhost: 3000

application structure screenshot

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

Answer 1

As I understand your question, you would like to add another routing rule for the expression. 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'); }); 

Angular docs tell html5mode that you must rewrite all of your URLs to one entry point to the application: Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (eg index.html). https://docs.angularjs.org/guide/$location#server-side

So, clarity: I propose creating server routes for two separate applications. Nothing prevents you from using the first application again on a different route, but I would advise him. Share anything with real power over your backend from a public application. That is, remove /admin/login and /admin from your ng routes and just create a separate application for this.

Answer 2

I have found the best 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'); } });