Brincando com o novo Router do AngularJS – Parte 1

O novo Router do AngularJS é um dos pontos chaves dessa fase de transição que o framework tem passado, pois ele será o cerne de uma das estratégias de migração das aplicações já existentes. Sendo uma robusta solução para gerenciamento de rotas de uma aplicação e oferecendo basicamente os mesmos recursos do UI-Router tem como diferencial a possibilidade de controlar as rotas tanto do 1.x quanto do 2.0 simultaneamente, permitindo assim a migração iterativa incremental das aplicações já escritas com o Angular 1.x.

Essa estratégia de migração vem está sendo especificada na sessão "Component Router Interop Strategy" do documento: AngularJS 1 to Angular 2 Upgrade Strategy.

Porém, tendo em vista que o Angular 2.0 ainda está em fase beta e provavelmente ninguém irá migrar suas aplicações agora, vamos dar uma olhada em como esse novo Router irá funcionar no Angular 1.4, que é a versão mais recente do framework que temos no momento.

Primeiros passos

A primeira mudança notada em relação ao antigo Router é o fato de agora termos que fazer nossas configurações de rotas em um controller e não mais no config de nossa aplicação, o que acaba por nos obrigar a ter pelo menos um controller na aplicação.

Nesse controller nós devemos injetar a dependência do nosso $router e nela passar as configurações de nossas rotas. Essas configurações são compostas basicamente de uma lista de objetos contendo as informações de cada rota, onde o path é o caminho da rota e o component é o nome do controller que será usado em nossa rota.

function AppController($router){
  $router.config([
    { path: '/', component: 'home' },        // Será linkado para um controller
    { path: '/sobre', component: 'sobre' }   // Será linkado para um template
  ]);
}
AppController.$inject = ['$router'];

E assim como no antigo Router ainda é necessário especificar para nossa aplicações onde o conteúdo das rotas será renderizado e para isso foi introduzida a diretiva ng-viewport.

Certo, agora basta incluir os controllers e/ou templates especificados em nossas rotas, o único porém é que o novo Router é mais rígido quanto a localização desses componentes. Nos obrigando a seguir a recomendação de estrutura de aplicações descritas no documento: Best Practice Recommendations for Angular App Structure.

Ok, mas o que isso quer dizer? Isso quer dizer que os seus componentes devem seguir o padrão de diretórios especificado nesse documento, ou seja, em nossa aplicação ficaria algo como:

.
+– sampleapp/
|    +– app.js
|    +– components/
|    |    +– sobre/
|    |    |    +– sobre.html
|    |    |    +– sobre.js
|    |    +– home/
|    |    |    +– home.html
|    |    |    +– home.js
|    +– index.html

Agora que já conhecemos a nova estrutura de diretórios é bom lembrar que por padrão nossos controllers devem começar com uma letra maiúscula e terminar com o sufixo Controller, logo, os controllers dos componentes especificados anteriormente ficariam:

home.js

function HomeController(){}

sobre.js

function SobreController(){}

Nós podemos alterar os padrões descritos anteriormente através da utilização do serviço $componentLoaderProvider.

Mas e para mudar de rota? Bom, para navegar para uma nova rota nós podemos simplesmente fazer da forma antiga com com uma âncora <a href="#/sobre"> ou utilizar a nova diretiva ng-link:

Home
Sobre

Note que em nosso segundo link nós passamos um objeto com a propriedade appNome. As propriedades desse objeto serão recebidas como parâmetros pelo controller de nossa rota sobre.

Para acessar esses parâmetros no controller nós utilizamos o serviço $routeParams:

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

No novo Router também é possível realizar redirecionamentos de uma rota para outra através da opção redirectTo e atribuir apelidos para as rotas através as como no exemplo a seguir:

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'];

Após utilizar um alias através do as nós podemos alterar nosso link para:

Home

Exemplo

//codepen.io/jlcarvalho/embed/jPKBGG?height=450&theme-id=6939&slug-hash=jPKBGG&default-tab=result&user=jlcarvalho

//assets.codepen.io/assets/embed/ei.js

Conclusão

O Novo Router ainda nos trás outras possibilidades como rotas filhas de um componente ou carregamento de múltiplos componentes utilizando diferentes viewports por rota mas eu deixarei para abordá-los no próximo artigo.

ps.: Originalmente esse artigo era gigante, mas devido a uma pane no meu editor markdown eu perdi 3/4 dele. Acabei resolvendo complementar o que eu não tinha perdido e publicar em duas partes, pois assim terei tempo para reescrever todo o conteúdo perdido