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

// angular < 1.5.0 :


////////////////////////////////
// file : demo.directive.js
////////////////////////////////
import {DEMO_CONTROLLER_NAME} from  './demo.controller';

export const DEMO_DIRECTIVE_NAME = 'demoDirective';

// before angular 1.5 component : directive was the way to create component
export default function demoDirective() {
	let directive = {
		restrict 	: 'E',
		scope 		: {},
		bindToController 	: {
			demoAttr1 : '=',
			demoAttr2 : '='
		},
		controller 	: DEMO_CONTROLLER_NAME,
		controllerAs 	: 'demoCtrl',
		template	: `
		<div>
		  <h1>
		    {{demoCtrl.title}}
		  </h1>
		  <p>
		    {{demoCtrl.demoAttr1}}
		  </p>
		  <p>
		    {{demoCtrl.demoAttr2}}
		  </p>		  
		</div>
		`
	};
	return directive;
}



////////////////////////////////
// file : demo.controller.js
////////////////////////////////
export const DEMO_CONTROLLER_NAME = 'demoController';

export default class demoController {
  constructor($service1, $service2) {
    this.$service1 = $service1;
    this.$service2 = $service1;
  } 
  
  init() {
   this.title = this.service1.getTitle(); // suppose it returns a title string 
  }
}
// injection :
demoController.$inject = [
  '$service1', 
  '$service2'
];


////////////////////////////////
// file : demo.module.js
////////////////////////////////
import demoController, {DEMO_CONTROLLER_NAME} from './demo.controller';
import demoDirective, {DEMO_DIRECTIVE_NAME} from './demo.directive';

export default angular
		.module('demoModule', [])
		.controller(DEMO_CONTROLLER_NAME, demoController)
		.directive(DEMO_DIRECTIVE_NAME, demoDirective);