Dynamically Change Page Title Keywords Meta Description In AngularJS

Dynamically Change Page Title Keywords Meta Description In AngularJS

In this Post We Will Explain About is Dynamically Change Page Title Keywords Meta Description In AngularJS With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to angular-metatags – AngularJS Modules, Plugins and DirectivesExample

In this post we will show you Best way to implement Angular – how to change Meta Title,Meta Keywords,Meta Description, hear for AngularJS and SEO – Part 2 – Title and meta descriptionwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   AngularJS create Objects inside controller

Changing the simple page header as the route web-applications changes is important. We will probably want to simple set the page title tag for seo as well as meta tags.

Were going to make a service that We can simple include in your Angularjs controllers to use. put as Add or Remove the simple to the service as we desire.

.service('customPageHeader', function() {
  var DynemicTitle = 'Live Web Applications';
  var webMeteDesc = '';
  var FocusKeywords = '';
  return {
    DynemicTitle: function() { return DynemicTitle; },
    webMeteDesc: function() { return webMeteDesc; },
    FocusKeywords: function() { return FocusKeywords; },
    reset: function() {
      DynemicTitle = 'Live Web Applications';
      webMeteDesc = '';
      FocusKeywords = '';
    PutPageTitle: function(newPageTitle) {
      DynemicTitle = newPageTitle;
    setMetaDescription: function(newMetaDescription) {
      webMeteDesc = newMetaDescription;
    appendMetaKeywords: function(newKeywords) {
      for (var key in newKeywords) {
        if (FocusKeywords === '') {
          FocusKeywords += newKeywords[key].name;
        } else {
          FocusKeywords += ', ' + newKeywords[key].name;

To use it Create sure your HTML layout is setup as below source code follows:

<html ng-app="liveApp" ng-controller="LiveCtrl">
    <title ng-bind="customPageHeader.DynemicTitle()"></title>

    <meta name="description" content="{{ customPageHeader.webMeteDesc() }}">
    <meta name="keywords" content="{{ customPageHeader.FocusKeywords() }}">
  <p>We are Web Technology Experts and Team who provide you very Important information on Web Development information,Examples and Demo, Interview Questions and Answers, live project problem solution and their solution and online free tutorials – “live24u.com”.</p>

Last to We can include here the service in your angularjs controllers and some change it based on the web-information.

Also Read :   Create Simple Accordion Menu using jQuery


I hope you have Got What is Angular – how to change Meta Title,Meta Keywords,Meta Description And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.