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

<!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: "/",
        templateUrl: "home/home.html",
        controller: 'HomeController',
        controllerAs: 'vm'
      })
      .state('about', {
        url: "/about",
        templateUrl: "about/about.html",
        controller: 'AboutController',
        controllerAs: 'vm'
      })
    }
  );

<h1>Home</h1>
<p>{{ vm.message }}</p>

<h1>About</h1>
<p>{{ vm.message }}</p>

angular.module('plunker')
  .controller('AboutController', function() {
    var vm = this;
    vm.message = 'Hi from about';
  });

angular.module('plunker')
  .controller('HomeController', function() {
    var vm = this;
    vm.message = 'Hi from home';
  });