CODEWITHSUNDEEP
javascriptangularjscomponentsangularjs-components
Saad
Saad

Reputation: 73

Angular component relative templateUrl

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

Upvotes: 2

Views: 8216

Answers (3)

GamerDev
GamerDev

Reputation: 2016

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';
  },
  ....
});

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

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';
  },
  ....
})

Upvotes: 6

zilj
zilj

Reputation: 629

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.

Upvotes: 0

Related Questions