<commit_before># angular-component.js

Start using `component()` now!

> [View live demo in v1.3.0](http://jsfiddle.net/toddmotto/wwzeo0sv)

angular-component.js is a `<1kb` script that adds `component()` support in Angular 1.5 to all Angular versions above `1.3`, so you can begin using the new method now.

_Note: you must include this script straight after `angular.js` and before your application code to ensure the `component()` method has been added to the `angular.module` global.

> Read about the Angular 1.5 `component()` method [here](http://toddmotto.com/exploring-the-angular-1-5-component-method)

```html
<div ng-app="app">
  <div ng-controller="MainCtrl as vm">
    <counter count="vm.count"></counter>
  </div>
</div>

<script>
angular
.module('app', [])
.component('counter', {
    bindings: {
      count: '='
    },
    controller: 'CounterCtrl',
    template: function ($element, $attrs) {
      return `
        <div class="counter">
          <p>Counter component</p>
          <input type="text" ng-model="$ctrl.count">
          <button type="button" ng-click="$ctrl.decrement();">-</button>
          <button type="button" ng-click="$ctrl.increment();">+</button>
        </div>
      `;
    }
})
.controller('CounterCtrl', function CounterCtrl() {
  function increment() {
    this.count++;
  }
  function decrement() {
    this.count--;
  }
  this.increment = increment;
  this.decrement = decrement;
})
.controller('MainCtrl', function MainCtrl() {
  this.count = 4;<commit_msg>chore: Update readme with polyfill features table<commit_after># angular-component.js

Start using `.component()` now!

> [View live demo in v1.3.0](http://jsfiddle.net/toddmotto/wwzeo0sv)

angular-component.js is a `<1kb` script that adds `component()` support in Angular 1.5 to all Angular versions above `1.3`, so you can begin using the new method now.

_Note_: you must include this script straight after `angular.js` and before your application code to ensure the `component()` method has been added to the `angular.module` global.

> Read about the Angular 1.5 `component()` method [here](http://toddmotto.com/exploring-the-angular-1-5-component-method)

### Polyfill support

This polyfill supports the following feature set of the `.component()` method:

| Feature                                               | Support  |
|-------------------------------------------------------|----------|
| `angular.module.component()` method                   | Yes      |
| `bindings` property                                   | Yes      |
| `'E'` restrict default                                | Yes      |
| `$ctrl` controllerAs default                          | Yes      |
| `transclude` property                                 | Yes      |
| `template` support                                    | Yes      |
| `templateUrl` injectable for `$element` and `$attrs`  | Yes      |
| Lifecycle hooks: `$onInit`, `$postLink`, `$onDestroy` | Yes      |
| `require` Object for parent Component inheritance     | Yes      |
| `$` prefixed properties such as `$canActivate`        | Yes      |
| One-way data-binding emulated                         | No, todo |
| `$onChanges` lifecycle hook                           | No, todo |

### Component method usage

```html
<div ng-app="app">
  <div ng-controller="MainCtrl as vm">
    <counter count="vm.count"></counter>
  </div>
</div>

<script>
angular
.module('app', [])
.component('counter', {
    bindings: {
      count: '='
    },
    controller: 'CounterCtrl',
    template: function ($element, $attrs) {
      return `
        <div class="counter">
          <p>Counter component</p>
          <input type="text" ng-model="$ctrl.count">
          <button type="button" ng-click="$ctrl.decrement();">-</button>
          <button type="button" ng-click="$ctrl.increment();">+</button>
        </div>
      `;
    }
})
.controller('CounterCtrl', function CounterCtrl() {
  this.$onInit = function () {
    // component initialisation
  };
  this.$postLink = function () {
    // component post-link
  };
  this.$onDestroy = function () {
    // component $destroy function
  };
  function increment() {
    this.count++;
  }
  function decrement() {
    this.count--;
  }
  this.increment = increment;
  this.decrement = decrement;
})
.controller('MainCtrl', function MainCtrl() {
  this.count = 4;
{'fraction_non_alphanumeric': 0.16046831955922866, 'fraction_numerical': 0.006427915518824609, 'mean_word_length': 2.4388318863456986, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 9, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '277003', 'n_tokens_mistral': 1287, 'n_tokens_neox': 1245, 'n_words': 348}