<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/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 - Novo Router</h1>
    
    <p>Nome: {{app.nome}}</p>
    
    <a ng-link="index">Home</a>
    <a ng-link="sobre({appNome: app.nome})">Sobre</a>
    
    <div ng-viewport></div> 
    
    <script type="text/ng-template" id="./components/sobre/sobre.html">
      <h2>Sobre</h2>
      <p>Autor: {{sobre.autor}}</p>
      <p>Nome da aplicação: {{sobre.app}}</p>
    </script>
    
    <script type="text/ng-template" id="./components/home/home.html">
      <h2>Home</h2>
      <p>{{home.titulo}}</p>
    </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('SobreController', SobreController);
angular.module('app').controller('HomeController', HomeController);

function AppController($router){
  $router.config([
    { path: '/', redirectTo: 'home'},
    { path: '/home', component: 'home', as: 'index' },
    { path: '/sobre/:appNome', component: 'sobre' }
  ]);
  
  this.nome = "Exemplo";
}
AppController.$inject = ['$router'];

function SobreController($routeParams){
  this.autor = 'Jean Lucas de Carvalho';
  this.app = $routeParams.appNome;
}
SobreController.$inject = ['$routeParams'];

function HomeController(){
  this.titulo = 'Brincando com o novo Router do AngularJS';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.