Concise component definition for AngularJS 1.x

Component.js

'use strict';

angular.module('Component', [])
    .factory('Component', function () {

    return function(bindings, template, linkFn, options) {
        var directive = {
            scope: parseBindings(bindings),
            template: parseTemplate(template),
            link: linkFn
        };

        return angular.extend({}, directive, options);
    };

    function parseBindings(bindings) {
        return bindings.reduce(function(scope, binding) {
            var name = binding.slice(1);
            scope[name] = binding.slice(0, 1);
            return scope;
        }, {});
    }

    function parseTemplate(template) {
        return angular.isArray(template) ? template.join('') : template;
    }
});

PersonItem.js

'use strict';

angular.module('app', ['Component'])
  .directive('personItem', function (Component) {
    
    return Component(
      ['@name', '@age', '@highlight', '&onClick'], 
      ['<div ng-click="onClick($event)"',
          ' ng-class="{ highlight: highlight === \'true\' }">', 
          ' <h1>{{:: name}}</h1>',
          ' <p>{{:: age }}</p>',
       '</div>']);
    
  });

PersonItem is a typical dumb component, but if need be, the optional 3rd and 4th parameters can be used to make it smart.