AngularJS Services API.共享链接时不要加载标题标签

我需要帮助来完成一个项目。我在使用 angularjs 将标签加载到 HTML HEAD 中时遇到问题。

我认为的问题是，当我共享链接时，WhatsApp，Facebook等中的盗窃不会加载AngularJS，因此不会加载变量的数据，因此仅显示"源代码"。

正确：在此处输入图像描述

错：在此处输入图像描述

版本：角度 v1.6.1

代码 html：

<!DOCTYPE html>
<html ng-app="ecApp" ng-controller="ecCtlr">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
      <meta name="fragment" content="!">
      <title>{{produto.nome}}</title>
      <meta name="description" content="{{produto.texto_descricao}}" />
      <script src="angular.min.js"></script>
      <script src="app.js"></script>
      <script src="factory.js"></script>
      <script>
        var idLoja = 858;
        function carregaScope() {
          var scope = angular.element($('#ecCtlr')).scope();
          scope.$apply(function () {
            scope.buscaProduto(670706);
          });
        }
      </script>
    </head>
    <body onLoad="carregaScope();" id="ecCtlr">
    </body>
</html>

角度应用：

var api = 'http://localhost/api/';
var app = angular.module('ecApp', []);
app.controller('ecCtlr', function ($scope, $sce, ECProdutos) {
    $scope.buscaProduto = function(idProduto) {
        ECProdutos.buscaProduto(idLoja, idProduto).then(function (produto) {
            $scope.produto = produto;
            $scope.produtoPai = produto;
        });
    };
});

厂：

angular.module("ecApp").factory("ECProdutos", function ($q, $http) {
    var urlClass = 'ec/produto/';
    return {
        buscaProduto: function (idLoja, idProduto) {
            var promessa = $q.defer();
            $http.get(api + '' + urlClass + 'buscaProduto/' + idLoja + '/' + idProduto).then(
                function (result) {
                    promessa.resolve(result.data);
                }
            );
            return promessa.promise;
        }
    };
});

我找到了这个链接...无法在 angularjs 中解析：

http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

https://rck.ms/angular-handlebars-open-graph-facebook-share/

WhatsApp和Facebook爬虫不会在你的页面上运行JavaScript代码(还：-((，

我更喜欢以下解决方案：在您的后端服务器上托管两个 html 页面，第一页是社交共享奴隶，另一页是目标页面。

第一页：这个页面是社交分享的"奴隶"，我们称之为WhatsAppOrFacebook.html。它具有用于社交共享的硬编码属性：页面标题，描述，预览图像等，所有这些都是硬编码的。它有一个小脚本，可以将用户重定向到第二页(例如，使用以下命令：window.location='second-page.html'(。

第二页：此页面是目标页面，它是使用您的AngularJS代码或任何其他框架代码库构建的，用户从"第一页"(或WhatsAppOrFacebook.html重定向到此页面。

希望对您有所帮助！！

相关内容

最新更新

热门标签：