epb epb - 1 month ago 13
AngularJS Question

Angular 1.5 component dependency injection

I've been trying to use the new Angular 1.5

component
syntax in a project, but I can't figure out how to inject a dependency into the component definition.

Here's my attempt at refactoring an existing directive to a component:

angular
.module('app.myModule')
.component('row', {
bindings: {
details: '@',
zip: '@'
},
controller: 'RowController',
templateUrl: basePath + 'modules/row.html' // basePath needs to be injected
})


For various reasons, we inject the constant
basePath
into all of our directives as part of the templateUrl.

How do I do this on a component, since the component definition is not a function?

Answer

You can use a function for templateUrl to construct URL. However, unlike the one for directives, component templateUrl function is injectable (ref docs), which means that you can inject constant (or any other injectable service) into it. Exactly what you need:

.component('row', {
  bindings: {
    details: '@',
    zip: '@'
  },
  controller: 'RowController',
  templateUrl: function(basePath, $rootScope) { // $rootScope is an example here
    return basePath + 'modules/row.html'
  }
})

Minification-safe array notation is also supported:

templateUrl: ['basePath', '$rootScope', function(basePath, $rootScope) {
  return basePath + 'modules/row.html'
}]

Demo: http://plnkr.co/edit/jAIqkzZGnaEVPaUjyBrJ?p=preview

Comments