AngularJS 服务存储 SEO 元数据

问题描述 投票：0回答：2

我遵循本教程并尝试使用该服务来获取动态 seo 元数据。 https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html

但是，遇到了一个问题 - 似乎在控制器视图之外无法访问该服务。 

<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; }
        };
    });

在控制器中的用法：

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());
});
}]);

在主页（单页应用程序）上，简化：

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

所以问题是 - 我认为角度服务是单例的。 但是，运行控制器并设置数据后，它不会出现在 HTML 中。

如何修复/做什么？

javascript angularjs angularjs-scope seo
2个回答
1
投票

我想您在视图级别定义了 

WelcomeController
。

因此 

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

您需要在

WelcomeController
或
<html>
级别定义控制器
<head>
，因为
SeoMetaService
只能在定义控制器
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>

控制器更新：

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;


}]);

请注意，您也可以在另一个控制器中更改 SeoMetaService 的内容，因此例如更改视图，您可以更新反映新视图内容的标题、元描述和元关键字。 这是控制器的一个可能的示例 

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

}]);

当您使用控制器进入视图时

MyViewController
关键字、标题、元描述和元关键字将被更新。

0
投票

在 AngularJS 中，您可以创建一个服务来动态管理 SEO 元数据，从而更轻松地更新应用程序中每个页面的标题、描述和其他元标记。以下是您创建可重复使用的 SEO 服务的方法：

  1. 定义服务：创建一个与

    document
    对象交互的服务，以动态更新元标记。

  2. 注入依赖项：使用 AngularJS 的 

    $document
    服务来访问和操作 
    <head>
    部分。

  3. 编写函数：添加方法来设置页面标题并更新描述和关键字等元标记。

这是一个示例实现：

angular.module('myApp').service('SEOService', ['$document', function($document) {
    this.setTitle = function(title) {
        $document[0].title = title;
    };

    this.setMetaTag = function(name, content) {
        let existingTag = $document[0].querySelector(`meta[name='${name}']`);
        if (existingTag) {
            existingTag.setAttribute('content', content);
        } else {
            let metaTag = $document[0].createElement('meta');
            metaTag.name = name;
            metaTag.content = content;
            $document[0].head.appendChild(metaTag);
        }
    };
}]);

enter code here
  1. 使用服务：将
    SEOService
    注入控制器或组件，并在页面加载时调用其方法。

控制器中的用法示例：

angular.module('myApp').controller('PageController', ['SEOService', function(SEOService) {
    SEOService.setTitle('Welcome to My App');
    SEOService.setMetaTag('description', 'This is the description of my awesome app.');
    SEOService.setMetaTag('keywords', 'AngularJS, SEO, metadata');
}]);

此服务使您的元数据管理保持集中，使您的应用程序更易于维护且对 SEO 友好。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.