AngularJS and SEO Dynamically Title with Meta Description

AngularJS and SEO Dynamically Title with Meta Description

In this Post We Will Explain About is AngularJS and SEO Dynamically Title with Meta Description With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Dynamic Title and Description with AngularJSExample

In this post we will show you Best way to implement Update meta tags Using AngularJS, hear for Angular Dynamic Meta Descriptionwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Include simple include angular-metatags.js as well as include libs angular-metatags.min.js to my html file before my web-app js script and after the simple angular’s SEO core script

Angular Dynamic Meta Description

Angularjs Module

angular.module('liveApp','live_ng_meta')
.config(function ($routeProvider, ngMetaProvider) {
  $routeProvider
  .when('/home', {
    templateUrl: 'home-partials.html',
    meta: {
      title: 'Home-demo page - infinityknow.com', 
      description: 'This is the description infinityknow.com of the home page!'
    }
  })
  .when('/signin', {
    templateUrl: 'signin-partials.html',
    meta: {
      title: 'Live24u - signin page',
      description: 'signin to this wonderful infinityknow.com website!'
    }
  })
});

Markup index.html File

<title></title>
<!-- OR <title>{{live_ng_meta.title}}</title> -->    

JS Controller

.controller('liveCtrl', function(live_ng_meta) {

    live_ng_meta.setTitle('Live24u - Home Page');
    live_ng_meta.setDescription('');
    live_ng_meta.setOgImgUrl('https://infinityknow.com/tutorial/abc.jpg');
});

Update meta tags Using AngularJS

    <title>Test</title>
    
    

    var liveApp = angular.module('liveApp',[]);
    liveApp.service('live_meta_ser', function() {
       var title = 'Largest Web Devlopment Site';
       var liveMeta_desc = '';
       var cust_metakey = '';
       return {
          set: function(newTitle, newMetaDescription, some_keyword) {
              cust_metakey = some_keyword;
              liveMeta_desc = newMetaDescription;
              title = newTitle; 
          },
          custom_metaTitle: function(){ return title; },
          liveMeta_desc: function() { return liveMeta_desc; },
          cust_metakey: function() { return cust_metakey; }
       }
    });

   liveApp.controller('liveCtrl',function($scope,$rootScope,live_meta_ser){
      $rootScope.live_meta_ser = live_meta_ser;
      $rootScope.live_meta_ser.set("infinityknow.com","Angularjs","Vuejs Laravel");
   });

 

Example

I hope you have Got What is ngMeta | Dynamic meta tags for your Angular SPA And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.