如何在angularjs中使用多个索引页面

Question

我想访问我的视图中的localhost:3000/admin .. index.html和admin.html是我的两个不同的基本文件,一个用于用户,另一个用于管理仪表板

在我的app.routes.js我有这个

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

在server.js我有这个

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

有两个html索引文件:index.html,admin.html我想打开admin.html时url是:localhost:3000/admin

和index.html当url是:localhost:3000时

应用程序结构的屏幕截图

在views/pages中我有index.html和admin.html使用ng-view所需的所有html页面

Answer 1

据我了解你的问题,你只想添加一个路由规则来表达.Express使用匹配的第一条路线,所以顺序在这里很重要.

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

有关html5mode的角度文档说明你应该将所有网址重写为单个应用入口点:https://docs.angularjs.org/guide/$location#server-sideUsing 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).

所以要明确:我建议你为两个独立的应用程序创建服务器路由.没有什么能阻止你在另一条路线上再次使用第一个应用程序,但我会反对它.通过公共应用程序在后端分离任何具有真正威力的东西.即从您的ng-routes中删除/admin/login并/admin简单地创建一个单独的应用程序.