Angular JS - Fundamentos

Eduardo Mendes de Oliveira
edumendes@gmail.com

Eduardo Mendes (edumendes@gmail.com)
Introdução
2

AngularJS
3
Ajuda a organizar o JS
Boa escolha para sites dinâmicos
Se comunica com jQuery
Possibilita a criação de sites interativos
Fácil de testar
Framework JS
para o lado do cliente
capaz de adicionar
interatividade ao HTML

Arquitetura MVC
4

Eduardo Mendes (edumendes@gmail.com)5
Cross-Browser
JavaScript

Diretivas
Módulos
Controles
Expressões
6
Anotações HTML que disparam
comportamentos JS
Onde estão localizados os componentes
Onde se adicionar comportamento à
aplicação
A forma de exibir os valores nas páginas

Diretivas
7

Directives
Uma Directive é um marcador em um tag HTML, como um atributo, que faz a ponte 
entre o HTML e um código JS
<!DOCTYPE html>
<html>
<body>
...
</body>
</html>
function HelloAngular() {
alert("Hello from Angular, World");
}

Directives
<!DOCTYPE html>
<html>
<body >
...
</body>
</html>
function HelloAngular() {
alert("Hello from Angular, World");
}ng-controller="HelloAngular"

Utilizando AngularJS
10

Utilizando AngularJS
download AngularJS
carregue-o em seu documento HTML
<script src=“angular.min.js”></script>
carregue seus componentes angularjs
1
2
3
utilizaremos também Bootstrap
<link href=“bootstrap.min.css” ... />
4
<script src=“app.js”></script>

Iniciando com AngularJS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<script src=“js/angular.min.js"></script>
<script src=“js/app.js”></script>
</body>
</html>

Módulos
13

Módulos
Onde são escritos partes de uma aplicação AngularJS
Tornam o código mais fácil de manter e de entender
Também serve para comunicar as dependências da aplicação
Módulo podem depender de outros módulos

Criando o primeiro Módulo
var app = angular.module('livraria', [ ]);
AngularJS Nome da
Aplicação
Dependências

var app = angular.module('livraria', [ ]); app.js
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<script src=“js/app.js"></script>

var app = angular.module('livraria', [ ]); app.js
<!DOCTYPE html>
<html>
<head>
</head>
<body >
</body>
</html>
<script src=“js/app.js"></script>
ng-app="livraria"

Expressions
18

Expressions
Permite inserir valores dinâmicos no código HTML
<p>
O valor de 1 + 1 = {{1 + 1}}
</p>
<p>
O valor de 1 + 1 = 2
</p>
<p>
{{"Alô," + " mamãe"}}
</p>
<p>
Alô, mamãe
</p>

Controles e Dados
20

Utilizando dados
var livro = {
titulo: 'O Senhor dos Aneis',
preco: 40.0,
descricao: ‘Descricao 1'
}
Objeto JS

Controllers
Controlam o comportamento da aplicação em Angular,
através da deﬁnição de funções e valores
(function() {
var app = angular.module('livraria', []);
})();
Encapsule tudo em uma closure
Crie um controller
app.controller('LojaControle', function() {
});
var livro = {
preco: 40.0,
}

Controllers
Controlam o comportamento da aplicação em Angular,
através da deﬁnição de funções e valores
(function() {
var app = angular.module('livraria', []);
})();
Encapsule tudo em uma closure
Crie um controller
});
var livro = {
preco: 40.0,
}
this.produto = livro;
Cria uma propriedade
no controle para receber
o valor do livro

O HTML
<!DOCTYPE html>
<html ng-app="livraria">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div>
<h1>Nome do Produto</h1>
<h2>R$ preco</h2>
<p>Descrição do Produto</p>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

O HTML
<body >
<div>
<h1>Nome do Produto</h1>
<h2>R$ preco</h2>
<p>Descrição do Produto</p>
</div>
</body>
</html>
ng-controller="LojaControle as loja"

O HTML
<body >
<div>
</div>
</body>
</html>
ng-controller="LojaControle as loja"
<h1>{{loja.produto.titulo}}</h1>
<h2>R$ {{loja.produto.preco}}</h2>
<p>{{loja.produto.descricao}}</p>

Exibição Condicional
27

Exibição de um botão
condicionado a existir
quantidade em estoque

Diretiva 
ng-show
29

Adequando os dados à necessidade
var livro = {
preco: 40.0,
}

var livro = {
preco: 40.0,
}
,
quantidade: 10

var livro = {
preco: 40.0,
}
,
quantidade: 10
<body ng-controller="LojaControle as loja"> 
<div> 
<div> 
<h1>{{loja.produto.titulo}}</h1> 
<h2>R$ {{loja.produto.preco}}</h2> 
<p>{{loja.produto.descricao}}</p> 
</div>
</div>
<button ng-show="{{loja.produto.quantidade > 0}}”>
Adicionar ao Carrinho
</button>

