angularjs - Angular 元数据服务 [$injector :unpr]-6ren

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

转载作者：塔克拉玛干更新时间：2023-11-03 02:40:14

27

4

我正在为我的网站和 SEO 优化编写元数据服务，但似乎我无法克服错误。我不确定为什么。我在 head 标签中插入了我的 html Controller 标签
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;
    });

最佳答案

这是正确的代码，如您链接的文章 (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(指令)

打包 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>

关于angularjs - Angular 元数据服务 [$injector :unpr]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33522148/

27

4

0

文章推荐： algorithm - 检测(很可能)不是照片的统一图像

文章推荐： indexing - 阻止某些地址被抓取 Robots.txt

文章推荐： html - 多语言网站的网站目录

angularjs - $injector.instantiate VS $injector.get VS $injector.invoke in angularjs
$injector.instantiate有什么区别, $injector.get和 $injector.invoke在 AngularJS 中？最佳答案鉴于以下服务: app.service('
angular - Reflective Injector 和 Injector in Angular 的区别
我尝试使用两种方式显式创建依赖关系。两者几乎相同，但我有点困惑使用反射注入(inject)器比普通注入(inject)器有什么优势，推荐使用哪种方式？使用注入(inject)器 import { I
javascript - Angular 中的 [$injector :nomod], [$injector:modulerr] 错误
我对 Angular js 很陌生，以下是我的代码 (function(angular){ var testAngular = angular.mo
Angular Dart 教程第 5 节 - 'self.injector$Injector'
在英雄之旅教程的第 5 节中，main.dart 包含以下行: final InjectorFactory injector = self.injector$Injector; 这是错字吗？它在 VS
javascript - Uncaught Error : [$injector:modulerr] and Uncaught Error: [$injector:nomod]
你好我是 Angular JS 的初学者，当我开始创建模块和 Controller 时，我无法打印我的消息，下面是我的代码 var myModule = angular.module("myFirst
dart - Angular Dart 给出错误 : The getter 'injector$Injector' isn't defined for the class 'self'
我只是想在 Angular Dart 中尝试路由。我在关注这个https://webdev.dartlang.org/angular/guide/router/1指导，但我收到错误。这一行给出错误
javascript - Express.js 应用程序尝试使用 Angular : Uncaught Error: [$injector:nomod] and Uncaught Error: [$injector:modulerr]
自从我设置一个与 Angular 一起运行的网络应用程序以来已经有一段时间了。我正在通过一个旧项目回顾我的步骤(尝试在我正在做的页面上实现一个 Controller ，确保 Controller 文件
javascript - Uncaught Error : [$injector:modulerr] Failed to instantiate module jacksApp due to: Error: [$injector:nomod]
我正在尝试学习 Angular，但无法正确加载它。我看了一下关于 SO 的类似问题，但找不到我要找的东西。有人知道为什么会出现这个错误吗？在我看来，我是否正确地调用了我的新应用程序/模块？我的剧本错
javascript - Uncaught Error : [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr]
我使用环回作为后端，使用 postgresql 作为数据库。所以我尝试使用 lb-service/js。如果我尝试在 login.js 中包含 lbServices (angular.module(
angularjs - Uncaught Error : [$injector:modulerr] http://errors. angularjs.org/1.2.14/$injector/modulerr
我正在尝试将表情符号应用程序注入(inject)我的项目。我添加了emoji.min.js并像这样引用它现在我也将它注入(inject)到我的项目中，如下所示: angular.module('
angularjs - 错误 : [$injector:unpr] http://errors. angularjs.org/1.3.5/$injector/unpr?p0=
当我尝试将 $cookie 包含到我的 Controller 中时出现此错误。任何人都可以向我解释我做错了什么？我在 index.html 中有 angular-cookie.js 我在 conf
javascript - 错误: $injector:modulerr Module Error Failed to instantiate module printStation due to: Error: [$injector:modulerr
我正在使用 anguarjs 开发一个应用程序，并出现如下错误: 无法实例化模块 myApp，原因是:错误:[$injector:modulerr] http://errors.angularjs.o
angularjs - 为什么我收到 ' Error: [$injector:modulerr] http://errors.angularjs.org/1.2.21/$injector/modulerr'
var demoapp = angular.module('demoapp', []); demoapp.controller('SimpleC
javascript - Angularjs 错误 : [$injector:modulerr] http://errors. angularjs.org/1.4.7/$injector/modulerr?p0
我正在尝试通过网络摄像头简单地读取二维码，但我在控制台打开 Angular 帮助页面时遇到此错误，但说使用 ngRoute Error: [$injector:modulerr] http://err
javascript - 未捕获错误 : [$injector:modulerr] http://errors. angularjs.org/1.6.6/$injector/modulerr?p0 仍然无法正常工作请检查我的代码
我正在尝试对此进行编码，只是使用路由从第一个页面跳转到另一个页面，但为什么它不起作用，我搜索并使用了很多技巧但仍然失败，请问有人吗？ index.html Angular Js
javascript - Uncaught Error : [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:unpr] Unknown provider: $routeProvider
我收到此错误: ncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$inje
javascript - ng-route 注入(inject)器错误 :modulerr [$injector:modulerr] http://errors. angularjs.org/1.3.14/$injector/modulerr
我正在尝试创建一个带有 Angular 路由的 SPA(单页应用程序)，但是当我将 ndRoute 添加到我的模块时，它给了我这个错误 Uncaught Error: [$injector:modul
javascript - Uncaught Error : [$injector:modulerr] http://errors. angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error
this is the error i m getting.这个问题被问了很多次。但是下面的代码在在线编译器中运行良好，但在我的本地系统中运行不佳，即使系统已连接到互联网，它也显示未定义 Angula
javascript - 由于 : Error: [$injector:nomod] http://errors. angularjs.org/1.2.26/$injector/nomod?p0=myApp，无法实例化模块 myApp
我正在尝试学习 Angular 并尝试在基于 Web 的教程之外编写我的第一个 Controller 。我一直在 JS 控制台的标题中收到错误消息，无法弄清楚发生了什么。该链接将我带到一个引用需要包含
angularjs - Uncaught Error : [$injector:modulerr] http://errors. angularjs.org/1.5.0/$injector/modulerr?p0=app&p1=Error%3A%20%….c%20
我在尝试编写代码时遇到此错误。我已经完成了其他 Stackflow 问题，但找不到答案。是什么导致了这个错误？ var app = angular.module("app", ['ui.router'

首页

博学

6Ren·AI

商城

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