Question

I want to use $document to grab a server value from an input field.

var base_url = $document[0].getElementById('BaseUrl').value;

The base url is used for grabbing templates.

var base_url = $document[0].getElementById('BaseUrl').value;

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: base_url + '/partials/instances.html'
});

Since $document throws an error that it’s unknown I am guessing that it’s not available at config? Is there a way to find out what is available and what not? I could also use $http to get data from the server but that’s also not available.

Answer 1

AngularJS modules are bootstrapped in 2 phases:

• Configuration phase where only providers and constants are available.
• Run phase where services are instantiated based on registered providers. In this phase constants are still available but not providers.

The AngularJS documentation (section: “Module Loading & Dependencies”) gives the insight into this:

A module is a collection of configuration and run blocks which get
applied to the application during the bootstrap process. In its
simplest form the module consist of collection of two kinds of blocks:

Configuration blocks – get executed during the provider registrations
and configuration phase. Only providers and constants can be injected
into configuration blocks. This is to prevent accidental instantiation
of services before they have been fully configured.

Run blocks – get
executed after the injector is created and are used to kickstart the
application. Only instances and constants can be injected into run
blocks. This is to prevent further system configuration during
application run time.

Given the above you can only inject constants and providers (marked with the Provider suffix in the API docs). This probably answers your question but doesn’t help to solve your problem of templates loading…

I wonder if you couldn’t simply use the base tag in HTML and then simply use relative paths (to the base) without specifying absolute paths? Sth like (provided that the base is correctly configured):

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: 'partials/instances.html'
});