Angular JS 1.X Component Inheritance

Question

How does one achieve inheritance with Angular JS components? My sample is:

app.component('ResourceForm', controller: [
  function () {
    this.save = () => {
      $http(this.path, this.attributes());
    };
  },
]);

app.component('PersonForm', {
  bindings: {
    person: '<person',
  },
  controller: [
    function () {
      this.path = '/person/' + this.person.id;
      this.attributes = () => { name: this.name };
    },
  ],
});

<!-- templates/person_form.html -->
<form>
  <input type="text" ng-model="$ctrl.name" >
  <submit ng-click="$ctrl.save()"></submit>
</form>

Answer 1

As far as I know there is no real inheritance. You can play with configs to get some kind of inheritance:

var cfg = {
  bindings: {
    person: '<person',
    age: '@',
    onNameChange: '@'
  }
}

var component1 = angular.copy(cfg);
component1.controller = ctrl1;
app.component('component1', component1);

var component2 = angular.copy(cfg);
component2.controller = ctrl1;
app.component('component2', component2);