.component template function not accepting annotations

[ninjasort]

Given a component:

import angular from 'angular';

export default {
  bindings: {},
  template: [
    '$element',
    '$attrs', 
    function ($element, $attrs) {
      return [
         '<div class="search-input">',
        '</div>'
      ].join('');
    }
  ],
  controller: [
    'Search', 
    function (Search) {}
  ]
};

The controller works, however the template doesn't accept the annotations and returns a string.

[Narretz]

This is coming in 1.5.0

[karlhorky]

Is there a workaround that we can use until then? Manual injection or something? Or even copying the relevant parts of 1.5.0?

I've been using Todd Motto's polyfill along with ng-strict-di and I can't seem to find a way to make it work...

[gkalpak]

@karlhorky, it sounds more like an issue for https://github.com/toddmotto/angular-component.
Beware that .component() is still a feature under development (although pretty clode to final), so make sure your polyfills keep up with the breaking changes or you might run into surprizes when trying to upgrade to 1.5.

[karlhorky]

Okay thanks @gkalpak, I've opened toddmotto/angular-component#11

[toddmotto]

Anyone using the component() polyfill, I've added support for Array dependency annotation under release 0.0.5, code here: toddmotto/angular-component@28ff08e

Demo for annotated code.

This allows for:

// Array annotations with minification
template: ['$element', '$attrs', function template(a, b) {
  console.log(a, b); // $element, $attrs
  return [
    '<div class="counter">',
      '<p>Counter component</p>',
      '<input type="text" ng-model="counter.count">',
      '<button type="button" ng-click="counter.decrement();">-</button>',
      '<button type="button" ng-click="counter.increment();">+</button>',
    '</div>'
  ].join('');
}]

// No annotations with automated minification (see source code `isArray` ternary + annotations)
template: function template(a, b) {
  console.log(a, b); // $element, $attrs
  return [
    '<div class="counter">',
      '<p>Counter component</p>',
      '<input type="text" ng-model="counter.count">',
      '<button type="button" ng-click="counter.decrement();">-</button>',
      '<button type="button" ng-click="counter.increment();">+</button>',
    '</div>'
  ].join('');
}

// Basic template String
template: [
  '<div class="counter">',
    '<p>Counter component</p>',
    '<input type="text" ng-model="counter.count">',
    '<button type="button" ng-click="counter.decrement();">-</button>',
    '<button type="button" ng-click="counter.increment();">+</button>',
  '</div>'
].join('')

[toddmotto]

@petebacondarwin Note on minification against this:

In the link function of Directives, you can use any name such as scope instead of $scope:

// works
link($scope) {}
// also works
link(scope) {}

I've added this same behaviour to the component() polyfill here to automatically annotate, would this be worth aligning in the Angular core as well? ... Assuming you need to declare template($element) {...} and template(element) {...} breaks.

Small comments below:

function makeInjectable(fn) {
  var isArray = angular.isArray(fn);
  if (angular.isFunction(fn) || isArray) {
    return function (tElement, tAttrs) {
      // isArray check, annotates the function if it's a function, or leaves as DI Array syntax
      return $injector.invoke((isArray ? fn : [
        '$element',
        '$attrs',
        fn
      ]), this, {
        $element: tElement,
        $attrs: tAttrs
      });
    };
  } else {
    return fn;
  }
}

This allows you to:

template: function(a, b) {
  console.log(a, b); // $element, $attrs
}

[petebacondarwin]

@toddmotto thanks for the idea but I am concerned that mixing injected and non-injected APIs is too dangerous.