角元数据服务[$喷油器：unpr] [英] Angular metadata service [$injector:unpr]
本文介绍了角元数据服务[$喷油器：unpr]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为我的网站和搜索引擎优化optimisaion编写元数据服务，它似乎我不能让过去的错误。我不知道为什么。我有我的HTML标签的控制器插在头上的标签结果 NG-控制器=MetaDataCtrl。我在角beginer，我从上线教程刮。
我发现在这个code：在角 <动态元/ p> Main.js
VAR应用= angular.module（'Web应用程序'，[
ngRoute
]）;
angular.module（Web应用程序）。服务（metadataService[$位置，$ rootScope功能（$位置$ routescope）{
VAR自我=这一点;
self.tags = {};//设置自定义选项或使用提供回退（默认设置）选项
self.loadMetadata =功能loadMetadata（元数据）{
元元= || {};
metadata.title = metadata.title || BNL咨询;
metadata.description = metadata.description || 我们是BNL咨询。';
document.title时= metadata.title;
self.tags =元数据;
};//确保数据被重新加载时，会出现导航
$ rootScope。在$（'$ routeChangeSuccess'，函数（事件，newroute，oldroute）{
self.loadMetadata（newroute.metadata）;
}）;
}
]）， / **
*配置路由
* /
的app.config（['$ routeProvider'，'$ locationProvider'，函数（$路径，$位置）{
$ location.html5Mode（真）.hash preFIX（！）;
$路线
//首页
。当（/，{templateUrl：谐音/ /home.html的，
控制器：PageCtrl
元数据：{
标题：这是我的标题'，
介绍：这是说明。 } }）
}]）; app.controller（'PageCtrl'，功能（/ * $范围，$位置$ HTTP * /）{ }）; .controller（'MetadataCtrl'，函数（$范围，metadataService）{
$ scope.meta = metadataService;
}）;
解决方案
这是正确的code，当你链接的文章中（的这里）。我写的文章，这对我来说工作无缝。这也包括在情况下，JavaScript是不是由履带拿起硬codeD降效标签。
请注意：这些都不是完整的文件，只是那些相关的重要组成部分。如果您需要帮助编写指令，服务等，可以找到其他地方的样板。总之，这里去...
app.js
这是你为每个路线的在这里提供的自定义元数据（标题，描述等）
$ routeProvider
。什么时候（'/'， {
templateUrl：意见/ homepage.html'，
控制器：'HomepageCtrl'，
元数据：{
标题：基本页面标题'，
说明：基本页面描述'}
}）
。当（'/组合，{
templateUrl：意见/ portfolio.html'，
控制器：'PortfolioCtrl'，
元数据：{
标题：投资组合页面标题'，
说明：投资组合页面描述'}
}）
元数据service.js （服务）
设定的自定义元数据选项，或者使用默认值作为后备。
VAR自我=这一点;//设置自定义选项或使用提供回退（默认设置）选项
self.loadMetadata =功能（元数据）{
self.title = document.title时= metadata.title || 回退标题;
self.description = metadata.description || 回退说明';
self.url = metadata.url || $ location.absUrl（）;
self.image = metadata.image || fallbackimage.jpg';
self.ogpType = metadata.ogpType || '网站';
self.twitterCard = metadata.twitterCard || summary_large_image';
self.twitterSite = metadata.twitterSite || @fallback_handle';
};//路线更改处理，设置路由的定义的元数据
$ rootScope。在（'$ routeChangeSuccess'$，功能（事件，newRoute）{
self.loadMetadata（newRoute.metadata）;
}）;
metaproperty.js （指令）
包元数据服务结果的看法。
{回报
限制：'A'，
范围： {
元属性：'@'
}，
链接：功能postLink（范围，元素，ATTRS）{
scope.default = element.attr（内容）;
scope.metadata = metadataService; //关注元数据的变化，并设置内容
范围。$腕表（'元'，函数（的newval，OLDVAL）{
setContent（的newval）;
}，真正的）; //设置新的metadataService值或回默认的内容属性
功能setContent（元数据）{
VAR内容=元[scope.metaproperty] || scope.default;
element.attr（内容，内容）;
} setContent（scope.metadata）;
}
};
的index.html
＆LT; HEAD＆GT;
＆LT;标题＆GT;回退标题＆LT; /标题＆GT;
＆LT; META NAME =说明元属性=说明内容=后备描述＆GT; ＆LT;！ - 的Open Graph协议标签 - ＆GT;
＆LT;财产元=OG：URLCONTENT =fallbackurl.com元属性=URL＆GT;
＆LT;财产元=OG：标题CONTENT =回退标题元属性=标题＆GT;
＆LT;财产元=OG：说明内容=后备描述元属性=描述＆GT;
＆LT;财产元=OG：键入CONTENT =网站元属性=ogpType＆GT;
＆LT;财产元=OG：形象CONTENT =fallbackimage.jpg元属性=形象＆GT; ＆LT;！ - Twitter的卡标签 - ＆GT;
＆LT; META NAME =微博：名片内容=summary_large_image元属性=twitterCard＆GT;
＆LT; META NAME =微博：标题CONTENT =回退标题元属性=标题＆GT;
＆LT; META NAME =微博：说明内容=后备描述元属性=描述＆GT;
＆LT; META NAME =微博：网站CONTENT =@ fallback_handle元属性=twitterSite＆GT;
＆LT; META NAME =微博：图片：SRCCONTENT =fallbackimage.jpg元属性=形象＆GT;
＆LT; /头＆GT;
I'm writing metadata service for my website and SEO optimisaion and it seems i cant get past the error. I'm not sure why. I have my html controller tag inserted in head tag
ng-controller="MetaDataCtrl". I'm beginer in Angular and I'm scraping from on line tutorials.
I found this code in: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;
});
解决方案
This is the proper code, as shown in the article you linked (here). I wrote the article, and it worked seamlessly for me. This also includes hardcoded fallback tags in case Javascript isn't picked up by the crawler.
Note: these aren't the complete files, just the important parts of those that are relevant. If you need help writing the boilerplate for directives, services, etc. that can be found elsewhere. Anyway, here goes...
app.js
This is where you provide the custom metadata here for each of your routes (title, description, etc.)
$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)
Sets the custom metadata options or use defaults as fallbacks.
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 (directive)
Packages the metadata service results for the view.
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>
这篇关于角元数据服务[$喷油器：unpr]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
