Michael Michael - 8 days ago 6
AngularJS Question

How to handle Angular 1.x component URL root?

With the intent of having a way to setup component templates' URLs root, an available config object would be needed at the iif level.

(function () {
var app = angular.module('myApp');
app.component('myDashboard', {
// templateUrl: HOW_TO_GET_ROOT_HERE + '/path/to/template.html'
templateUrl: '/path/to/template.html'
});
})();


So far, the only way I found this possible is to have the module object added some custom properties - but it really feels nasty to do so.

// define
var app = angular.module('myApp', []);
app._config = {root: 'http://my.cdn.js'}
//...
// use
var app = angular.module('myApp');
app.component('myDashboard', {
templateUrl: app._config.root + '/path/to/template.html'
}


Is there any other, more neat, approach to do this?

Answer

Declare a new constant inside angular you app module. Then utilize that common configuration inside templateUrl function to form templateUrl. Now templateUrl function can have injectables.

app.constant('config', { rootPath: 'http://my.cdn.js'});

Component

app.component('myDashboard', {
   templateUrl: function(config){
     return config.rootPath + '/path/to/template.html'
   }
}
Comments