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/ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |