Série AngularJS: Aprendendo usar Deep Linking ou Rotas – Parte 03
No artigo de hoje vamos conhecer o recurso de deep linking, do Angular; conhecido também como Rotas.
Olá, pessoal!
No artigo de hoje vamos conhecer o recurso de deep linking, do Angular; conhecido também como Rotas. Esta é uma funcionalidade que temos no Angular e é muito útil durante o dia a dia. Na prática funciona assim:
O que acontece quando chamar /create? Quero que carregue o arquivo createform.html e o controller createController.js . Pronto, é isso que fazemos com as Rotas. E qual a vantagem disso?
- Fácil manutenção;
- Tudo em uma página.
Na prática:
Vamos ver metendo mão na massa o que é melhor. Vou usar um projeto que está no meu GitHub chamado de recipeangularjsexample. Não há nada de Java nesse projeto. Considerando que você já sabe como configurar um projeto com AngularJS, então vou pular a parte de setup. Caso tenha dúvida, veja os artigos iniciais da série.
Criando arquivo app.js
No arquivo app.js que deixei na raiz do projeto deixe assim:
var app = angular.module("myapp",[]);
//creating route
app.config(function($routeProvider,$httpProvider,$locationProvider){
$routeProvider.
when("/",{templateUrl:"home.html"}).
when("/upper",{templateUrl:"upperfilter.html"}).
when("/serviceioc",{templateUrl:"serviceioc.html"}).
when("/watch",{templateUrl:"watch.html",controller:recipeController});
});
É muito simples a leitura: quando chamar upper, carregue o conteúdo do arquivo upperfilter.html. Mas quando chamar watch, carregue o conteúdo watch.html e o controller recipeController. Observe que não somos obrigados a ter o controller para cada link e o que informamos é o nome do controller e não o nome do arquivo .js. Quem está começando pode se confundir e querer informar o nome do arquivo js. Ao fazer isso e chamar alguma função teremos erro no console Java script.
Crie os arquivos HTML acima e, por enquanto, deixe-os vazios.
Criando o recipeController.js
Crie o arquivo recipeController.js conforme a imagem a seguir:
Criando o arquivo index.html
O arquivo index.html é que vai carregar os arquivos javascript, portanto deixe assim:
<html ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="js/lib/angular.js"></script> <script src="js/app.js"></script> <script src="js/recipeController.js"></script> </head> <body> <div ng-view> </div> </body> </html>
Não se esqueça do ng-app e ng-view. O ng-view é onde o conteúdo das páginas serão renderizados. Por isso que falei no inicio do artigo: uma única página para renderizar o conteúdo. É como um include.
Altere o conteúdo da página watch.html e acesse no browser: http://localhost:8080/receipeangularexample/#/watch. Veja que vai aparecer o conteúdo que temos dentro de watch.html.
Se você tentar http://localhost:8080/receipeangularexample/watch vai receber 404? Por quê? Porque para ser um deep linking precisamos colocar # para que o response seja interceptado e tratado como rota e não um serviço da aplicação.
No meu GitHub vocês podem encontrar exemplos com AngularJS.
Por hoje é isso. Simples, não?
Abraços!
é Bacharel em Sistemas de Informação e Especialista em Gestão e Estratégia de Negócios. Trabalha com TI desde 2003 e possui as certificações SCJP 5 e SCM. Trabalhou na IBM Brasil como Analista Programador Java, passou pelo laboratório da Enterprise Computing Lab (ECL) HP como Software Engineer, Ci&T como Engenheiro de Software em projeto JEE. Tem experiência internacional em Índia, Dubai e Londres. Atualmente é cofundador da ITSLabs (www.itslabs.com.br), uma start-up focada na criação de produtos web e mobile para start-ups. Também é autor dos livros "Guia do Exame SCJP", "Guia Prático JEE com Frameworks" e "TDD na prática".
