javascript - Angular component relative templateUrl - Stack Overflow

admin管理员组

文章数量:1346292

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 ponent located in another module (angular-module-2)of my application. I want to use this constant many time in my project.

moduleponent("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

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 ponent located in another module (angular-module-2)of my application. I want to use this constant many time in my project.

module.ponent("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

• javascript
• angularjs
• ponents
• angularjs-ponents

Share Improve this question Follow edited Aug 3, 2016 at 17:19 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Aug 3, 2016 at 17:08 SaadSaad 7311 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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

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

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

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

When you wanted to use BASE_PATH just inject mmonSetting dependency in controller/ponent wherever you want.

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

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.ponent('myComponent', {
  templateUrl: function($injector){
    var mmonSetting = $injector.get('namespace.CommmonSetting');
    return mmonSetting.BASE_PATH +'/link/to/other/folder';
  },
  ....
});

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.

本文标签： javascriptAngular component relative templateUrlStack Overflow