AngularJS和元标签在SPA模式？

有没有人已经想出了一个优雅的方式,如何在SPA模式下用AngularJS处理Meta 标签？

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

此外,一些页面应该有更多的元标记,其他的更少.例如,具有内容的页面应该有用于社交媒体共享的其他元标记.其他敏感页面应具有禁止使用的元标记,以禁止对页面进行索引的机器人.

好奇有经验如何应对这个？

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

单独页面的控制器可以在导航时发出事件,如果使用默认路由器,则$locationChangeSuccess.

应用程序控制器监听此事件,并在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
    });
}

然后在你的标题中,你可以这样做：

<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>

我没有测试这个代码,所以可能会有错误,但我认为一般的原则是声音.

备注：社交媒体分享

在您的问题中,您提到了将社区媒体共享标签整合在一起的用例.我认为你的意思是像开放图表或微博等.

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

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

AngularJS和元标签在SPA模式？

相关文章