AngularJS: Remove development section when running in production

Question

I'm developing an AngularJS application inside Visual Studio 2013. I've added a custom HTML template with some debugging form fields to manipulate my scope when developing the site:

<div data-ng-include="'App/Development/development.html'"></div>

This is fixed in the bottom left corner and make it easier for me to quickly do some actions when testing the site.

But this should be removed when I deploy my website (Release configuration).

Does anyone have a good solution for doing this? Currently my App config and AngularJS is not integrated, so there is no way to tell my Angular application that it is running in production mode.

possible duplicate of http://stackoverflow.com/questions/4696175/razor-view-engine-how-to-enter-preprocessorif-debug — Deblaton Jean-Philippe, Mar 03 '15 at 10:53

score 1 · Accepted Answer · answered Apr 14 '15 at 19:34

1

My solution was to just check the hostname, if localhost I'm showing my development bar.

app.controller('development', function ($scope) {
    $scope.debug = document.location.hostname == "localhost";
});

answered Apr 14 '15 at 19:34

dhrm

14,335
34
117
183

Ahmet Zeytindalı · Answer 2 · 2015-03-03T16:47:38.887

0

Lets assume that you are using mvc with razor

Create a cs file

public class ConfigManager
{
    public static bool IsDebugMode()
    {
        #if DEBUG
           return true;
        #else
           return false;
        #endif
    }
}

get the value

<script>
  app.value('myValue', @ConfigManager.IsDebugMode());
 <script>

On your angular controller

app.controller('ctrl', function($scope, myValue)  {
  //use myValue
      $scope.isTestMode = myValue;
 });

html

<div data-ng-show="isTestMode" data-ng-include="'App/Development/development.html'"></div>

edited Mar 03 '15 at 16:47

answered Mar 03 '15 at 12:12

Ahmet Zeytindalı

451
3
10

But how can I make that property change depending on build configuration in Visual Studio (Debug, Release etc.)? – dhrm Mar 03 '15 at 12:14

score 0 · Answer 3 · answered Mar 03 '15 at 12:24

Put an ng-clock on it so the div will not show before angular loads and an ng-if so you will not load ("include") needed sources for a regular user. have the service/controller check the host(property of the window object). if it's local, show the panel using ng-if. you can also have it check the query string. so you can debug on remote by affixing ?debug=true to the Url for example.

AngularJS: Remove development section when running in production

3 Answers3