angularjs - ng2 - meta tags angular 6
¿Cómo puedo actualizar las metaetiquetas en AngularJS? (5)
Estoy desarrollando una aplicación usando AngularJS. Quiero actualizar las metaetiquetas en el cambio de ruta.
¿Cómo puedo actualizar metaetiquetas en AngularJS que se pueden mostrar en "ver fuente" en la página?
aquí hay un código HTML -
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="fragment" content="!" />
<meta name="title" content="Test App">
<meta name="description" content="Test App">
<meta name="keywords" content="Test,App">
<link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.min.css" />
<link rel="stylesheet" href="css/extra.css" />
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/controller.js"></script>
<script src="js/routes.js"></script>
</head>
<body>
<div ng-controller="mainCtrl" class="main-container" loading>
<div class="container-holder">
<div class="container">
<div ng-include src=''"elements/header.html"''></div>
<div ng-view class="clearfix"></div>
</div>
</div>
<div ng-controller="userCtrl" id="test">
<div class="container" class="login-container">
<div id="login-logo">
<img src="images/logo-300.png" alt="" class="login-img"/>
<br />
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
Ajusté la respuesta que encontré here para hacer que esto funcione en mi sitio. Establece el contenido meta en la configuración de ruta y luego vincula una función al evento $ routeChangeSuccess para poner el valor configurado en $ rootScope. Siempre que su metaetiqueta esté vinculada al valor de $ rootScope, todo funcionará según lo planeado.
angularApp.run([''$rootScope'', function ($rootScope) {
$rootScope.$on(''$routeChangeSuccess'', function (event, current, previous) {
$rootScope.title = current.$$route.title;
$rootScope.description = current.$$route.description;
$rootScope.keywords = current.$$route.keywords;
});
}]);
angularApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when(''/About'', {
templateUrl: ''Features/About/About.html'',
title: ''Here/'s the Title'',
description: ''A Nice Description'',
keywords: ''Some, Keywords, Go, Here''
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix(''!'');
});
<head>
<meta charset="utf-8" />
<meta name="keywords" content="{{keywords}}"/>
<meta name="description" content="{{description}}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="fragment" content="!" />
<title ng-bind="title">A Placeholder Title</title>
<link rel="icon" href="/Images/Logo.ico">
<base href="/" />
@Styles.Render("~/Content/css")
</head>
Cuando hace ''ver fuente'' en la mayoría de los navegadores, ve el documento que se envió originalmente desde el servidor antes de cualquier manipulación de JavaScript del DOM. Las aplicaciones de AngularJS generalmente hacen mucha manipulación de DOM pero en realidad nunca cambia el documento original. Cuando haga algo como hacer clic derecho -> inspeccionar elemento en FireFox o Chrome (con herramientas de desarrollo), verá el DOM renderizado que incluye todas las actualizaciones de JavaScript.
Por lo tanto, para responder a su pregunta, no hay forma de actualizar la metaetiqueta de descripción con JavaScript, de modo que los cambios se reflejarán en ''ver fuente''. Sin embargo, puede actualizar la etiqueta de metadescripción para que todos los complementos del navegador (por ejemplo, aplicaciones de marcadores, etc.) vean la descripción actualizada. Para hacer eso harías algo como esto:
var metaDesc = angular.element($rootElement.find(''meta[name=description]'')[0]); metaDesc.attr(''content'', description);
Resolví este mismo problema hace 2 días, al crear un servicio y al usar $ window, más algunos javascript clásicos.
En su marcado HTML, cree las metaetiquetas que necesite ... (siéntase libre de dejarlas en blanco por el momento, o puede establecerlas en un valor predeterminado).
<head>
<meta name="title"/>
<meta name="description"/>
</head>
Entonces necesitaremos crear un servicio como ese.
angular.module(''app'').service(''MetadataService'', [''$window'', function($window){
var self = this;
self.setMetaTags = function (tagData){
$window.document.getElementsByName(''title'')[0].content = tagData.title;
$window.document.getElementsByName(''description'')[0].content = tagData.description;
};
}]);
Ahora necesitaremos utilizar el servicio "self.setMetaTags" desde el controlador (al momento de la inicialización) ... simplemente llamará a la función en cualquier lugar del controlador.
angular.module(''app'').controller(''TestController'', [''MetadataService'',function(MetadataService){
MetadataService.setMetaTags({
title: ''this'',
description: ''works''
});
}]);
Si usa angular-ui-router , puede usar ui-router-metatags .
<html ng-app="app">
<title ng-bind="metaservice.metaTitle()">Test</title>
<meta name="description" content="{{ metaservice.metaDescription() }}" />
<meta name="keywords" content="{{ metaservice.metaKeywords() }}" />
<script>
var app = angular.module(''app'',[]);
app.service(''MetaService'', function() {
var title = ''Web App'';
var metaDescription = '''';
var metaKeywords = '''';
return {
set: function(newTitle, newMetaDescription, newKeywords) {
metaKeywords = newKeywords;
metaDescription = newMetaDescription;
title = newTitle;
},
metaTitle: function(){ return title; },
metaDescription: function() { return metaDescription; },
metaKeywords: function() { return metaKeywords; }
}
});
app.controller(''myCtrl'',function($scope,$rootScope,MetaService){
$rootScope.metaservice = MetaService;
$rootScope.metaservice.set("Web App","desc","blah blah");
});
</script>
<body ng-controller="myCtrl"></body>
</html>