Article: From ng-controller to components (step 4)

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.5.6/angular.min.js" data-semver="1.5.6"></script>
    <script data-require="ui-router@*" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <script src="home/home.controller.js"></script>
    <script src="about/about.controller.js"></script>
  </head>

  <body ng-app="plunker">
    <div class="navbar">
      <a href="#home">Home</a>
      <a href="#about">About</a>
    </div>
    <div ui-view></div>
  </body>

</html>

/* Put your css in here */

.navbar {
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid;
}

angular.module('plunker', [
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");
    //
    // Now set up the states
    $stateProvider
      .state('home', {
        url: "/",
        template: "<home></home>"
      })
      .state('about', {
        url: "/about",
        template: "<about></about>"
      })
    }
  );

<h1>Home</h1>
<p>{{ $ctrl.message }}</p>

<h1>About</h1>
<p>{{ $ctrl.message }}</p>

angular.module('plunker')
  .component('about', {
    restrict: 'E',
    scope: {},
    templateUrl: 'about/about.html',
    controller: AboutController
  });
  
  function AboutController() {
    var vm = this;
    vm.message = 'Hi from about';
  };

angular.module('plunker')
  .component('home', {
    restrict: 'E',
    scope: {},
    templateUrl: 'home/home.html',
    controller: HomeController
  });
  
  function HomeController() {
    var vm = this;
    vm.message = 'Hi from home';
  };