AngularJs

na prtica

Tabela de contedos
Introduo

Introduo

Rotas

AngularJs na prtica

Introduo
O objetivo desse e-book, mostrar como o AngularJs um fcil de se aprender e quo
poderoso ele .
O AngularJs um framework JavaScript para o front end, o design pattern dele MVC ou
MVVM.
Nesse e-book iremos utilizar o MVC como padro, para quem no conhece, MVC significa
Model View Control. O model responsvel por se comunicar com o mundo externo, seja
acessando Apis ou arquivos, ele representado pelos services no angular. O view
responsvel pela exibio dos dados que so enviados pela controller, a view
representada pelo html. A control responsvel por gerenciar os dados que so enviados
pela view ou retornados da model, representada pelas controllers.
Esse ecossistema de inicio pode ser complexo pra quem no sabe como funciona na
prtica o MVC, mas com o tempo a lgica vai fluindo, pois o fluxo de informaes sempre
ser para a maioria das coisas que fazemos em um sistema, ou seja, sempre fazemos o
CRUD (Create, Read, Update e Delete) das informaes.
Com o MVC iremos utilizar rotas, elas so responsveis por ditar qual ser o arquivo html e
controller que iro conversar numa determinada rota. Digamos estamos fazendo um
sistema de escola e precisamos listar todos os alunos, certamente precisamos de um
arquivo html com uma tabela, na controller teremos uma lista (array) para listarmos esse
contedo na tabela ou essa lista retornada de um service.

Introduo

AngularJs na prtica

Rotas
As rotas so responsveis por informar ao angular, qual template html e controller sero
responsveis por uma determinada rota que o usurio acessar.
Para utilizar um mdulo de rotas especifico, precisamos colocar o nome do mdulo dentro
das dependencias do mdulo principal da aplicao.
Veja abaixo
angular.module('App', ['ngRoute']);

O mdulo ser inicializado e utilizado dentro da funo .config(), do mdulo principal da

aplcao.
Temos dois mdulos focados em rotas, um o ngRoute e o outro o ui-route.

ngRoute
O mdulo responsvel pelas rotas, se chama ngRoute , ele uma dependncia, ou seja,
um mdulo externo que precisa ser inserido no arquivo principal.
A varivel que precisa ser chama na funo .config() , se chama $routeProvider , essa
varivel tem a funo .when() , que seta as rotas e suas configuraes e o otherwise() ,
que indica qual rota que a aplicao deve redirecionar, caso tentem acessar uma rota
inexistente.
A funo .when() recebe dois parmetros, o primeiro parmetro a rota e o segundo um
objeto que contm dois campos, o primeiro o campo indica o template HTML e o segundo
indica a controller.
Veja o exemplo abaixo.
.config(function($routeProvider){
$routeProvider
.when('/', {
template: '<h1>Oi Galera</h1>',
controller:'MainCtrl'
});
})

Rotas

AngularJs na prtica

O primeiro parmetro da funo .when() o '/' , indicando a rota principal da aplicao

e o segundo parmetro com o campo template e controller. O campo template recebe tags
htmls, mas como fazemos pra indicar o caminho at um arquivo HTML?
Precisamos trocar esse campo pelo templateUrl, ficando assim:
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller:'MainCtrl'
});
})

Voc ver o template ou templateUrl nos mdulos de rotas e no uso de diretiva.

A funo otherwise recebe um objeto que contm o campo redirectTo , o valor desse
campo ser a rota que a aplicao ira redirecionar, caso tentem acessar uma rota
inexsistente.
Veja o exemplo:
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller:'MainCtrl'
})
.otherwise({redirectTo:'/'});
})

Nota: No de responsabilidade do mdulo de rotas, redirecionar para rotas, caso haja

erros https (404, 500, 400 e etc). No captulo Http iremos tratar isso de forma correta.
Para funcionar, precisamos setar no arquivo html principal da aplicao a diretiva chamada
ng-view , onde essa diretiva estiver, ser carregado via ajax os arquivos html que esto

setados no templateUrl de cada rota.

Geralmente utilizamos o arquivo index.html como arquivo prncipal para a aplicao
angular , como modelo SPA (Single Page Aplication). Para utilizarmos o ngRoute ,

precisamos inicializa-lo dentro do body do arquivo index.html sendo uma tag <ng-view>
</ng-view> ou um atributo numa tag <div ng-view></div> . Se voc bootstrap por exemplo,

poderia adicionar o atributo ng-view dentro de uma div que deixar centralizado as
views, veja abaixo:

Rotas

AngularJs na prtica

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container" ng-view></div>
</body>
</html>

Somente o arquivo principal precisa conter as tags html e body , os arquivos que
compem cada rota, basta somente as tags `html referente ao funcionamento da view.

$routeParams
O $routeParams uma funcionaldade muito importante para a utilizao de rotas. A
aplicao no composta somente por rotas que fazem listagem de dados, ela tem
tambm rotas que indicam a visualizao de apenas um item e como fazemos isso?
Veja o exemplo
.config(function($routeProvider){
$routeProvider
.when('/itens', {
templateUrl: 'views/itens.html',
controller:'ItensCtrl'
})
.when('/item/:id', {
templateUrl: 'views/item.html',
controller:'ItemCtrl'
})
.otherwise({redirectTo:'/'});
})

Na rota /itens listamos todos os itens e na rota /item/:id iremos listar somente um item.
O :id representa um id referente ao item da lista e possivel pegar atravs do
$routeParams.id.
Veja o exemplo

Rotas

AngularJs na prtica

.config(function($routeProvider){
$routeProvider
.when('/itens', {
templateUrl: 'views/itens.html',
controller:'ItensCtrl'
})
.when('/item/:id', {
templateUrl: 'views/item.html',
controller:'ItemCtrl'
})
.otherwise({redirectTo:'/'});
})
.controller('ItemCtrl', function($routeParams){
console.log($routeParams.id);
})

Se acessarmos a rota /item/1 , ir aparecer 1 no console do browser.

Resolve
O resolve uma funcionalidade dos mdulos de rotas, que tem como objetivo, carregar
informaes antes que a view seja carregada. Quando o usurio acessa uma rota que lista
diversos itens e no queremos que essas informaes sejam carregadas no momento da
exibio da view, usamos o resolve.
Veja o exemplo
.config(function($routeProvider){
$routeProvider
.when('/lista', {
templateUrl: 'views/main.html',
controller:'MainCtrl',
resolve: {
Lista: function($http){
return $http.get('api/listadeitens');
}
}
});
});
.controller('MainCtrl', function(Lista){
$scope.itens = Lista();
});

Rotas

AngularJs na prtica

Como podemos perceber na funo config que define as rotas, na rota /lista temos o
resolve, basicamente um objeto que tem dentro, vrias funes com as informaes pr
carregadas.
O jeito correto no deixar a responsabilidade na resolve em retornar informaes da API,
ou seja, essa informao tem que vim de um servio.
.factory('Api', function($http){
var api = {};
api.listadeitens = function(){
return $http.get('api/listadeitens');
}
return api;
})
.config(function($routeProvider){
$routeProvider
.when('/lista', {
templateUrl: 'views/main.html',
controller:'MainCtrl',
resolve: {
Lista: function(Api){
return Api.listadeitens();
}
}
});
});
.controller('MainCtrl', function(Lista){
$scope.itens = Lista();
});

Assim caso algo mude, iremos nos preocupar apenas em mudar na factory.
Para saber mais, baixe o repositrio com um exemplo nesse link

Rotas