AngularJS和meta标签SPA模式？ [英] AngularJS and meta tags in SPA mode?
问题描述
目前已有人对你已经想通了就如何处理与SPA模式？
Has anyone of you already figured out an elegant way on how to deal with meta tags with AngularJS in SPA mode?
在一个基本模板，我有一些默认的meta标签。对于每个路由，每个控制器加载不同内容的不同看法。非常正常的。但我怎么可以改变meta标签为每个网页？
In a base template I have some default meta tags. For each route, each controller is loading a different view with different contents. Very normal. But how can I alter the meta tags for each of these pages?
另外一些页面应该有更多的meta标签，别人少。例如包含内容的页面应该有一个社会化媒体分享更多的meta标签。其他敏感的页面应该有不遵循meta标签禁止机器人索引页面
Furthermore some pages should have more meta tags, others less. For example pages with contents should have additional meta tags for social media sharing. Other sensitive pages should have the no-follow meta tags to forbid robots indexing the page.
好奇怎么经历过这是应对？
Curious how the experienced are coping with this?
推荐答案
我用一个模式来自ngBoilerplate项目。在这个模式中，有一个整体的应用程序控制器，它具有全局范围内交易，包括meta标签。
A pattern I have used comes from the ngBoilerplate project. In this pattern, there is an overall app controller which deals with a "global" scope, including meta tags.
您个人的网页控制器，当他们导航到可以发出一个事件， $ locationChangeSuccess 如果您使用的是默认路由器。
You individual pages' controllers could emit an event when they are navigated to, $locationChangeSuccess if you are using the default router.
该应用程序控制器侦听此事件，并使用它在ngBoilerplate的情况下更新页面标题：<一href=\"https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js#L17-L21\">https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js#L17-L21
The app controller listens for this event, and uses it to update the page title in the case of ngBoilerplate: https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/app.js#L17-L21
然而，没有什么可以从发射与你喜欢的任何meta标签的信息，然后让该事件侦听器的对象阻止你。
However, there's nothing to stop you from emitting an object with whatever meta tag info you like, then having a listener for that event.
// 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
});
}
然后在你的头，你可以做这样的事情：
Then in your header you could do something like this:
<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>
我没有测试此code，所以有可能是错误的，但我认为总的原则是健全的。
I've not tested this code, so there may be errors, but I think the general principle is sound.
在你的问题你提到合并标签为社交媒体共享的用例。我假定你的意思是这样的Open Graph或Twitter等。
In your question you mention the use-case of incorporating tags for social media sharing. I assume you mean something like open graph or twitter etc.
在这种情况下，要知道，目前，这些网站（Facebook，Twitter的，Pinterest的等等）都使用履带重要的是意志的不的执行你的JavaScript和将因此无法读取任何meta标签你动态地Angularjs填充。
In this case it is important to know that currently the crawlers that these sites (facebook ,twitter, pinterest etc) use will not execute your JavaScript and will thus not be able to read any meta tags that you dynamically populate with Angularjs.
我写了一个博客张贴了这个问题，有建议的解决方案：<一href=\"http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app/\">http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app/
I have written a blog post about this issue, with a suggested solution: http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app/
这篇关于AngularJS和meta标签SPA模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
