AngularJS 存储 SEO 元数据的服务

Question

我已按照本教程进行操作并尝试使用动态 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>

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

如何fix/what做？

Answer 1

我想您在视图级别定义了 WelcomeController。

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

您需要在 <html> 或 <head> 级别定义控制器 WelcomeController，因为 SeoMetaService 只能在定义控制器 [=13= 的标签内访问].

此外，您需要删除对 JQuery 的引用并在 $scope.

中公开 SeoMetaService

代码应该是这样的。

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 关键字、标题、元描述和元关键字将被更新。

AngularJS 存储 SEO 元数据的服务

AngularJS service to store SEO metadata

javascript

seo

angularjs

angularjs-scope