Angular служба метаданных [$ injector: unpr]

Я пишу службу метаданных для своего сайта и оптимизацию SEO, и кажется, что я не могу пройти мимо ошибки. Я не знаю, почему. У меня есть тег контроллера html, вставленный в head tag
ng-controller="MetaDataCtrl". Я начинаю в Angular, и я разбираюсь в онлайн-уроках.

Я нашел этот код в: динамических метаданных в 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;
    });

Ответ 1

Это правильный код, как показано в статье, которую вы связали (здесь). Я написал статью, и она работала без проблем. Это также включает в себя жестко закодированные теги возврата в случае, если 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 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>

Ответ 2

Я верю, потому что ваш тег находится на главном теге, который, кажется, является особым случаем. На ваш вопрос будет ответить .

Ответ 3

Я решил эту проблему, и хочу поделиться другими пользователями. Я пробовал этот путь на основе статьи для оптимизации SEO, но он не работает. Боты ботов все еще видят {{meta.tags.title}}, а не какой-то динамический текст. Я не правильно писал свои службы, поэтому при записи ng-контроллера ошибка повторяется. Если у вас работают теги, у них нет проблем с тегами 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);
    }
    );

}
])