AngularJs: Show version number from either git or bower

All we need is an easy explanation of the problem, so here it is.

I have created an Angular application where I want to show the current version number of my application on screen. Currently I have implemented it as a constant:

application
    .constant('constants', {
        VERSION: '1.1.2'
    });

But this will require me to update the constant on every new version.
I use bower and git and I was wondering if there was any way to get the version number as a variable from one of these packages dynamically?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Solution is to use Gulp and gulp-ng-constant plugin. It will automate your release workflow, write version of your app in Angular constant service.

  • Install Gulp
  • Install gulp-ng-constant
  • Write your gulp task like following and run it gulp constants:
var gulp = require('gulp');
var ngConstant = require('gulp-ng-constant');

gulp.task('constants', function() {
  // get version from bower file
  var bower = require('./bower.json');
  // set version to ng contants
  var constants = { version: bower.version };

  return ngConstant({
      constants: constants,
      stream: true,
      name: 'app.constants'
    })
    // save ngConstant.js to src/app/
    .pipe(gulp.dest('./src/app'));
});

It will generate angular.module for you as following:

angular.module("app.constants", [])
  .constant("version", "0.0.1")

And the last step you need is to inject your generated constant service in your main app:

var app = angular.module('app', ['app.constants']);

You may be also interested in use gulp-bump task to automatically increment your app version before it will be added to ng-constant service.

See following tutorial: Versioning Your Angular Application with Gulp

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply