Angular Component

angular-component.js

// Angular js foo module declaration
// which is later instantiated in html
var foo = angular.module('foo', []);

// Let's declare new angular hello component
foo.component('hello', {
	
	// Use template
	template: '<h3> {{ hello.message }} </h3>',
	
	// Define controller
	controller: function() {
		this.message = 'Hello I\'m component.';
	}	
	
});
	

how-to-use-angular-component.js

var foo = angular.module('foo', []);

foo.component('hello', {

   template: `
      <header ng-transclude="headerSection"></header>
      <h3> {{ hello.message }} </h3>
      <div ng-translude="contentSection"></div>`,

   // New bidings attribute
   bindings: {
      hello: '='
   },

   // It's true by default
   // You can declare all translusions using object
   // with mappings just like bindings (scope in directive) 
   // then you have to just add this transclusion into template
   // using ng-transclude="contentHeader" for example
   translude: {
      header: ?headerSection,
      content: contentSection
   },

   // It's true by default
   isolate: true,

   controller: function() {
      this.message = 'Hello I\'m component.';
   }    

});