Um acervo de livros
Normalmente se tem mais que um livro
this.produto = livro;
});
var livro = {
preco: 40.0,
descricao: 'Descricao 1',
quantidade: 10
}

Um acervo de livros
Normalmente se tem mais que um livro
app.controller('LojaControle', function () {
this.acervo = livros;
});
var livros = [
{
preco: 40.0,
quantidade: 10
}, {
titulo: 'A Saga Star Wars',
preco: 80.0,
quantidade: 0
}
]
Array

Diretiva 
ng-repeat
35

Aplicando o ng-repeat
<body ng-controller="LojaControle as loja">
<div >
<h1>{{loja.produto.titulo}}</h1>
<h2>R$ {{loja.produto.preco}}</h2>
<p>{{loja.produto.descricao}}</p>
<button ng-show="{{loja.produto.quantidade > 0}}”>
</button>
</div>
</div>
ng-repeat="livro in loja.acervo"
Deve ser referenciado
pela variável livro

Aplicando o ng-repeat
<body ng-controller="LojaControle as loja">
<div >
<h1>{{livro.titulo}}</h1>
<h2>R$ {{livro.preco}}</h2>
<p>{{livro.descricao}}</p>
<button ng-show="{{livro.quantidade > 0}}”>
</button>
</div>
</div>
ng-repeat="livro in loja.acervo"
Repetirá a div
para cada livro no array

Diretivas vistas
ng-app : anexa o Módulo da aplicação à pagina
<html ng-app=“livraria">
ng-controller : anexa o função de Controle à pagina
<body ng-controller=“LojaControle as loja”>
ng-show/ng-hide : exibe algo mediante a avaliação de uma Expressão
<h1 ng-show=“algoBooleano”>Condicionado</h1>
ng-repeat : executa um laço para cada item de um Arrau
<li ng-repeat=“livro in loja.acervo”>

Utilizando Abas
Controlador
propriedade
• aba
comportamentos
• setAba(aba)
• isSet(aba)

AbasControle
app.controller('AbasControle', function() {
this.aba = 1;
this.setAba = function(aba) {
this.aba = aba;
};
this.isSet = function(aba) {
return this.aba == aba;
};
};

Diretiva 
ng-click
41
permite especiﬁcar um comportamento
personalizado quando um elemento
é clicado

O HTML das Abas
<section class="tab" ng-controller="AbasControle as aba">
<ul class="nav nav-pills">
<li><a href >Descrição</a></li>
<li><a href >Comentários</a></li>
</ul>
<div>
<h4>Descrição</h4>
<blockquote>{{livro.descricao}}</blockquote>
</div>
<div>
<h4>Comentários</h4>
<blockquote></blockquote>
</div>
</section>
aba 1
aba 2
ng-show
isSet(?)
ng-click
setAba(?)

O HTML das Abas
<li><a href >Descrição</a></li>
<li><a href >Comentários</a></li>
</ul>
<div ng-show="aba.isSet(1)">
</div>
</div>
</section>

O HTML das Abas
<li><a href ng-click="aba.setAba(1)">Descrição</a></li>
<li><a href ng-click="aba.setAba(2)">Comentários</a></li>
</ul>
</div>
</div>
</section>

Formulários
45

Forms

Adicionando comentarios
var livros = [
{
preco: 40.0,
quantidade: 10,
comentarios : [{
autor: "Autor1",
texto: "Texto 1"
}, {
autor: "Autor2",
texto: "Texto 2"
}]
}
]
Array

O HTML das Abas
</ul>
</div>
</div>
</section>

O HTML dos Comentarios (ng-repeat)
<div ng-show="aba.isSet(2)"> 
<h4>Comentários</h4> 
<blockquote ng-repeat="comentario in livro.comentarios"> 
{{comentario.autor}} disse: {{comentario.texto}} 
</blockquote> 
</div>

O HTML do Formulario
</blockquote> 
<div> 
<form name=“comentarioForm”>
<p> 
<input type="text"
placeholder="Seu nome"/> 
</p> 
<p><textarea
placeholder="Deixe seu comentario"></textarea> 
</p> 
<input type="submit" value="Adicionar" /> 
</form> 
</div> 
</div>

</blockquote> 
<div> 
<blockquote> 
</blockquote> 
<p> 
<input type="text" 
</p> 
<p><textarea
</p> 
</form> 
</div> 
</div>

Diretiva 
ng-model
52
vincula o valor de um input, select, textarea
a uma propriedade

</blockquote> 
<div> 
<blockquote> 
</blockquote> 
<p> 
<input type="text" 
</p> 
<p><textarea
</p> 
</form> 
</div> 
</div>

</blockquote> 
<div> 
<blockquote> 
</blockquote> 
<p> 
<input type="text" ng-model="comentario.autor" 
</p> 
<p><textarea ng-model=“comentario.texto"
</p> 
</form> 
</div> 
</div>

Submetendo valores
55

Forms
Controlador
propriedade
• comentario
comportamentos
• addComentario(livro)

ComentarioControle
app.controller('ComentarioControle', function() {
this.comentario = {};
});

</blockquote> 
<div> 
<blockquote> 
</blockquote> 
<p> 
</p> 
<p><textarea ng-model=“comentario.texto"
</p> 
</form> 
</div> 
</div>

O HTML do Formulario (ng-model)
 
<form name=“comentarioForm"
ng-controller="ComentarioControle as cmtControle”>
<blockquote>…</blockquote> 
<p> 
</p> 
<p><textarea ng-model=“comentario.texto”
</p> 
</form>

Diretiva 
ng-submit
61
permite vincular comportamentos
a um evento onsubmit

 
ng-controller="ComentarioControle as cmtControle”
ng-submit="cmtControle.addComentario(livro)” >
<p> 
</p> 
</p> 
</form>

ComentarioControle
this.addComentario = function(livro) {
livro.comentarios.push(this.comentario);
};
});

Validações
67

Desabilitando a validação padrão
 
ng-submit="cmtControle.addComentario(livro)” >
<p> 
</p> 
</p> 
</form>

 
ng-submit="cmtControle.addComentario(livro)” novalidate>
<p> 
</p> 
</p> 
</form>

 
<p> 
placeholder="Seu nome” required/> 
</p> 
placeholder="Deixe seu comentario” required> </textarea> 
</p> 
</form>

$valid
71
propriedade form no Angular
que indica se o formuário é válido

 
<p> 
</p> 
</p>
<div>O formulario é ${{comentarioForm.$valid}}</div> 
</form>

 
ng-submit=“comentarioForm.$valid && cmtControle.addComentario(livro)”
novalidate>
<p> 
</p> 
</p>
</form>

Classe no Input pelo Angular
<input name="autor“ type="email“ ng-model=“cmtControle.comentario.autor" required/>
antes de digitar digitado email inválido digitado email válido
.ng-pristine
.ng-invalid
.ng-dirty
.ng-invalid
.ng-dirty
.ng-valid

CSS
.ng-invalid.ng-dirty { 
border-color: darkred; 
} 
 
.ng-invalid.ng-dirty { 
border-color: greenyellow; 
}

Projeto
78

Projeto

Diretivas
Personalizadas
80

Como reaproveitar código?
<h2>
{{livro.titulo}}
<em class="pull-right">R$ {{livro.preco}}</em>
</h2>
Poderia aparecer em várias partes na aplicação

<h2>
{{livro.titulo}}
</h2>
Criar um arquivo html e reutilizá-lo

<h2>
{{livro.titulo}}
</h2> index.html

<h2>
</h2>
index.html
{{livro.titulo}}
livro-preco.html

<h2 ng-include=“'livro-preco.html'”>
</h2>
index.html
{{livro.titulo}}
livro-preco.html

<h2 ng-include=“'livro-preco.html'”>
</h2>
index.html
{{livro.titulo}}
livro-preco.html
Onde está a diretiva???

<livro-preco></livro-preco>
index.html
{{livro.titulo}}
livro-preco.html
Onde está a diretiva???

app.directive('livroPreco', function() {
return {
};
}); app.js

app.js
return {
restrict: 'E',
templateUrl: 'livro-preco.html'
};
});
Diretiva como um elemento

<h3 livro-preco></h3>
app.js
return {
restrict: 'A',
templateUrl: 'livro-preco.html'
};
});
Diretiva como um atributo

Exercício
CRIAR
<livro-descricao></livro-descricao>
<div livro-comentarios></div>

E se o template precisasse 
de um Controller???
92

Template dependente de controller
</ul>
</section> index.html

Template dependente de controller
ng-controller="AbasControle as aba"
index.html
<section class="tab">
</ul>
</section>
livro-abas.html

Adiciona a diretiva
index.html
<section class="tab">
</ul>
</section>
livro-abas.html
<livro-abas ng-controller="AbasControle as aba"></livro-abas>

Adiciona a diretiva
index.html
app.js
app.directive('livroAbas', function() {
return {
restrict: 'E',
templateUrl: 'livro-abas.html'
};
});

Adiciona a diretiva
index.html
app.js
return {
restrict: 'E',
templateUrl: 'livro-abas.html'
};
});
app.controller('AbasControle', function() {
. . .
});

Adiciona a diretiva
index.html
app.js
return {
restrict: 'E',
templateUrl: ‘livro-abas.html’,
controller: function() {
. . .
}
};
});

Adiciona a diretiva
index.html
app.js
return {
restrict: 'E',
. . .
},
controllerAs: ‘aba’
};
});

Adiciona a diretiva
index.html
app.js
<livro-abas></livro-abas>
return {
restrict: 'E',
. . .
},
controllerAs: ‘aba’
};
});

Angular JS - Fundamentos

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Angular JS - Fundamentos

Mais de Eduardo Mendes

Angular JS - Fundamentos