write-AngularJS-ES6-component-angular2-like-part2.js

// with angular >= 1.5.x

////////////////////////////////
// file : demo.component.js
////////////////////////////////
export const DEMO_COMPONENT_NAME = 'demoComponent';

// before angular 1.5 component : directive was the way to create component
export const demoComponent = {
	template	: `
		<div>
		  <h1>
		    {{demoCtrl.title}}
		  </h1>
		  <p>
		    {{demoCtrl.demoAttr1}}
		  </p>
		  <p>
		    {{demoCtrl.demoAttr2}}
		  </p>		  
		</div>
	`,
	bindings 	: {
		demoAttr1 : '=',
		demoAttr2 : '='
	},		
	controllerAs : 'demoCtrl',
	controller 	 : 
	class demoController {
	    constructor($service1, $service2) {
	      this.$service1 = $service1;
	      this.$service2 = $service1;
	    } 
  
	    init() {
	     this.title = this.service1.getTitle(); // suppose it returns a title string 
	    }
	    // injection here
	    static get $inject() {
	      return [
	        '$service1', 
	        '$service2'    
	      ];
	    }
  	}	
};



////////////////////////////////
// file : demo.module.js
////////////////////////////////
import {demoComponent ,DEMO_COMPONENT_NAME} from './demo.component';

export default angular
		.module('demoModule', [])
		.component(DEMO_COMPONENT_NAME, demoComponent);