Olá Pessoal,
No post de hoje vamos conhecer o recurso de deep linking do Angular, conhecido também como Rotas.
Lets go…
Deep Linking ou Rotas
É 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 posts 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”
Note: No exemplo acima não necessariamente os arquivos de outras rotas precise existir, meu objetivo foi mostrar como funciona e para que você entenda melhor o conceito é bem simples.
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 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 post: 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 há um repositorio com alguns exemplos usando AngularJS
Por hoje é isso. Simples, não?
Abraços, see ya!!
Bem legal o post. Na nova versão do meu site eu uso essa feature do Angular para renderizar cada link do menu. 🙂
Excelente Sheldon. Tá usando o recurso de access no deepLiking?
abraco, Bazinga!! 🙂
Muito bom, parabéns! Me ajudou bastante!