Угловая служба метаданных [$ injector: unpr]

Question

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

Это правильный код, как показано в статье вы связаны (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 (service)

Устанавливает пользовательские параметры метаданных или использует значения по умолчанию в качестве резервных копий.

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> 

Answer 2

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

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

} 
])