Express with AngularJS - 如何将数据直接解析为 html 模板？答案

【问题标题】：Express with AngularJS - How to parse data directly into an html template?Express with AngularJS - 如何将数据直接解析为 html 模板？
【发布时间】：2016-06-08 20:29:42
【问题描述】：

我有一个 Express / Angular 应用程序，我正在尝试通过 app.get() 方法添加标题，而不是通过 angular 添加标题。有没有办法在不使用模板引擎的情况下做到这一点？

我的 server.js 文件：

app.use(express.static(path.join(__dirname, 'public')));

我的路线（使用 express.Router）

// Default load public index.html
publicRouter.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../../../public', 'index.html'));
});

我很确定我做错了。我想做这样的事情：

publicRouter.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../../../public', 'index.html'), {
        title: "My Webpage",
    });
});

然后在我的 index.html 中，我可以将标题直接渲染到模板中：

<title>{{ title }}</title>

... 不属于路由范围的一部分。这是因为标题是在加载 Angular 之前呈现的，如果我在 Angular 中加载它，标签会在加载 Angular 时暂时显示。这不酷。

【问题讨论】：

标签： javascript angularjs node.js templates express

【解决方案1】：

我可能会为您的问题提供解决方案。也许尝试为它创建一个自定义指令。像这样的

<title my-title=" 'title' "><\title>

将被渲染到

<title ...>{{title}}<\title>

这样，只要不加载angular，title标签就会为空。

【讨论】：

这会使标题在 html 的其余部分之前呈现吗？我的问题是页面加载的瞬间，标题是通过角度动态加载的，它是在标题标签之后加载的。
不，它不会让它先渲染，但它会让等待看起来更干净。我的意思是 {{ .. }} 括号不会显示在这个解决方案中。

【解决方案2】：

根据index.html 的复杂程度，以及您不使用服务器端模板引擎的要求，您可以使用模板文字（即，用反引号而不是引号包裹的字符串，这可以让您很好地处理多行字符串；可用在 ES6 或编译为 ES5 的 TypeScript 中）插入页面标题。

publicRouter.get('/foo', function(req, res) {
    res.send(getHtml('My webpage'));
});

publicRouter.get('/bar', function(req, res) {
    res.send(getHtml('My other webpage'));
});

function getHtml(title) {
    return `
        <!doctype html>
        <html>
            <head>
                <title>${title}</title>
            </head>
            <body ng-app="myApp">
                <div ng-view></div>
                <script src="js/app.js"></script>
            </body>
        </html>
    `;
}

【讨论】：

感谢您的回复，但 index.html 太复杂了，我无法干净地实现它。