Roteamento no Angular

E Aê!

Roteamento é uma das partes comuns do AngularJS, que acabamos por usar com bastante frequência em aplicações de uma só tela. A idéia é que você tem um ponto do HTML que muda o innerHTML e o Controlador Angular que está associado, montando assim várias exibições diferentes (para funcionalidades diferentes) dentro da mesma aplicação, sem que você tenha de carregar toda uma página.

ng-view com duas rotas

É uma funcionalidade que existia nas versões anteriores do AngularJS como parte integrante do angular.min.js, mas hoje é distribuído como um módulo separado, o angular-route.

Usando bower, pode-se usar: bower install angular; bower install angular-route; Caso você não o esteja usando, basta baixar o arquivo angular-route.min.js do site do Angular (angularjs.org).

Para usar o roteamento, é preciso importar o módulo ngroute na sua aplicação, com:

var app = angular.module('myApp', ['ngroute']);

E depois é preciso configurar o roteamento com a função config:

app.config(function($routeProvider){

    $routeProvider

         .when('/AboutUS', {templateUrl: 'about.htm', controller: 'AboutUsController'})

         .when('/ContactUS', {templateUrl: 'contact.htm', controller: 'ContactUsController'})

         .otherwise(/404);

});

Na index.htm precisa existir um elemento ng-view no ponto que os outros templates serão injetados.

Observações:

• ngRoute suporta somente uma ngView por App. Isso significa que eu tenho só um ponto de troca de template, mas muitos templates aplicados a um só ponto;
• Torna natural o uso no Controller o objeto $location, para mudar de rotas e visualizar outras partes da app 

$location.path('/AboutUs'); // muda a url para a AboutUs

• Aceita parâmetros vindos pela URL. Ao definir a rota em um when, pode-se fazer assim:

.when('/user/:id', {templateUrl: 'views/user.htm', controller: 'UserController'}) 

e ao chamar a url: http://www.seuApp.com/user/12345 seu controller consegue capturar esse valor 12345 com o seguinte código:

function UserController($routeParams){
    console.log($routeParams.id);
}

Existe também um outro sujeito para roteamento, o UI-Router, mas esse fica pra uma outra vez.