AngularJS and Virtual Paths - unit-testing

Question

How do you deal with Virtual Paths in AngularJS?
For example in my test environment, my base url is http://localhost/AppName/ and in production the root becomes http://www.mysite.com/.
So in dev, a $http.get goes to say http://localhost/AppName/Controller/Action but in prod that path does not exist, it needs to be http://www.mysite.com/Controller/Action.
How do you deal with $http calls and also, unit tests when mocking the backend with $httpBackend?
I have tried this in the _Layout.cshtml (using ASP.NET MVC) but that does not work in the unit tests:
<script>
(function () {
'use strict';
var app = angular.module('cs').value('urlHelper', {
getUrl: function (url) {
var basePath = '#VirtualPathUtility.ToAbsolute("~/")';
return basePath + url;
}
});
}());
</script>
Also have tried:
(function () {
'use strict';
var app = angular.module('cs', []);
app.run(['$rootScope', function ($rootScope) {
$rootScope.basePath = '/';
}]);
}());
Any ideas to not have to worry about switching the root path somewhere before deploying to prod?

Answer 1

basePath can be a value on its own and urlHelper a service that depends on basePath.
in the server side generated page, your server will inject whatever value VirtualPathUtility finds and in your tests you will manually inject whatever works for you.
razor:
<script>
angular.module('cs').value('basePath', '#VirtualPathUtility.ToAbsolute("~/")');
</script>
other js file:
angular.module('cs').factory('urlHelper', function (basePath) {
return {
getUrl: function (url) {
return basePath + url;
}
};
});
test:
var urlHelper;
beforeEach(function() {
module(function($provide) {
$provide.value('basePath', '/');
});
inject(function($injector) {
urlHelper = $injector.get('urlHelper');
});
});