草庐IT

javascript - 用于存储 SEO 元数据的 AngularJS 服务

coder 2024-02-29 原文

我已按照本教程进行操作,并尝试使用动态 seo 元数据服务。 https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html

但是,遇到了一个问题——似乎在 Controller 的 View 之外无法访问该服务。 <div ui-view></div>

这是我要实现的服务:

app.service('SeoMetaService', function() {

        var metaDescription = '';
        var metaKeywords = '';
        var title = '';
        return {
            metaDescription: function() { return metaDescription; },
            metaKeywords: function() { return metaKeywords; },
            title: function() { return title; },

            reset: function() {
                metaDescription = '';
                metaKeywords = '';
                title = '';
            },
            setMetaDescription: function(newMetaDescription) {
                metaDescription = newMetaDescription;
            },
            appendMetaKeywords: function(newKeywords) {
                for(var i=0;i<newKeywords.length;i++){
                        if (metaKeywords === '') {
                            metaKeywords += newKeywords[i];
                        } else {
                            metaKeywords += ', ' + newKeywords[i];
                        }
                }
            },
            setTitle: function(newTitle) { title = newTitle; }
        };
    });

Controller 中的用法:

app.controller('WelcomeController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) {
$(document).ready(function() {
    var keywords = ["bla bla","bla bla blah"];
    SeoMetaService.setTitle("title bla bla bla");
    SeoMetaService.setMetaDescription("description bla bla bla");
    SeoMetaService.appendMetaKeywords(keywords);

    console.log(SeoMetaService.metaDescription());
    console.log(SeoMetaService.metaKeywords());
});
}]);

在主页(one-page-app)上,简化:

<html ng-app="MainPage">
<head>
    <title>{{SeoMetaService.title()}}</title>

    <meta name="description" content="{{ SeoMetaService.metaDescription() }}">
    <meta name="keywords" content="{{ SeoMetaService.metaKeywords() }}">
    <base href="/">
</head>

<body>
 <div ui-view></div>
</body>

所以问题是 - 我认为 Angular 服务是单例。 但是,在运行 Controller 并设置数据后,它不会出现在 HTML 中。

如何修复/做什么?

最佳答案

我想你定义了 WelcomeController在 View 级别。

所以 SeoMetaService仅在 <div ui-view></div> 中存在的内部 html 中可见.

你需要定义 Controller WelcomeController<html> 级别或 <head> ,因为 SeoMetaService只能在定义 Controller 的标签内访问 WelcomeController .

此外,您需要删除对 JQuery 的引用并公开 SeoMetaService$scope .

代码应该是这样的。

HTML:

<head ng-controller='WelcomeController'>
<title>{{SeoMetaService.title()}}</title>

    <meta name="description" content="{{ SeoMetaService.metaDescription() }}">
    <meta name="keywords" content="{{ SeoMetaService.metaKeywords() }}">
    <base href="/">
</head>

Controller 更新:

app.controller('WelcomeController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) {

    var keywords = ["bla bla","bla bla blah"];
    SeoMetaService.setTitle("title bla bla bla");
    SeoMetaService.setMetaDescription("description bla bla bla");
    SeoMetaService.appendMetaKeywords(keywords);

    console.log(SeoMetaService.metaDescription());
    console.log(SeoMetaService.metaKeywords());

    // Added to the scope SeoMetaService
    $scope.SeoMetaService = SeoMetaService;


}]);

请注意,您也可以在另一个 Controller 中更改 SeoMetaService 的内容,因此例如更改 View ,您可以更新标题、元描述和反射(reflect)新 View 内容的元关键字。 这是 Controller 的可能示例 MyViewController

app.controller('MyViewController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) {

    var keywords = ["xxx","yyy"];
    SeoMetaService.setTitle("title my view");
    SeoMetaService.setMetaDescription("description my view");
    SeoMetaService.appendMetaKeywords(keywords);

}]);

当你使用 Controller 进入 View 时MyViewController关键字、标题、元描述和元关键字将被更新。

关于javascript - 用于存储 SEO 元数据的 AngularJS 服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39094609/

有关javascript - 用于存储 SEO 元数据的 AngularJS 服务的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近,当我启动我的Rails服务器时,我收到了一长串警告。虽然它不影响我的应用程序,但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次?当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗?/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  6. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  7. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  8. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  9. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不,不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本,提供另一个脚本,它将在其标准输入上获取请求,并在其标准输出上返回完整的响应。到目前为止一切顺利,但事实证明这真的很脆弱,因为它在第二个请求上中断并出现错误:/usr/b

  10. ruby-on-rails - 在 Rails 中调试生产服务器 - 2

    您如何在Rails中的实时服务器上进行有效调试,无论是在测试版/生产服务器上?我试过直接在服务器上修改文件,然后重启应用,但是修改好像没有生效,或者需要很长时间(缓存?)我也试过在本地做“脚本/服务器生产”,但是那很慢另一种选择是编码和部署,但效率很低。有人对他们如何有效地做到这一点有任何见解吗? 最佳答案 我会回答你的问题,即使我不同意这种热修补服务器代码的方式:)首先,你真的确定你已经重启了服务器吗?您可以通过跟踪日志文件来检查它。您更改的代码显示的View可能会被缓存。缓存页面位于tmp/cache文件夹下。您可以尝试手动删除

随机推荐