Come posso aggiornare i meta tag in AngularJS?

Sto sviluppando un’applicazione che utilizza AngularJS. Voglio aggiornare i meta tag sul cambio di rotta.
Come posso aggiornare i meta tag in AngularJS che possono essere visualizzati in “Visualizza sorgente” nella pagina?

ecco un codice HTML –

                 

  Test      

Ho risolto questo problema circa 2 giorni fa, creando un servizio e utilizzando $ window, oltre ad alcuni javascript classici.

Nel markup html create qualsiasi metatag di cui avete bisogno … (sentitevi liberi di lasciarli vuoti per ora, oppure potete impostarli su un valore predefinito).

     

Quindi avremo bisogno di creare un servizio come questo.

 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; }; }]); 

Ora dovremo utilizzare il servizio “self.setMetaTags” dal controller (al momento dell’inizializzazione) … chiamerai semplicemente la funzione ovunque sul controller.

  angular.module('app').controller('TestController', ['MetadataService',function(MetadataService){ MetadataService.setMetaTags({ title: 'this', description: 'works' }); }]); 

Se usi angular-ui-router , puoi usare ui-router-metatags .

Quando si “visualizza l’origine” nella maggior parte dei browser, si vede il documento che è stato originariamente inviato dal server prima di qualsiasi manipolazione JavaScript del DOM. Le app AngularJS in genere eseguono molte manipolazioni DOM ma non cambiano mai effettivamente il documento originale. Quando fai qualcosa come il tasto destro del mouse -> controlla elemento in FireFox o Chrome (con gli strumenti di sviluppo) vedrai il DOM renderizzato che include tutti gli aggiornamenti JavaScript.

Quindi, per rispondere alla tua domanda non c’è modo di aggiornare il meta tag description con JavaScript in modo tale che le modifiche si riflettano in “view source”. Tuttavia, puoi aggiornare il tag meta description in modo che tutti i plug-in del browser (ad esempio le app dei segnalibri e così via) vedano la descrizione aggiornata. Per farlo dovresti fare qualcosa del genere:

var metaDesc = angular.element($rootElement.find('meta[name=description]')[0]); metaDesc.attr('content', description);

Ho ottimizzato la risposta trovata qui per fare questo lavoro sul mio sito. Stabilisci il meta contenuto nella route config e quindi associa una funzione all’evento $ routeChangeSuccess per inserire il valore configurato in $ rootScope. Finché il tuo meta tag è legato al valore $ rootScope, tutto funzionerà come pianificato.

 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('!'); });       A Placeholder Title   @Styles.Render("~/Content/css")