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!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?