jlcarvalho/index.html

## index.html
<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>
      <p></p>
    </script>

    <script type="text/ng-template" id="./components/home/home.html">
      <h2>Home</h2>
      <p>{{home.titulo}}</p>
    </script>
  </body>
</html>

## jPKBGG.markdown

      
    Raw
  

              jPKBGG.markdown
            
          
    jPKBGG

A Pen by jlcarvalho on CodePen.
License.

  
## script.js
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){
  console.log('AppController instantiated');
  $router.config([
    { path: '/', redirectTo: 'home'},
    { path: '/home', component: 'home', as: 'index' },
    { path: '/sobre', 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';
}

## style.css
[ng-viewport]{
  border: 1px solid black;
  padding: 10px 20px;
  margin-top: 10px;
}
	<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>
	<p></p>
	</script>

	<script type="text/ng-template" id="./components/home/home.html">
	<h2>Home</h2>
	<p>{{home.titulo}}</p>
	</script>
	</body>
	</html>
	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){
	console.log('AppController instantiated');
	$router.config([
	{ path: '/', redirectTo: 'home'},
	{ path: '/home', component: 'home', as: 'index' },
	{ path: '/sobre', 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';
	}
	[ng-viewport]{
	border: 1px solid black;
	padding: 10px 20px;
	margin-top: 10px;
	}