Angular 1.5 .component() Step-by-Step

Learn the new Angular Component Methode with this excellent Fiddle. Browse all 12 Versions of this Fiddle to understand the Angular 1.5 .component()

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<div id="demo.module.mBoard" ng-controller="mBoardCtrl as mb">
  <h2 ng-click="mb.addHost()">Monitoring Board <span class="small">{{mb.totalErrors}}</span></h2>
  <widget ></widget>
  <script type="text/ng-template" id="template.html">
    <div class="widget">
      {{mb.totalErrors}} <!-- Funktioniert nur, wenn isolate:false -->
    </div>
  </script>
</div>

JavaScript

angular
	.module('mBoard', [])
	.component('widget', {
    isolate: true,
    bindings: {
      e: '=addHost', /* two way binding */
    },
    controller: function () {
			this.addHost = function(){
      	alert(1);
      } 
    },
    templateUrl: 'template.html'
  })
	.controller('mBoardCtrl', function mBoardCtrl($interval, $scope) {
		this.data = [];
		this.totalErrors = 0;

	})
;

window.data = [
  {
    'host': 'CRM Main Server 1',
    'error':0
  },
  {
    'host': 'CRM LoadBalancer 1',
    'replicator':'CRM Main Server 1',
    'error': 2
  }
];

/* https://docs.angularjs.org/guide/bootstrap */
angular.bootstrap(document.getElementById("demo.module.mBoard"), ['mBoard']);