yngvebn/angular.module.js

## angular.module.js
angular.module('app', []);

## component.js
function MyComponent(TestService){
	var vm = this;
	this.greeting =TestService.greet();
	console.log('We have a component');
}

MyComponent.templateUrl = 'test.tpl.html'
MyComponent.selector = 'my-new-component';
MyComponent.scope = {
	value : '='
}

angular.module('app').component(MyComponent);

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
  <script src="app.js"></script>
  </head>
<body ng-app="app">
      <my-new-component value="'I was provided!'"></my-new-component>
</body>
</html>

## test.service.js
angular.module('app').service('TestService', function(){
	this.greet = function(){
		return 'Hello from service';
	}
});
	function MyComponent(TestService){
	var vm = this;
	this.greeting =TestService.greet();
	console.log('We have a component');
	}

	MyComponent.templateUrl = 'test.tpl.html'
	MyComponent.selector = 'my-new-component';
	MyComponent.scope = {
	value : '='
	}

	angular.module('app').component(MyComponent);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">

	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-app="app">
	<my-new-component value="'I was provided!'"></my-new-component>
	</body>
	</html>
	angular.module('app').service('TestService', function(){
	this.greet = function(){
	return 'Hello from service';
	}
	});