web-dev-qa-db-fra.com

Comment puis-je mettre à jour des balises méta dans AngularJS?

Je développe une application utilisant AngularJS. Je veux mettre à jour les balises META sur le changement de route.
Comment puis-je mettre à jour des balises méta dans AngularJS pouvant être affichées dans "Afficher le source" sur la page?

voici un code 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>
angularjsmeta-tags
35
Amb
<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>
34
Vijayabaskaran M

Si vous utilisez angular-ui-router , vous pouvez utiliser ui-router-metatags .

7
kuceram

J'ai résolu ce problème il y a environ 2 jours en créant un service et en utilisant $ window, ainsi que du javascript classique.

Dans votre balise html, créez les métabalises dont vous avez besoin ...

<head> 
    <meta name="title"/>
    <meta name="description"/>
</head>

Ensuite, nous devrons créer un service comme celui-ci.

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

Maintenant, nous devrons utiliser le service "self.setMetaTags" depuis le contrôleur (à l'initialisation) ... vous appellerez simplement la fonction n'importe où sur le contrôleur.

  angular.module('app').controller('TestController', ['MetadataService',function(MetadataService){

   MetadataService.setMetaTags({
       title: 'this',
       description: 'works'
    });

   }]);
7
Robo Rick

Lorsque vous visualisez la source dans la plupart des navigateurs, vous voyez le document envoyé à l'origine par le serveur avant toute manipulation JavaScript du DOM. Les applications AngularJS font généralement beaucoup de manipulations DOM, mais cela ne change jamais le document original. Lorsque vous faites quelque chose comme un clic droit -> élément à inspecter dans FireFox ou Chrome (avec les outils de développement), vous verrez le DOM rendu qui inclut toutes les mises à jour JavaScript.

Donc, pour répondre à votre question, il n’existe aucun moyen de mettre à jour la balise méta de description avec JavaScript, de sorte que les modifications soient reflétées dans "Afficher le source". Toutefois, vous pouvez mettre à jour la balise meta description de sorte que tous les plug-ins de navigateur (par exemple, les applications de marque-pages, etc.) voient la description mise à jour. Pour faire cela, vous feriez quelque chose comme ceci:

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

1
Jeff Whelpley

J'ai peaufiné la réponse trouvée ici pour que cela fonctionne sur mon site. Vous établissez le méta-contenu dans la configuration de route, puis liez une fonction à l'événement $ routeChangeSuccess pour placer la valeur configurée dans le $ rootScope. Tant que votre balise meta est liée à la valeur $ rootScope, tout fonctionnera comme prévu.

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>
0
Engineer_Andrew