franciscotln/scripts.js

## scripts.js
angular
.module('myApp', [])
.factory('DataFactory', function DataFactory($q) {
  return {
    getData() {
      return $q.when([
        {id: 1, name: 'A'},
        {id: 2, name: 'B'},
        {id: 3, name: 'C'},
        {id: 4, name: 'D'},
        {id: 5, name: 'E'},
        {id: 6, name: 'F'},
        {id: 7, name: 'G'},
        {id: 8, name: 'H'},
        {id: 9, name: 'I'},
        {id: 10, name: 'J'},
        {id: 11, name: 'K'},
        {id: 12, name: 'L'},
        {id: 13, name: 'M'},
        {id: 14, name: 'N'},
        {id: 15, name: 'O'},
        {id: 16, name: 'P'},
        {id: 17, name: 'Q'},
        {id: 18, name: 'R'},
        {id: 19, name: 'S'},
        {id: 20, name: 'T'},
        {id: 21, name: 'U'},
        {id: 22, name: 'V'},
        {id: 23, name: 'W'},
        {id: 24, name: 'X'},
        {id: 25, name: 'Y'},
        {id: 26, name: 'Z'},
        {id: 27, name: 'AA'},
        {id: 28, name: 'AB'},
        {id: 29, name: 'AC'},
        {id: 30, name: 'AD'},
        {id: 31, name: 'AE'},
        {id: 32, name: 'AF'},
        {id: 33, name: 'AG'},
        {id: 34, name: 'AH'},
        {id: 35, name: 'AI'},
        {id: 36, name: 'AJ'},
        {id: 37, name: 'AK'},
        {id: 38, name: 'AL'},
        {id: 39, name: 'AM'},
        {id: 40, name: 'AN'},
      ]);
    }
  };
})
.component('rootComponent', {
  template: `
    <div class='root-component__container' ng-if='$ctrl.isLoading'>
      <span>Loading...</span>
    </div>
    <div class='root-component__container' ng-if='!$ctrl.isLoading'>
      <h4 class='root-component__title'>My Example App</h4>
      <list-component></list-component>
    </div>
  `,
  controller($timeout) {
    class RootComponent {
      $onInit() {
        this.isLoading = true;

        $timeout(() => {
          // fake delay
          this.isLoading = false;
        }, 1000);
      }
    }

    return new RootComponent();
  }
})
.component('listComponent', {
  template: `
    <table class='list-component__table'>
      <thead class='list-component__thead'>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody class='list-component__tbody' ng-click='$ctrl.delegateDelete($event)'>
        <tr id='{{item.id}}' class='list-component__tbody-row' ng-repeat='item in $ctrl.data track by item.id'>
          <td ng-bind='item.id'></td>
          <td ng-bind='item.name'></td>
        </tr>
      </tbody>
    </table>
  `,
  controller(DataFactory) {
    // controller doesn't have the dependencies bound to `this.`
    // list items don't have each an event listener ng-click
    // using event delegation.
    // controllers don't have the methods declared inside the constructor,
    // using prototype.
    class ListComponent {
      $onInit() {
        DataFactory.getData().then(data => {
          this.data = data;
        });
      }

      delegateDelete({ target }) {
        const itemId = target.closest('tr.list-component__tbody-row').id;
        this.data = this.data.filter(({ id }) => id !== parseInt(itemId))
      }
    }

    return new ListComponent();
  }
});
	angular
	.module('myApp', [])
	.factory('DataFactory', function DataFactory($q) {
	return {
	getData() {
	return $q.when([
	{id: 1, name: 'A'},
	{id: 2, name: 'B'},
	{id: 3, name: 'C'},
	{id: 4, name: 'D'},
	{id: 5, name: 'E'},
	{id: 6, name: 'F'},
	{id: 7, name: 'G'},
	{id: 8, name: 'H'},
	{id: 9, name: 'I'},
	{id: 10, name: 'J'},
	{id: 11, name: 'K'},
	{id: 12, name: 'L'},
	{id: 13, name: 'M'},
	{id: 14, name: 'N'},
	{id: 15, name: 'O'},
	{id: 16, name: 'P'},
	{id: 17, name: 'Q'},
	{id: 18, name: 'R'},
	{id: 19, name: 'S'},
	{id: 20, name: 'T'},
	{id: 21, name: 'U'},
	{id: 22, name: 'V'},
	{id: 23, name: 'W'},
	{id: 24, name: 'X'},
	{id: 25, name: 'Y'},
	{id: 26, name: 'Z'},
	{id: 27, name: 'AA'},
	{id: 28, name: 'AB'},
	{id: 29, name: 'AC'},
	{id: 30, name: 'AD'},
	{id: 31, name: 'AE'},
	{id: 32, name: 'AF'},
	{id: 33, name: 'AG'},
	{id: 34, name: 'AH'},
	{id: 35, name: 'AI'},
	{id: 36, name: 'AJ'},
	{id: 37, name: 'AK'},
	{id: 38, name: 'AL'},
	{id: 39, name: 'AM'},
	{id: 40, name: 'AN'},
	]);
	}
	};
	})
	.component('rootComponent', {
	template: `
	<div class='root-component__container' ng-if='$ctrl.isLoading'>
	<span>Loading...</span>
	</div>
	<div class='root-component__container' ng-if='!$ctrl.isLoading'>
	<h4 class='root-component__title'>My Example App</h4>
	<list-component></list-component>
	</div>
	`,
	controller($timeout) {
	class RootComponent {
	$onInit() {
	this.isLoading = true;

	$timeout(() => {
	// fake delay
	this.isLoading = false;
	}, 1000);
	}
	}

	return new RootComponent();
	}
	})
	.component('listComponent', {
	template: `
	<table class='list-component__table'>
	<thead class='list-component__thead'>
	<tr>
	<th>ID</th>
	<th>Name</th>
	</tr>
	</thead>
	<tbody class='list-component__tbody' ng-click='$ctrl.delegateDelete($event)'>
	<tr id='{{item.id}}' class='list-component__tbody-row' ng-repeat='item in $ctrl.data track by item.id'>
	<td ng-bind='item.id'></td>
	<td ng-bind='item.name'></td>
	</tr>
	</tbody>
	</table>
	`,
	controller(DataFactory) {
	// controller doesn't have the dependencies bound to `this.`
	// list items don't have each an event listener ng-click
	// using event delegation.
	// controllers don't have the methods declared inside the constructor,
	// using prototype.
	class ListComponent {
	$onInit() {
	DataFactory.getData().then(data => {
	this.data = data;
	});
	}

	delegateDelete({ target }) {
	const itemId = target.closest('tr.list-component__tbody-row').id;
	this.data = this.data.filter(({ id }) => id !== parseInt(itemId))
	}
	}

	return new ListComponent();
	}
	});