Set component TemplateURL to configured path

Question

I am trying to set up a component with a templateURL that is a relative path given a configuration module. However, since it is outside of a controller, I can't figure out how to bring in the dependency to the configuration

app.config.js:

angular.module('app.config', [])
    .constant('config', {
     TEMPLATES_URL: 'js_2/templates/',
     COMPONENTS_URL: 'js_2/components/'

})

home.app.js :

angular.module('home.app', ['rest.service', 'app.config']);

home.component.js:

angular.module('home.app').component('home', {
    /* HOW DO I INJECT THE 'config' DEPENDENCY */
templateUrl: config.TEMPLATES_URL + 'home.template.html',
controller: ....})

I know that when injecting into a controller you would simply inject 'config' and use it, but I don't know how to do this to a component

Thank you

Possible duplicate of [Angular 1.5 component method templateUrl + function](http://stackoverflow.com/questions/33841909/angular-1-5-component-method-templateurl-function) — Estus Flask, Aug 01 '16 at 16:56
I don't believe that link gives any way to actually inject into the templateURL method though does it? Would you follow the same procedure templateUrl: ['config', function(....)] — pasquers, Aug 01 '16 at 17:00
That's correct. All injectable functions in Angular are called in the same manner (the framework calls them with `$injector.invoke` method) and follow the same well-known DI scheme. You know one, you know them all. — Estus Flask, Aug 01 '16 at 17:05

score 0 · Answer 1 · answered Aug 10 '16 at 08:02

You need to set up a function on the templateUrl that injects your service and returns the url, like this:

  angular.module('fsad').component('fsadLeefloon', {
    bindings: {
      onChanges: '&?'
    },
    templateUrl: function(appConstant){return appConstant.paths.modules.fsad + 'leefloon/fsad-leefloon.html'},
    controller: controller
  });

Also, this structure guide may help you set up a good component style.

Set component TemplateURL to configured path

1 Answers1