Good afternoon, I need some help to finalize a project. I am having a problem that when sharing links in social networks, the title, description and etc tags do not load with the values returned by the API (Using AngularJS).
I believe that the problem is that Whats, Face etc, do not load the Angular or does not wait for the request, and then take the source code, below some prints for the best understanding along with the code:
Right: Sharing Correctly in Face
Wrong: Sharing the wrong way on Face, as it is today
Version: AngularJS v1.6.1
HTML code:
<!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>
</head>
<body ng-init="buscaProduto(670706)" id="ecCtlr">
</body>
</html>
Angular APP:
var api = 'http://localhost/api/';
var app = angular.module('ecApp', []);
var idLoja = 858;
app.controller('ecCtlr', function ($scope, $sce, ECProdutos) {
$scope.buscaProduto = function(idProduto) {
ECProdutos.buscaProduto(idLoja, idProduto).then(function (produto) {
$scope.produto = produto;
$scope.produtoPai = produto;
});
};
});
Factory:
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;
}
};
});