Edit on
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="//rawgit.com/angular/router/master/dist/router.es5.js"></script>
  </head>
  <body ng-app="app" ng-controller="AppController as app">
    
    <h1>Angular 2 router playground</h1>
    
    <p>Name: {{app.name}}</p>
    
    <a ng-link="home">Home</a>
    <a ng-link="about">About</a>
    
    <div ng-viewport></div>
    
    <script type="text/ng-template" id="./components/home/home.html">
      Home template
    </script>
    <script type="text/ng-template" id="./components/about/about.html">
      About template
    </script>
  </body>
</html>
[ng-viewport]{
  border: 1px solid black;
  padding: 10px 20px;
  margin-top: 10px;
}
angular.module('app', ['ngNewRouter']);

angular.module('app').controller('AppController', AppController);
angular.module('app').controller('HomeController', HomeController);
angular.module('app').controller('AboutController', AboutController);

function AppController($router){
  console.log('AppController instantiated');
  $router.config([
    { path: '/', component: 'home' },
    { path: '/about', component: 'about' }
  ]);
  this.name = "Jurgen";
}
AppController.$inject = ['$router'];

function HomeController(){
  console.log('HomeController instantiated');
}
function AboutController(){
  console.log('AboutController instantiated');
}
Rerun