Table

of Contents
Introduo

1.1

Rotas

1.2

ngRoute

1.2.1

$routeParams

1.2.1.1

Parametros Customizados

1.2.1.2

Resolve

1.2.1.3

$locationChangeStart e $locationChangeSuccess

1.2.1.4

Controladores

1.3

Variavel

1.3.1

Funo

1.3.2

Diretivas Customizadas
Atributo

1.4
1.4.1

Introduo

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.

Rotas

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

aplicao.

ngRoute

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'
});
})

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.

ngRoute

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:

<!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

$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
.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);
})

$routeParams

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

Parametros Customizados

Parametros Customizados
Sabe quando precisamos adicionar parametros na rota que usam essa sintaxe ?
param1&param2 ?

A soluo adicionar na url: os valores depois que setamos a estrutura dela, veja
abaixo:
```
.config(function($routeProvider){
$routeProvider
.when('/itens?param1&param2', {
templateUrl: 'views/itens.html',
controller:'ItensCtrl'
})
.otherwise({redirectTo:'/'});
})
.controller('ItensCtrl', function($routeParams){
console.log($routeParams.param1, $routeParams.param2);
})

Se acessarmos a rota /itens?param1=1&param2=2 , o retorno no consoel ser 1 referente ao

param1 e 2 referente ao param2.

Resolve

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();
});

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.

10

Resolve

.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.data;
});

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

11

$locationChangeStart e $locationChangeSuccess

$locationChangeStart e $locationChangeSuccess
Essas duas variaveis so eventos e usadas no $rootScope.$on() dentro do .run() , que
iniciado antes da aplicao, podemos dizer que aqui, aonde a mgica acontece.
O $locationChangeStart um evento que 'ouve' o inicio da aplicao, nesse cara que
podemos criar validaes para acesso de determinadas rotas, nossa regra de negcio.
O $locationChangeSuccess j ao contrrio, ele 'ouve' quando a aplicao j est
estabilizada, quando a view est renderizada e etc.

12

Controladores

Controladores
No angular, controller um meio de comunicao entre a view e toda a regra de negcio
que temos numa tela.
Para criarmos uma controller, precisamos chamar a funo .controller() e adicionar dois
parametros dentro. O primeiro o nome da controller entre aspas e o segundo uma
funo.
angular.module('App')
.controller('nome_da_controller', function($scope){})

Varivel
O parametro $scope dentro da funo, um ponteiro que liga as variveis que iremos
adicionar, dentro do escopo referente a controller.
Ex:
angular.module('App')
.controller('nome_da_controller', function($scope){
$scope.name = "Nicholas";
})

<div ng-app="App" ng-controller="nome_da_controller">

<p>Ol {{name}}</p>
</div>

O resultado esperado Ol Nicholas , Para visualizar o exemplo em funcionamento, basta

clicar nesse link.

Funo
Podemos criar funes no angular, com o objetivo de ser executado depois de uma ao do
usurio.
Para fazer essa proesa, basta criar uma variavel e adicionar uma funo nela.

13

Controladores

angular.module('App')
.controller('nome_da_controller', function($scope){
$scope.olaMundo = function(){
console.log('Ola Mundo');
}
})

<div ng-app="App" ng-controller="nome_da_controller">

<button ng-click="olaMundo()">Clique</button>
</div>

Quando iniciar a pgina, clique no boto chamado clicar e veja o console do browser. O
resultado est neste link.
PS: o ng-click uma diretiva do angular que executa funes e lgica que estive dentro do
escopo ="olaMundo()" ou ="name = 'Nicholas'" dela.

14

Diretivas Customizadas

Diretivas customizadas
Diretiva customizada veio para facilitar a criao de componentes, que muitas vezes so
reutilizados em diversas pginas da aplicao.
As diretivas so criadoa atravs da funo .directive() , podendo gerar atributos,
elementos, comentrios e classes. Dentro da funo, passamos dois parametros. O
primeiro o nome e o segundo uma funo que retorna a regra de negcio da diretiva.
Uma coisa importante sobre o nome da diretiva, entender como o angular traduz o nome
composto. Se colocarmos um nome todo minusculo ('nomedadiretiva'), o angular vai
entender como 'nomedadiretiva', caso o nome seja ('nomeDaDiretiva'), o angular vai
entender como 'nome-da-diretiva'.
Dentro da funo que passamos no .directive() , precisamos retornar variveis com
valores que informam ao angular, o que a tal diretiva faz.

Variveis da Diretiva
Como existem carros para determinados tipos de pessoas, existem diretivas para
determinadas necessidades. Veja abaixo as opes utilizadas para compor uma diretiva.
.directive('nomedadiretiva', function(){
return {
restrict:null,
link: null,
template: null,
templateUrl: null,
transclude: null,
scope: null
}
})

Restrict
A varivel restrict tem como objetivo, informar ao angular qual o tipo de diretiva que
iremos criar, veja os tipos abaixo.
'A' para atributo.
'E' para elementos.

15

Diretivas Customizadas

Tipo A - Diretiva Atributo

.directive('nomedadiretiva', function(){
return {
restrict: 'A'
}
})

Essa diretiva usada em tags html, ela usada geralmente para escutar eventos de mouse
(click,doubleclick, mouseenter, mouseleave, mousemove) e teclado (keyup, keypress,
keydown).
O nome de exemplo da nossa diretiva, ser diretivaA , veja como usamos numa tag html.
<button diretiva-a>Clique</button>

Tipo E - Diretiva Componente

.directive('nomedadiretiva', function(){
return {
restrict: 'E'
}
})

Essa diretiva usada como tag com abertura e fechamento <nomedadiretiva>

</nomedadiretiva> , nessa diretiva usamos o template ou templateUrl , que ser explicado

mais a frente.

Link
O link uma funo que tem trs parametros importantes, caso queiramos manipular a
view.
.directive('nomedadiretiva', function(){
return {
link: function(scope, element, attribute){}
}
})

scope: Se ao olhar o scope, lembrar do $scope da controller , fica tranquilo que o

scope da diretiva tem a mesma responsabilidade. O scope da diretiva consegue

acessar o $scope da controller, mas a controller no consegue acessar o scope da

16

Diretivas Customizadas

diretiva. O que tem de bom nisso? Conseguimos isolar variveis da diretiva e trabalhar
num ambiente que no tenha conflitos.
element: O element usado para acessar o html em forma de objeto, se estivermos
usando a diretiva como atributo restrict: 'A' , quando damos console.log ,
retornamos o exatamente os dados da tag que adicionamos a diretiva. Na diretiva
restrict: 'E' , iremos retorna todo o html que setamos no campo template ou
templateUrl .

attribute: O attribute responsvel por acessar os atributos da tag que estamos

manipulando com o restrict: 'A' , podemos acessar o id atravs de attribute.id ,
class attribute.class e etc.

17