angularjs na pratica

Prévia do material em texto

1.1
1.2
1.2.1
1.2.1.1
1.2.1.2
1.2.1.3
1.2.1.4
1.3
1.3.1
1.3.2
1.4
1.4.1
Table	of	Contents
Introdução
Rotas
ngRoute
$routeParams
Parametros	Customizados
Resolve
$locationChangeStart	e	$locationChangeSuccess
Controladores
Variavel
Função
Diretivas	Customizadas
Atributo
2
Introdução
O	objetivo	desse	e-book,	é	mostrar	como	o	AngularJs	é	um	fácil	de	se	aprender	e	quão
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	padrão,	para	quem	não	conhece,	MVC	significa
Model	View	Control.	O	model	é	responsável	por	se	comunicar	com	o	mundo	externo,	seja
acessando	Apis	ou	arquivos,	ele	é	representado	pelos	services	no	angular.	O	view	é
responsável	pela	exibição	dos	dados	que	são	enviados	pela	controller,	a	view	é
representada	pelo	html.	A	control	é	responsável	por	gerenciar	os	dados	que	são	enviados
pela	view	ou	retornados	da	model,	é	representada	pelas	controllers.
Esse	ecossistema	de	inicio	pode	ser	complexo	pra	quem	não	sabe	como	funciona	na
prática	o	MVC,	mas	com	o	tempo	a	lógica	vai	fluindo,	pois	o	fluxo	de	informações	sempre
será	para	a	maioria	das	coisas	que	fazemos	em	um	sistema,	ou	seja,	sempre	fazemos	o
CRUD	(Create,	Read,	Update	e	Delete)	das	informações.
Com	o	MVC	iremos	utilizar	rotas,	elas	são	responsáveis	por	ditar	qual	será	o	arquivo	html	e
controller	que	irão	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
conteúdo	na	tabela	ou	essa	lista	é	retornada	de	um	service.
Introdução
3
Rotas
As	rotas	são	responsáveis	por	informar	ao	angular,	qual	template	html	e	controller	serão
responsáveis	por	uma	determinada	rota	que	o	usuário	acessar.
Para	utilizar	um	módulo	de	rotas	especifico,	precisamos	colocar	o	nome	do	módulo	dentro
das	dependencias	do	módulo	principal	da	aplicação.
Veja	abaixo
angular.module('App',	['ngRoute']);
O	módulo	será	inicializado	e	utilizado	dentro	da	função	.config(),	do	módulo	principal	da
aplicação.
Rotas
4
ngRoute
O	módulo	responsável	pelas	rotas,	se	chama		ngRoute	,	ele	é	uma	dependência,	ou	seja,
um	módulo	externo	que	precisa	ser	inserido	no	arquivo	principal.
A	variável	que	precisa	ser	chama	na	função		.config()	,	se	chama		$routeProvider	,	essa
variável	tem	a	função		.when()	,	que	seta	as	rotas	e	suas	configurações	e	o		otherwise()	,
que	indica	qual	rota	que	a	aplicação	deve	redirecionar,	caso	tentem	acessar	uma	rota
inexistente.
A	função		.when()		recebe	dois	parâmetros,	o	primeiro	parâmetro	é	a	rota	e	o	segundo	é	um
objeto	que	contém	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	parâmetro	da	função		.when()		é	o		'/'	,	indicando	a	rota	principal	da	aplicação
e	o	segundo	parâmetro	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	módulos	de	rotas	e	no	uso	de	diretiva.
A	função		otherwise		recebe	um		objeto		que	contém	o	campo		redirectTo	,	o	valor	desse
campo	será	a	rota	que	a	aplicação	ira	redirecionar,	caso	tentem	acessar	uma	rota
inexsistente.
ngRoute
5
Veja	o	exemplo:
.config(function($routeProvider){
				$routeProvider				
				.when('/',	{
								templateUrl:	'views/main.html',
								controller:'MainCtrl'
				})				
				.otherwise({redirectTo:'/'});
})
Nota:	Não	é	de	responsabilidade	do	módulo	de	rotas,	redirecionar	para	rotas,	caso	haja
erros	https	(404,	500,	400	e	etc).	No	capítulo		Http		iremos	tratar	isso	de	forma	correta.
Para	funcionar,	precisamos	setar	no	arquivo	html	principal	da	aplicação	a	diretiva	chamada
	ng-view	,	onde	essa	diretiva	estiver,	será	carregado	via	ajax	os	arquivos	html	que	estão
setados	no	templateUrl	de	cada	rota.
Geralmente	utilizamos	o	arquivo		index.html		como	arquivo	príncipal	para	a	aplicação
	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
