启用 html5mode 的 Angular 和 Express 路由答案

【问题标题】：Angular and Express routing with html5mode enabled启用 html5mode 的 Angular 和 Express 路由
【发布时间】：2016-04-07 00:33:55
【问题描述】：

所以我的问题是：如何在启用 html5mode 的情况下使 angular 和 express 路由一起工作？当我将状态从“/”更改为我的管理员状态时，我会得到所有管理员的列表，一切都很好，直到我刷新我的页面。然后我只得到管理员的 json 结果，但我的视图消失了。我只复制了相关的代码——为了使它更短，没有语法错误。

感谢任何帮助。谢谢。

我的文件结构：

+-- client
|   app
|       admin.config.js
|       admin.js
|       admin.module.js
|   assets
|   views
|       admin
|           admin-edit.ejs
|           admin-list.ejs
|   lib
|       bower components
+-- server
|   routes
|       index.js
|       admins.js
|   models
|       Admin.js
|   config
|       dbconfig.js
|   server.js

在我的 Angular module.config 中，我有：

function config($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('admins', {
            url        : '/admins',
            templateUrl: '/views/admin/admin-list.ejs',
            controller : 'AdminController',
            resolve    : {
                loginRequired: loginRequired,
                getAdminList : getAdminList
            }
        });

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/admins');

我的 server.js 文件如下所示：

/* Routes */
var routes = require('./routes/index');
var auth   = require('./routes/auth');
var users  = require('./routes/users');
var admins = require('./routes/admins');


var app = express();


/*************************************
 App initialization
 **************************************/

/* Auto increment mongoose plugin */
autoIncrement.initialize(connection);

/* Auth secret code*/
app.set('superSecret', dbconfig.SECRET);


/* View engine setup */
app.set('views', path.join(__dirname, '../client/views'));
app.set('view engine', 'ejs');


// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'client', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static('client'));

app.use('/', routes);
app.use('/auth', auth);
app.use('/users', users);
app.use('/admins', admins);

我的索引路径如下：

var express = require('express');
var router  = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
    res.render('index');
});


module.exports = router;

我尝试将它添加到我的 server.js 中

app.get('*', function (req, res){
        res.sendFile(path.join(__dirname + '/client/index.ejs'));
});

在这种情况下，当我的 url 为 /admins 时刷新页面时，我会下载索引页面。

我也尝试在我的 index.js 路由中添加

router.get('*', function (req, res) {
   res.render('index');
})

添加它的结果是在我的管理员列表中无限循环。

在我的 index.ejs 中有

<meta charset="utf-8">
<base href="/">

【问题讨论】：

标签： javascript angularjs express angular-ui-router

【解决方案1】：

这是很多代码。 I want to give you this。这是我昨天发布的一个让我感到自豪的答案。这是 Angular 1.5 中 Angular 路由的一个简单示例。您必须添加关于 $locationProvider.html5Mode(true); 的行，因为我没有使用它。

【讨论】：

【解决方案2】：

一段时间后，我找到了解决方案 here，而不是特定页面，我在我发出的每个获取请求中添加了星号 (*)，所以现在我的身份验证路径如下所示：

router.route('/signup')

    /* Render index by default */
    .get(function (req, res) {
        res.render('index', {
            page: req.params.page
        });

    });

【讨论】：