可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a mean app which is working perfect with admin panel.

My server is listening on: http://localhost:3003

admin panel I can access here: http://localhost:3003/#/admin/

Now I want to separate admin panel and client panel, but client panel is not accessible like when I tried to this url, show nothing

http://localhost:3003/#/client

I have updated my server.js file also enable multiple views in express v 10.x.x like:

app.set('views', [__dirname + '/admin/views', __dirname + '/client/views']);

I think problem is with

app.get('/', function (req, res) { res.render('index.html'); });

It render admin/index.html every time.

Here is my directory structure!

mean-app       ----admin               |                -----js                     |                      ---controllers                      ---app.js                -----views                     |                      ---partials                      ---index.html       ----client               |                -----js                     |                      ---controllers                      ---app.js                -----views                     |                      ---partials                      ---index.html      config     controllers     services     models     node_modules     services     bower_components     package.json     bower.json     server.js

here is my server.js

var express           = require('express'); var app                 = express(); var bodyParser      = require('body-parser'); var mongoose          = require('mongoose'); var apiRoutes       = require('./config/api-routes'); var auth                = require('./config/authorization');  app.set('views', [__dirname + '/admin/views', __dirname + '/client/views']); app.engine('html', require('ejs').renderFile); app.use(bodyParser.urlencoded({extended:true})); app.use(bodyParser.json());  var dbUrl = process.env.MONGOLAB_URI || "mongodb://127.0.0.1:27017/ecommerce-app-db"; var port = process.env.PORT || 3003;  mongoose.connect(dbUrl);   app.listen(port, function(){       console.log('Listening on port ' + port);  });   app.get('/', function (req, res) {      res.render('index.html');   });    app.get('/partials/:name', function (req, res) {    console.log(req.params.name);     res.render('partials/' + req.params.name);   });    app.use('/adminjs', express.static(__dirname + '/admin/js'));   app.use('/clientjs', express.static(__dirname + '/client/js'));   app.use('/bower_components', express.static(__dirname + '/bower_components'));   app.use('/images', express.static(__dirname+'/uploads/'));    // Load Api routes   apiRoutes(app, auth);

Admin app.js

var adminApp = angular.module('adminApp', [...]); adminApp.constant('SERVERURL', 'http://localhost:3003'); adminApp.config(['$routeProvider', function($routeProvider){         $routeProvider             .when('/admin', {                 redirectTo: '/admin/dashboard'             })             .when('/admin/dashboard', {               templateUrl: 'partials/dashboard.html',               controller: 'MainCtrl'             })              .otherwise({                 redirectTo: '/admin'             }); }]);

Client app.js

var clientApp = angular.module('clientApp', [...]);  clientApp.constant('AppConfig', {     'APP_NAME' : 'Web Shop',     'SERVERURL': 'http://localhost:3003',     'META_TITLE': 'Web Shop'    }); clientApp.config(function ($routeProvider, $locationProvider) {     $routeProvider       .when('/client', {         templateUrl: 'partials/main.html',         controller: 'MainCtrl'       })     .otherwise({         redirectTo: '/client'       });       // prevent preflight request for cross-domain Ajax calls     $httpProvider.defaults.useXDomain = true;     delete $httpProvider.defaults.headers.common['X-Requested-With'];    });

Client index.html

<!doctype html> <html ng-app="clientApp">   <head>      <link rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css' />  </head>   <body> <div ng-view=""></div> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="clientjs/app.js"></script>  <script src="clientjs/controllers/main.js"></script> </body> </html>

回答1:

Okay I came with a solution, hope it will help someone.

Directory structre remain as shown in question,here is my server.js

var express           = require('express'); var app                 = express(); var bodyParser      = require('body-parser'); var mongoose          = require('mongoose'); var apiRoutes       = require('./config/api-routes'); var auth                = require('./config/authorization');  app.set('views', __dirname); app.engine('html', require('ejs').renderFile);  //Add middleware necessory for Rest API's app.use(bodyParser.urlencoded({extended:true})); app.use(bodyParser.json());  // CORS Support app.use(function(req, res, next) {   res.header('Access-Control-Allow-Origin', '*');   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');   res.header('Access-Control-Allow-Headers', 'Content-Type');  // var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;   //console.log('Client IP:', ip);    next(); });   var dbUrl = process.env.MONGOLAB_URI || "mongodb://127.0.0.1:27017/ecommerce-app-db"; var port = process.env.PORT || 3003;  mongoose.connect(dbUrl);    app.listen(port, function(){       console.log('Listening on port ' + port);  });  app.get('/admin', function (req, res) {     res.render('admin/views/index.html'); });  app.get('/client', function (req, res) {     res.render('client/views/index.html'); });     app.get('/admin/partials/:name', function (req, res) {     res.render('admin/views/partials/' + req.params.name); });   app.get('/client/partials/:name', function (req, res) {       res.render('client/views/partials/' + req.params.name); });  app.use('/admin/adminjs', express.static(__dirname + '/admin/js')); app.use('/client/clientjs', express.static(__dirname + '/client/js'));  app.use('/admin/bower_components', express.static(__dirname + '/bower_components')); app.use('/client/bower_components', express.static(__dirname + '/bower_components'));  app.use('/images', express.static(__dirname+'/uploads/'));    // Load Api routes   apiRoutes(app, auth);

here is my admin app.js

var adminApp = angular.module('adminApp', [....]);  adminApp.constant('SERVERURL', 'http://localhost:3003');  adminApp.config(['$routeProvider', function($routeProvider){         $routeProvider             .when('/admin', {                 redirectTo: '/admin/dashboard'             })             .when('/admin/dashboard', {                   templateUrl: 'partials/dashboard.html',                   controller: 'MainCtrl'             })             .otherwise({                 redirectTo: '/'             });  }]);

here is admin index.html

<!DOCTYPE html> <html ng-app="adminApp"> <head>     <meta name="viewport" content="width=device-width, user-scalable=no"> <title>Web Shop Admin</title> <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="adminjs/theme/dist/css/sb-admin-2.css" rel="stylesheet"> </head> <body> <div ng-view></div>      </body>  <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="adminjs/app.js"></script> <script src="adminjs/controllers/main-controller.js"></script> </html>

Here is client app.js

var clientApp = angular.module('clientApp', [...]); clientApp.config(function ($routeProvider, $locationProvider) { $routeProvider       .when('/', {         templateUrl: 'partials/main.html',         controller: 'MainCtrl'       })     .otherwise({         redirectTo: '/client'       });   });

Here is client index.html

   <!DOCTYPE html>     <html ng-app="clientApp">     <head>         <meta name="viewport" content="width=device-width, user-scalable=no">     <title>Web Shop Admin</title>     <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">     <link href="clientjs/theme/dist/css/sb-admin-2.css" rel="stylesheet">     </head>     <body>     <div ng-view></div>          </body>      <script src="bower_components/jquery/dist/jquery.js"></script>     <script src="bower_components/angular/angular.js"></script>     <script src="clientjs/app.js"></script>     <script src="clientjs/controllers/main-controller.js"></script>     </html>

文章来源: MEAN app with admin panel and client panel

标签

admin

bower

require

app

mean