Arquivo da tag: rotas

AngularJS – Rotas

pic_angularOlá pessoal. Dando continuidade ao meu estudo sobre o angular, agora vamos de rota.

Numa aplicação SPA – Single Page Application usando o AngularJS, a navegação entre as views da app ocorrem sem requisições ao servidor, e baseada em rotas interna da própria app.

Para criar rotas em nossa app, o cenário perfeito é ter um arquivo principal de configuração. Por exemplo: app.js:

//criando um módulo global app com dependência ao pacote ngRoute
var app = angular.module('app', ['ngRoute']);

//definindo as rotas
app.config(function ($routeProvider, $locationProvider) {

    // remove o # da url, padrão
    $locationProvider.html5Mode(true);

    $routeProvider.when('/', { templateUrl: '/Views/lancamentos.html' });

    $routeProvider.when('/index.html', { templateUrl: '/Views/home.html' });

    $routeProvider.when('/lancamentos', { templateUrl: '/Views/lancamentos.html'});

    $routeProvider.when('/tp-lancamento', { templateUrl: '/Views/tp-lancamento.html'});

});

O objeto $routeProvider em seu método WHEN faz o registro da rota, sendo o primeiro parâmetro a rota de fato e o segundo, um objeto literal indicando da propriedade templateUrl o destino da rota. Por exemplo, toda chamada da app que ocorrer para “/lancamentos”, o conteúdo apresentado será o contido em “/Views/lancamentos.html”.

O link HTML para chamar o conteúdo da rota ficará assim:

<ul>
    <li><a href="lancamentos">Lançamentos</a></li>
    <li><a href="tp-lancamento">Tipos de Lançamento</a></li>
</ul>

O resultado do redirecionamento é o conteúdo do arquivo HTML referenciado pela rota. Este conteúdo deve ser depositado num contêiner que é marcado pela diretiva ng-view.

Exemplo:

<head>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="Controllers/tpLancamento.js"></script>
    <script src="Controllers/lancamentos.js"></script>
</head>
<body>
   <ul>
       <li><a href="lancamentos">Lançamentos</a></li>
       <li><a href="tp-lancamento">Tipos de Lançamento</a></li>
   </ul>
   
   <div ng-view>
       <!--Conteúdo da view será carregado aqui--> 
   </div>
</body>

No código acima, observe a importação do arquivo “angular-route.min.js” responsável por manter o pacote ngRoute, utilizado no app.config. Também foi importado o arquivo app.js e os controladores para views.

ASP.NET Routing

aspnet-tutorial1O uso de URL amigáveis nos sites vem aumentando, principalmente após o surgimento do SEO – Search Engine Optimization. Este tipo de URL facilita a indexação pelos motores de busca e também para o usuário relembrar a URL que acessou.

Em ASP.NET a construção de URL amigaveis se dá por meio de Routings. Numa aplicação Web sem mapeamento de rotas, normalmente a solicitação de um navegador ocorre para um arquivo físico (página aspx): http://www.meusite.com.br/produtos.aspx?categoria=1001, sendo que a programação contida na página recupera o parâmetro por QueryString para tratar de forma dinâmica o conteúdo a ser enviado ao cliente.

Ao trabalhar com rotas, define-se padrões na organização da URL, não especificando o nome da página física que tratará a requisição, diferente do citado acima.

Uma sugestão de URL amigável para a URL tratada acima: http://www.meusite.com.br/produtos/categoria/informatica/smartphone, onde o padrão é http://www.meusite.com.br/produtos/categoria/{nome da categoria}/ {nome da subcategoria}. Desta forma, não é identificado o arquivo físico e a URL ainda fica mais agradável aos olhos do usuário.

Para implementar rotas em ASP.NET, o primeiro passo é a inclusão do arquivo global.asax ao projeto. O global.asax é uma classe que trata eventos a nível de aplicação e sessão, como por exemplo: quando a aplicação é iniciada ou finalizada, quando um sessão é criada ou destruída etc…

Os padrões de rotas devem ser especificados no evento Application_Start no global.asax, evento que ocorre quando a aplicação é iniciada.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Routing;
using System.Web.Security;
using System.Web.SessionState;

namespace ExemploRouting
{
    public class Global : System.Web.HttpApplication
    {

       protected void Application_Start(object sender, EventArgs e)
       {

       }

    }
}

No global.asax temos acesso ao objeto RouterTable que expõe a propriedade Routes, é nesta propriedade que é realizado os registro das rotas da aplicação através do método MapPageRoute.

O método MapPageRoute dá suporte a várias sobrecargas, a mais simples, recebe por parâmetro (1) o nome da rota, (2) o formato/regra da rota, (3) a página física que tratará a requisição da rota, (4) e a indicação se haverá verificação de permissões de segurança para rota (se false, todos os usuários tem acesso e se true, apenas os usuários identificados no web.config).

Um exemplo para criar a rota http://www.meusite.com.br/produtos/categoria/subcategoria:

RouteTable.Routes.MapPageRoute(&quot;rotaprodutos&quot;, &quot;produtos/categoria/{categoria}/{subcategoria}&quot;, &quot;~/produtos.aspx&quot;, false);

A expressão {categoria} e {subcategoria} indicam que a rota terá dois valores dinâmicos (espécie parâmetros) que poderão ser recuperados pela página física.

Na regra acima, a requisição para http://www.meusite.com.br/produtos/categoria/informatica/smartphone será direcionada para a página produtos.aspx que receberá como parâmetro os valores “informatica” e “smartphone”, indicando a categoria e subcategoria.

Na página, os parâmetros são recuperados pela propriedade Values do objeto global RouteData, desta forma:

Response.Write(RouteData.Values[&quot;categoria&quot;]);
Response.Write(RouteData.Values[&quot;subcategoria&quot;]);

Para finalizar, podemos adicionar um quinto parâmetro ao método MapPageRoute, que define o valor padrão dos parâmetros da rota quando não fornecidos:

RouteTable.Routes.MapPageRoute(&quot;rotaprodutos&quot;, &quot;produtos/categoria/{categoria}/{subcategoria}&quot;, &quot;~/produtos.aspx&quot;, false, new RouteValueDictionary { { &quot;categoria&quot;, &quot;geral&quot; }, { &quot;subcategoria&quot;, &quot;todas&quot; } });

Neste exemplos, os valores padrões para categoria e subcategoria será “geral” e “todas”, respectivamente.

Também é posível criar regras de rotas diretamente no IIS (http://www.iis.net/learn/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module).

Fontes:

  • ASP.NET 4.5 – Curso Completo – Luís Abreu
  • http://msdn.microsoft.com/en-us/library/vstudio/cc668177(v=vs.100).aspx