Angular component relative templateUrl

Question

I'm developing a modular angular application with I defined I folder path (constant : BASE_PATH : "path/to/folder") in angular-module-1 module. I want to re-used this constant in a angular component located in another module (angular-module-2)of my application. I want to use this constant many time in my project.

module.component("relationshipSearch", {
templateUrl: BASE_PATH +'/link/to/other/folder',

witch is the best way to define this constant as a global variable visible in all the solution project Here is my project structure:

project
|-- angular-module-1
|   |-- angular-module-1.js
|   |-- angular-module-1.html
|-- angular-module-2
|   |-- angular-module-2.js
|   |-- angular-module-2.html

Pankaj Parkar · Accepted Answer · 2016-08-03 17:18:42Z

6

I'd say that create a common module named as angular-common where you can place common stuff like common service, factory, directive, constants, etc.

Then add the constant inside angular-common(this would be completely independent and plug-able) module. like below

//assuming `angular-common` is already defined
angular.module('angular-common').constant('commmonSetting', {
  'BASE_PATH': '/link/to/other/folder'
})

Next, inject this common module in app(which is main module, going to be used in ng-app/bootstrap) like below

angular.module('app', ['angular-common', 'ngRoute', ...other dependencies..])

When you wanted to use BASE_PATH just inject commmonSetting dependency in controller/component wherever you want.

app.component('myComponent', {
  templateUrl: function(commmonSetting){
    return commmonSetting.BASE_PATH +'/link/to/other/folder';
  },
  ....
})

answered Aug 3, 2016 at 17:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saad Over a year ago

Thanks that what I need :)

GamerDev · Accepted Answer · 2017-03-30 19:31:37Z

3

Sorry, for posting on an old thread with an accepted answer, but I wanted to say that the accepted answer is not minification safe. The minification safe way to write this is:

app.component('myComponent', {
  templateUrl: function($injector){
    var commmonSetting = $injector.get('namespace.CommmonSetting');
    return commmonSetting.BASE_PATH +'/link/to/other/folder';
  },
  ....
});

answered Mar 30, 2017 at 19:31

GamerDev

2,0164 gold badges24 silver badges32 bronze badges

Comments

zilj · Accepted Answer · 2016-08-03 17:17:15Z

0

Perhaps a different approach might help. Instead of setting the path why not just look to a file in the same directory.

You could use require(), for example:

template: require('./template-in-same-dir.html')

Note the template not templateUrl.

answered Aug 3, 2016 at 17:17

zilj

6291 gold badge7 silver badges13 bronze badges

4 Comments

Saad Over a year ago

I am asking about the best way to share/re-use constant between the different module of angular application.

zilj Over a year ago

And yet the title asks about a template url

zilj Over a year ago

I still think my solution to your specific problem is worth considering. By creating multiple modules youve coupled them together for the sake of a string. Seems overkill. But of course theres many ways to bake a cake, it just depends which one is our favourite flavour right! :)

Saad Over a year ago

I have many template in the same folder so i need to define a constant path when using require in TEMPLATEURL i can't use my constant

Collectives™ on Stack Overflow

Angular component relative templateUrl

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related