Angularjs 使用文件夹结构在大型Express应用程序中渲染所有Jade文件?

Angularjs 使用文件夹结构在大型Express应用程序中渲染所有Jade文件?,angularjs,express,pug,Angularjs,Express,Pug,如何配置Express以呈现所有Jade文件,而不考虑路径?我使用的应用程序很大,结构非常复杂。我正在成功地为静态文件提供服务,但是我需要渲染其中的许多文件。我们正在为所有需要标记的文件使用Jade 我担心下面的模式会迫使我为每个包含Jade文件的文件夹创建路由别名。。。那就太糟糕了。我想告诉Express使用.jade扩展来简单地渲染所有内容。。。或允许我为根创建一个路由前缀,该前缀将导致渲染操作而不是静态操作 client app services modules

如何配置Express以呈现所有Jade文件,而不考虑路径?我使用的应用程序很大,结构非常复杂。我正在成功地为静态文件提供服务,但是我需要渲染其中的许多文件。我们正在为所有需要标记的文件使用Jade

我担心下面的模式会迫使我为每个包含Jade文件的文件夹创建路由别名。。。那就太糟糕了。我想告诉Express使用.jade扩展来简单地渲染所有内容。。。或允许我为根创建一个路由前缀,该前缀将导致渲染操作而不是静态操作

client
  app
    services
    modules
      moduleA
        itemA
          itemAList.jade
          itemAList.js
          itemADetails.jade
          itemADetails.js
        itemB
          itemBList.jade
          itemBList.js
          itemBDetails.jade
          itemBDetails.js
      moduleB
        itemC
          itemCList.jade
          itemCList.js
          itemCDetails.jade
          itemCDetails.js
        itemD
          itemDList.jade
          itemDList.js
          itemDDetails.jade
          itemDDetails.js
  assets
    js
    css
server
  config
  views
Routes.Config.js

module.exports = function(app){

    app.get('/*', function(req, res){
        res.render('../../client/' + req.params[0]);
    });

    app.get('/', function(req, res){
        res.render('../../client/index', {});
    })
}
[snip]
app.use(express.static(path.join(constants.rootPath, '/client')));
Express.Config.js

module.exports = function(app){

    app.get('/*', function(req, res){
        res.render('../../client/' + req.params[0]);
    });

    app.get('/', function(req, res){
        res.render('../../client/index', {});
    })
}
[snip]
app.use(express.static(path.join(constants.rootPath, '/client')));

我会在创建或保存.jade文件时使用Grunt文件监视程序启动编译。通过使用下面的
grunfile.js
,您可以发出命令
grunt watch
,并在后台自动执行此操作:

module.exports = function(grunt){

    grunt.initConfig({

        jade: {
            compile: {
                options: {
                    client: false,
                    pretty: true
                },
                files: [{
                    cwd: "client/app/templates",
                    src: "**/*.jade",
                    dest: "client/app/modules",
                    ext: ".html",
                    expand: true
                }]
            }
        },
        watch: {
            html: {
                files: 'client/app/templates/**/*.jade',
                tasks: ['jade'],
                options: {
                    atBegin: true,
                    interrupt: true
                }
            }
        }

    });

    grunt.loadNpmTasks("grunt-contrib-jade");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.registerTask('default', ['jade']);
}
现在,假设您将创建一个与“modules”文件夹平行的“templates”文件夹,并将所有.jade文件放在您想要的结构中。然后,您可以像往常一样将控制器和其他.js文件添加到模块文件夹结构中

我不确定当源和目标都指向同一个文件夹时,Grunt的行为如何。但是,如果您确实想将.jade和.html文件保存在同一文件夹中,或者不想创建“模板”结构,则只需将
cwd
变量更改为指向“模块”文件夹:

注意:
听起来你误解了一些基本原理。据我所知,在一个典型的MEAN应用程序中,通常有一个纯静态的文件夹结构。在您的示例中,这将是您的“客户机”文件夹。通过指定特殊路线,您可以单独决定如何处理其他每个案例。上面的例子是为了在保持“静态”区域的目的的同时实现我认为您所要求的

更新:不要使用相同的文件夹
我返回并尝试对源和目标使用相同的文件夹。这导致格朗特被绞死,无法逃脱。当它们不同时,不会发生此挂起。因此,将文件原样与“模板”文件夹一起使用