SPA模式下的AngularJS和meta标签？

Question

SPA模式下的AngularJS和meta标签？

Mic*_*ger 12 social meta angularjs

你们中的任何人都已经想出了如何在SPA模式下使用AngularJS处理元标记的优雅方法吗？

在基本模板中,我有一些默认的元标记.对于每个路由,每个控制器正在加载具有不同内容的不同视图.很正常.但是,如何更改每个页面的元标记？

此外,一些页面应该有更多元标记,其他页面应该更少例如,包含内容的页面应具有用于社交媒体共享的附加元标记.其他敏感页面应该使用no-follow元标记禁止机器人索引页面.

好奇的是经验丰富的人如何应对这种情况？

Answer 1

Mic*_*ley 23

我使用的模式来自ngBoilerplate项目.在这种模式中,有一个整体应用程序控制器,它处理"全局"范围,包括元标记.

$locationChangeSuccess如果您使用默认路由器,则各个页面的控制器在导航到时可能会发出事件.

app控制器监听此事件,并在ngBoilerplate的情况下使用它来更新页面标题:https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js# L17-L21

但是,没有什么可以阻止您使用您喜欢的任何元标记信息发出对象,然后拥有该事件的监听器.

// on your individual app pages goes something like this
function SomePageController($scope) {
   // the event gets fired when the page is loaded and the controller is called.
   $scope.$emit('newPageLoaded', { 'title': 'Some Page', 'description': 'blah' });
}

// your overall app controller
function AppController($scope) {
    $scope.metadata = {
        'title': 'default title',
        'description': 'default description',
    };

    // whenever a controller emits the newPageLoaded event, we update the app's metadata
    $scope.$on('newPageLoaded', function(event, metadata) {
        $scope.metadata = metadata
    });
}

Run Code Online (Sandbox Code Playgroud)

然后在你的标题中你可以做这样的事情:

<html ng-app="myApp" ng-controller="AppController">
<head>
    <meta title="{{ metadata.title }}" ng-if="metadata.title" />
    <meta description="{{ metadata.description}}" ng-if="metadata.description" />
    <meta whatever="{{ metadata.whatever}}" ng-if="metadata.whatever" />
</head>

Run Code Online (Sandbox Code Playgroud)

我没有测试过这段代码,所以可能会有错误,但我认为一般原则是合理的.

重点说明:社交媒体分享

在您的问题中,您提到了为社交媒体共享合并标签的用例.我假设你的意思是开放图形或推特等.

在这种情况下,重要的是要知道当前这些网站(Facebook,Twitter,pinterest等)使用的抓取工具将不会执行您的JavaScript,因此无法读取您使用Angularjs动态填充的任何元标记.

我写了一篇关于这个问题的博客文章,建议的解决方案:http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app/

归档时间：	11 年，3 月前
查看次数：	12797 次
最近记录：	9 年，2 月前