<!DOCTYPE html>
<html>

  <head>
    <title>Angular 1.x Controller</title>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" title="" type="" />
  </head>

<body ng-app="app">
  <app></app>
  <script src="script.js"></script>
</body>

</html>
const AppComponent = {
  template: `
    <h1>Root Component</h1>
    <hr>
    <contacts></contaccts>
  `
};

angular.module('app', [ 'contacts' ])
    .component('app', AppComponent)
  ;

const ContactsComponent = {
  template: `
    <h3>Contacts go here.</h3>
  `
};

angular.module('contacts', [])
    .component('contacts', ContactsComponent)
  ;    
/* Styles go here */

#box {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  border-radius: 5px;
  text-shadow: 0 0 5px yellow;
  padding: 1px 30px;
  font: 25px sans-serif;
  text-align: center;
  line-height: 22px;
  letter-spacing: -2px;
}