toddmotto/angular-component

Template functions with annotations / ng-strict-di

karlhorky opened this issue · 5 comments

As per my GitHub comment in this angular.js issue, I'm running into issues with template functions with annotating or ng-strict-di.

I know this issue may belong in the main angular.js repo, but I just wanted to ask, in case someone here had an idea how to get around this.

Just pushed a fix for this, see 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('')

Thanks @toddmotto! Works great. 👍

@karlhorky Sweet! I've published 0.0.5 which includes the new automatic annotations, for NPM as well. Closing, over and out.

@karlhorky FYI, I've just published 0.0.6, which aligns with further component() changes, small Object merge rather than if statements: 1229b25

💯 thanks, sounds good