Question

我的问题是如何在使用AngularJs时隐藏模板标签。我的意思是在index.html中我有这个：

<!doctype html>
<html lang="en" data-ng-app="myApp">
    <head data-ng-controller="CtrlHead">
        <meta charset="utf-8">
        <title>{{title}}</title>
    </head>
    <body>             
        <div data-ng-view></div>
        <script type="text/javascript" src="js/js.min.js"></script>
    </body>
</html>

当我在浏览器中查看该页面时，请右键单击＆gt;查看源代码，我可以看到所有代码并查看页面的构造方式。

是否有某种方法可以编译AngularJs模板并仅在视图源中显示已完成的html（添加了{{title}}和实际视图而不是data-ng-view）？

请注意，我不是在谈论ngCloak，它会阻止{{tag}}在编译模板之前被刷新。

谢谢。

Answer 1

这没有简单的角色魔法。您需要让服务器提供html快照。这不适用于您为实际人员服务的内容，因为不会涉及到javascript。这只是javascript运行后页面完成输出的转储。

您可以使用服务器上运行的PhantomJS无头浏览器按计划“访问”您的网页，捕获已编译的html，将html保存到文件中，然后为SEO抓取工具提供这些文件。

我所做的对我的情况来说更好一点。我构建了一个内容管理系统，因此对该站点的所有更改都通过该系统进行管理。无论何时进行更改，网站都会加载到管理面板本身（iframe）中，并从中捕获输出并保存快照。

要告诉抓取工具页面是基于ajax的，并在其他地方查找快照，请将其放在文档的头部：<meta name="fragment" content="!">告诉Google在{{1}处查找www.example.com }。然后，您将设置服务器以提供该请求的主页快照。来自谷歌的信息：https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

此服务还可以为您执行此操作：https://ajaxsnapshots.com

在页面源中编译和隐藏AngularJs模板

1 个答案: