Angular 元数据服务 [$injector:unpr]

Question

我正在为我的网站和 SEO 优化编写元数据服务，但似乎我无法克服错误。我不确定为什么。我将 html 控制器标签插入到 head 标签中
ng-controller="MetaDataCtrl"。我是 Angular 的初学者，正在从在线教程中学习。

我在以下位置找到此代码：dynamic metadata in angular

Main.js

    var app = angular.module('WebApp', [
      'ngRoute'
    ]);
      angular.module("WebApp").service("metadataService" ["$location",              "$rootScope", function($location, $routescope) {
     var self = this;
     self.tags = {};

// Set custom options or use provided fallback (default) options
self.loadMetadata = function loadMetadata(metadata) {
   metadata = metadata || {};
   metadata.title = metadata.title || 'BNL Consulting';
   metadata.description = metadata.description || 'We are BNL Consulting.';
   document.title = metadata.title;
   self.tags = metadata;
};

// Make sure data gets reloaded when navigation occurs
$rootScope.$on('$routeChangeSuccess', function (event, newroute, oldroute) {
   self.loadMetadata(newroute.metadata);
});
}
]),

    /**
     * Configure the Routes
     */
    app.config(['$routeProvider', '$locationProvider', function($routes, $location) {
     $location.html5Mode(true).hashPrefix('!');
      $routes
        // Home
        .when("/", {templateUrl: "partials/home.html",  
          controller: "PageCtrl",
          metadata: {
               title: 'This is my title',
               description: 'This is Desc.' }

        })
    }]);

    app.controller('PageCtrl', function (/* $scope, $location, $http */) {

    });

    .controller('MetadataCtrl', function ($scope, metadataService) {
       $scope.meta = metadataService;
    });

Answer 1

我想是因为你的标签在 head 标签上，这似乎是一个特例。我相信 this.

会回答你的问题

Answer 2

我解决了这个问题，我想分享给其他用户。我根据 SEO 优化文章尝试了这种方式，但它不起作用 google 机器人仍然看到 {{meta.tags.title }} 而不是一些动态文本。我没有以正确的方式编写我的服务，所以当我编写 ng-controller 时错误不断出现。如果您的服务工作正常，标签 angularJs 标签没有问题

app.service("metadataService", ['$rootScope', function($rootScope) {
    var self = this;
    self.tags = {};

    // Set custom options or use provided fallback (default) options
    self.loadMetadata = function loadMetadata(metadata) {
        metadata = metadata || {};
        metadata.title = metadata.title || 'Meta Data ';
        metadata.description = metadata.description || 'DESCRIPTION';
        metadata.keywords = metadata.keywords || 'Some, Key, Words' ;
        document.title = metadata.title;
        self.tags = metadata;
    }
    ;

    // Make sure data gets reloaded when navigation occurs
    $rootScope.$on('$routeChangeSuccess', function(event, newroute, oldroute) {
        self.loadMetadata(newroute.metadata);
    }
    );

}
])

Answer 3

这是正确的代码，如您链接的文章 (here) 中所示。我写了这篇文章，它对我来说是无缝的。这还包括硬编码后备标签，以防 Javascript 未被爬虫抓取。

注意：这些不是完整的文件，只是相关的重要部分。如果您需要帮助编写可以在别处找到的指令、服务等的样板。无论如何，这里...

app.js

您可以在此处为每条路线（标题、描述等）提供自定义元数据

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/portfolio', {
       templateUrl: 'views/portfolio.html',
       controller: 'PortfolioCtrl',
       metadata: {
           title: 'The Portfolio Page Title',
           description: 'The Portfolio Page Description' }
   })

metadata-service.js (服务)

设置自定义元数据选项或使用默认值作为后备。

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js（指令）

打包视图的元数据服务结果。

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

Angular 元数据服务 [$injector:unpr]

Angular metadata service [$injector:unpr]

service

seo

angularjs