javascript - 如何避免为每个 html 文件添加 ExpressJS app.get()？

Question

我有以下项目结构(为简洁起见，省略了不相关的文件):

- app
    - authentication
        - authentication.controller.js
        - authentication.routes.js
        - authentication.scss
        - registration.html
        - user.model.js
    - app.js
    - app.scss
- server
    - server.controller.js
    - server.js
    - server.routes.js
- views
    - index.html

问题是，当我使用 html 文件作为 AngularJS 路由的 templateUrl 时，我收到“cannot GET/path/to/someFile.html”错误。

(function() {
    angular
        .module('appName', [
            'ngMessages',
            'ngResource',
            'ui.router'
        ])
        .config(function($stateProvider) {
            $stateProvider
                .state('registration', {
                    url: '/registration',
                    templateUrl: '/app/authentication/registration.html',
                    controller: 'AuthenticationController'
                });
        });
})();

这是否意味着我必须在我使用的每个 html 文件的 server.js 文件中添加以下代码块？

app.get('/app/authentication/registration.html', function(request, response) {
    response.sendFile(path.resolve('app/authentication/registration.html'));
});

这似乎是一个巨大的痛苦。我目前还必须对我拥有的每个 css 和 js 文件执行此操作。我可以使用 gulp 来连接它们，所以我只需要为一个 css 和一个 js 文件提供一个 app.get，但我不能为 html 文件这样做。

有没有更好的方法来处理这个问题？对于每个 html 文件都有一个 Angular 路由和一个快速路由没有多大意义。

Answer 1

您可以使用 Express 轻松提供静态文件:

app.use(express.static('views'));
// http://localhost/ -> views/index.html

要将目录提供给您可以使用的特定路径:

app.use('/app', express.static('app'));
// http://localhost/app/authentication/registration.html
//      -> app/authentication/registration.html

这将解析路径并提供页面。

如果您只想提供特定页面(例如 View )，我建议您将其全部放在一个目录中，并且仅静态提供该目录。

另请参阅:Express API