Arquivo da tag: routes

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.