如何在我的AngularJS控制器中获取特定于环境的URL？

Question

Situation

Our web project in production has a root URL like so: http://example.com . Our local dev instances (don't ask me why) default to a URL like so: http://localhost/SubDir where SubDir is a placeholder for the actual virtual subdirectory in IIS.

This is not the problem. As much as I would like to abolish that subdirectory URL thing, that is only illustrating a problem. If we were to move to a different domain or URL later on that incorporates a subdirectory URL, it would not be a problem for all of the instances in code where we use helpers to generate URLs (eg @Url.Action("GetUpdates") , etc).

Currently we have quite a bit of javascript that has been moved to external .js files that uses jQuery to get URL strings from hidden inputs whose values have been set to a Url helper like above. This is not too bad, it works.

The Problem

AngularJs. It is not the problem. It has however uncovered the problem. We want to remove jQuery from the project eventually. Right now, I am getting the URLs in my controller using jQuery (I am willing to break rules in an effort to get something out on time if I can be reasonably assured I will be given time to fix it later). It is now time to fix it, and I am at a loss.

Between the two environments, I get the following from @Url.Action("GetUpdates") :

• On http://example.com/ : => /Contest/GetUpdates
• On http://localhost/SubDir : => /SubDir/Contest/GetUpdates

The Question

How can I get an environment dependent URL into my AngularJs controller without the use of the helpers in that controllers file? I originally thought it might be as simple as using the hidden inputs and setting the ng-model, but does not seem to have worked. I have also looked into using an extension, RazorJS, but hoped that there would be a better way of doing it more inline with the Angular paradigm.

Anyone have any ideas? How do you get URLs into your controllers?

Answer 1

If you are able to change your environment config server side you can put the variable inline in a module constant. Then you can inject into your main app.

Here's a Plunker

// inline
angular.module('Preload',[]).contstant('CONFIG', {'BASE_URL':'http://localhost/foo'});

// inject
var app = angular.module('MainApp', ['Preload']);

// Controller
app.controller('MainCtrl', function($scope, CONFIG) {
  $scope.base_url = CONFIG.BASE_URL;