Menu
I am developing an application using AngularJS. I want to update meta tags on route change.
How can I update meta tags in AngularJS which can be shown in "view source" on the page?
here is a HTML code -
<!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> 
478
The Angular Meta Service makes it easier to set different meta tags to different pages. It provides methods such as addTag() , addTags() , getTag() , getTags() , updateTag() , removeTag() , removeTagElement() etc. We can use them to manipulate meta tags. Let us find out how to use Meta service using an example.
<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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
