AngularJS Single page app with dynamic meta – AngularJS SEO

AngularJS Single page app with dynamic meta – AngularJS SEO

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.

Dynamic meta tags for your Angular single page application. Update meta tags based on the current route/state of your app. Supports ui-router and ngRoute

ngMeta is available for download on Bower and NPM. You can also download the source/minified JS file from GitHub

Step 1 : Simple Download ngMeta click Link

        bower install --save ngMeta //save here libs

Check out the Download section for other alternat download options (NPM file, JS file here below)

• Bower
  bower install –save ngMeta
• npm
  npm install –save ng-meta
• CDN
  

  https://cdnjs.cloudflare.com/ajax/libs/ng-meta/1.0.0/ngMeta.min.js
  

Stpe 2 : Simple Add ‘ngMeta’ directives as a project dependency in AngularJS

        angular.module('infinityknowApp', [....,'ngMeta']);

Stpe 3 : Add All the meta tags to your app.js / main.js routes/states

  angular.module('infinityknowApp', [....,'ngRoute','ngMeta'])
        .config(function($routeProvider) {
          $routeProvider
          .when('/', {
            templateUrl: 'views/home.html',
            controller: 'wayHomeCtrl',
            data: {
              meta: {
                'title': 'Home page - infinityknow.com',
                'description': 'Dynamic meta tags in your Angular SPA'
              }
            }
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'wayAboutCtrl',
            data: {
              meta: {
                'title': 'About Us - infinityknow.com',
                'description': 'Dynamic meta tags in your Angular SPA'
              }
            }
          })
          ...
        });

Stpe 4 :Initialize ngMeta using the run block

 angular.module('infinityknowApp', [....,'ngMeta'])
        .config(function(...) {
          ...
		  //your all routeProvider codes
        })
        .run(function(ngMeta) {
          ngMeta.init();
		  //init function all call
        });

Example

Stpe 5 :Use meta tags in your HTML file

        <title>{{ngMeta.title}}</title>
        
        

Example

We hope you get an idea about AngularJS Single page app with dynamic meta – AngularJS SEO
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.