compõem	cada	rota,	basta	somente	as	tags	`html	referente	ao	funcionamento	da	view.
ngRoute
6
$routeParams
O	$routeParams	é	uma	funcionaldade	muito	importante	para	a	utilização	de	rotas.	A
aplicação	não	é	composta	somente	por	rotas	que	fazem	listagem	de	dados,	ela	tem
também	rotas	que	indicam	a	visualização	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	através	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
7
Se	acessarmos	a	rota		/item/1	,	irá	aparecer	1	no	console	do	browser.
$routeParams
8
Parametros	Customizados
Sabe	quando	precisamos	adicionar	parametros	na	rota	que	usam	essa	sintaxe		?
param1&param2	?
A	solução	é	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.
Parametros	Customizados
9
Resolve
O	resolve	é	uma	funcionalidade	dos	módulos	de	rotas,	que	tem	como	objetivo,	carregar
informações	antes	que	a	view	seja	carregada.	Quando	o	usuário	acessa	uma	rota	que	lista
diversos	itens	e	não	queremos	que	essas	informações	sejam	carregadas	no	momento	da
exibição	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	função		config		que	define	as	rotas,	na	rota		/lista		temos	o
resolve,	basicamente	é	um	objeto	que	tem	dentro,	várias	funções	com	as	informações	pré
carregadas.
O	jeito	correto	é	não	deixar	a	responsabilidade	na	resolve	em	retornar	informações	da	API,
ou	seja,	essa	informação	tem	que	vim	de	um	serviço.
Resolve
10
.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	repositório	com	um	exemplo	nesse	link
Resolve
11
$locationChangeStart	e	$locationChangeSuccess
Essas	duas	variaveis	são	eventos	e	usadas	no		$rootScope.$on()		dentro	do		.run()	,	que	é
iniciado	antes	da	aplicação,	podemos	dizer	que	aqui,	é	aonde	a	mágica	acontece.
O		$locationChangeStart		é	um	evento	que	'ouve'	o	inicio	da	aplicação,	nesse	cara	que
podemos	criar	validações	para	acesso	de	determinadas	rotas,	nossa	regra	de	negócio.
O		$locationChangeSuccess		já	é	ao	contrário,	ele	'ouve'	quando	a	aplicação	já	está
estabilizada,	quando	a	view	está	renderizada	e	etc.
$locationChangeStart	e	$locationChangeSuccess
12
Controladores
No	angular,	controller	é	um	meio	de	comunicação	entre	a	view	e	toda	a	regra	de	negócio
que	temos	numa	tela.
Para	criarmos	uma	controller,	precisamos	chamar	a	função		.controller()		e	adicionar	dois
parametros	dentro.	O	primeiro	é	o	nome	da	controller	entre	aspas	e	o	segundo	é	uma
função.
angular.module('App')
.controller('nome_da_controller',	function($scope){})
Variável
O	parametro		$scope		dentro	da	função,	é	um	ponteiro	que	liga	as	variáveis	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.
Função
Podemos	criar	funções	no	angular,	com	o	objetivo	de	ser	executado	depois	de	uma	ação	do
usuário.
Para	fazer	essa	proesa,	basta	criar	uma	variavel	e	adicionar	uma	função	nela.
Controladores
13
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	página,	clique	no	botão	chamado	clicar	e	veja	o	console	do	browser.	O
resultado	está	neste	link.
PS:	o	ng-click	é	uma	diretiva	do	angular	que	executa	funções	e	lógica	que	estive	dentro	do
escopo		="olaMundo()"		ou		="name	=	'Nicholas'"		dela.
Controladores
14
Diretivas	customizadas
Diretiva	customizada	veio	para	facilitar	a	criação	de	componentes,	que	muitas	vezes	são
reutilizados	em	diversas	páginas	da	aplicação.
As	diretivas	são	criadoa	através	da	função		.directive()	,	podendo	gerar	atributos,
elementos,	comentários	e	classes.	Dentro	da	função,	passamos	dois	parametros.	O
primeiro	é	o	nome	e	o	segundo	é	uma	função	que	retorna	a	regra	de	negócio	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	função	que	passamos	no		.directive()	,	precisamos	retornar	variáveis	com
valores	que	informam	ao	angular,	o	que	a	tal	diretiva	faz.
Variáveis	da	Diretiva
Como	existem	carros	para	determinados	tipos	de	pessoas,	existem	diretivas	para
determinadas	necessidades.	Veja	abaixo	as	opções	utilizadas	para	compor	uma	diretiva.
.directive('nomedadiretiva',	function(){
	return	{
			restrict:null,
			link:	null,
			template:	null,
			templateUrl:	null,
			transclude:	null,
			scope:	null
	}
})
Restrict
A	variável		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.
Diretivas	Customizadas
15
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	função	que	tem	três	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	não	consegue	acessar	o		scope		da
Diretivas	Customizadas
16
diretiva.	O	que	tem	de	bom	nisso?	Conseguimos	isolar	variáveis	da	diretiva	e	trabalhar
num	ambiente	que	não	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	é	responsável	por	acessar	os	atributos	da	tag	que	estamos
manipulando	com	o		restrict:	'A'	,	podemos	acessar	o	id	através	de		attribute.id	,
class		attribute.class		e	etc.
Diretivas	Customizadas
17
	Introdução
	Rotas
	ngRoute
	$routeParams
	Parametros Customizados
	Resolve
	$locationChangeStart e $locationChangeSuccess
	Controladores
	Diretivas Customizadas