Angular元數據服務[$ injector：unpr]

我正在爲我的網站和SEO optimisaion編寫元數據服務，看來我無法通過錯誤。我不知道爲什麼。我有我的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; 
    });

來源

2015-11-04 user3187715

這是正確的代碼，如你鏈接的文章（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>

來源

2015-11-19 17:28:49 Andrew

非常感謝你。這是完美的圖片。 On3更多的事情是在你的網站上使用prerender io？ – user3187715

@ user3187715，我們已經開始使用Prerender在一系列社交渠道（Facebook，Twitter，LinkedIn等）上實現完全動態的元數據，因爲他們的抓取工具仍然無法解析Javascript。話雖如此，這個答案適用於搜索引擎，並將爲這些流行的社交網絡上的大多數簡單用例提供基本的覆蓋。 – Andrew

我相信這是因爲你的標籤是在頭上的標籤，這似乎是一個特例。我相信你的問題將通過this回答。

來源

2015-11-04 12:53:56

我會嘗試，並報告我發現。 – user3187715

我解決了這個問題，我想爲其他用戶分享。我嘗試了這種基於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); 
    } 
    ); 

} 
])

來源

2015-11-06 06:06:12 user3187715

Angular元數據服務[$ injector：unpr]

回答

相關問題