Angular JS - Fundamentos
-
Upload
eduardo-mendes -
Category
Software
-
view
365 -
download
4
Transcript of Angular JS - Fundamentos
Eduardo Mendes de [email protected]
Eduardo Mendes ([email protected])
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
Eduardo Mendes ([email protected])
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
Eduardo Mendes ([email protected])8
DirectivesUma Directive é um marcador em um tag HTML, como um atributo, que faz a ponteentre o HTML e um código JS
<!DOCTYPE html> <html> <body> ... </body> </html>
function HelloAngular() { alert("Hello from Angular, World"); }
Eduardo Mendes ([email protected])9
Directives
<!DOCTYPE html> <html> <body > ... </body> </html>
function HelloAngular() { alert("Hello from Angular, World"); }ng-controller="HelloAngular"
Eduardo Mendes ([email protected])11
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>
Eduardo Mendes ([email protected])12
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>
Eduardo Mendes ([email protected])14
MódulosOnde 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
Eduardo Mendes ([email protected])15
Criando o primeiro Módulo
var app = angular.module('livraria', [ ]);
AngularJS Nome da Aplicação
Dependências
Eduardo Mendes ([email protected])16
Criando o primeiro Módulo
var app = angular.module('livraria', [ ]); app.js
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <script src=“js/angular.min.js"></script>
</body> </html>
<script src=“js/app.js"></script>
Eduardo Mendes ([email protected])17
Criando o primeiro Módulo
var app = angular.module('livraria', [ ]); app.js
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body > <script src=“js/angular.min.js"></script>
</body> </html>
<script src=“js/app.js"></script>
ng-app="livraria"
Eduardo Mendes ([email protected])19
ExpressionsPermite 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>
Eduardo Mendes ([email protected])21
Utilizando dados
var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' }
Objeto JS
Eduardo Mendes ([email protected])22
ControllersControlam o comportamento da aplicação em Angular, através da definiçã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 = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' }
Eduardo Mendes ([email protected])23
ControllersControlam o comportamento da aplicação em Angular, através da definiçã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 = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' }
this.produto = livro;
Cria uma propriedade no controle para receber o valor do livro
Eduardo Mendes ([email protected])24
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>
Eduardo Mendes ([email protected])25
O HTML <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>
ng-controller="LojaControle as loja"
Eduardo Mendes ([email protected])26
O HTML <body > <div>
</div>
<script src="js/angular.min.js"></script> <script src="js/app.js"></script> </body> </html>
ng-controller="LojaControle as loja"
<h1>{{loja.produto.titulo}}</h1> <h2>R$ {{loja.produto.preco}}</h2> <p>{{loja.produto.descricao}}</p>
Eduardo Mendes ([email protected])28
Exibição de um botão condicionado a existir quantidade em estoque
Eduardo Mendes ([email protected])30
Adequando os dados à necessidade
var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' }
Eduardo Mendes ([email protected])31
Adequando os dados à necessidade
var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1'
}
, quantidade: 10
Eduardo Mendes ([email protected])32
Adequando os dados à necessidadevar livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1'
}
, 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>
Eduardo Mendes ([email protected])33
Um acervo de livrosNormalmente se tem mais que um livro
app.controller('LojaControle', function() { this.produto = livro; });
var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: 'Descricao 1', quantidade: 10 }
Eduardo Mendes ([email protected])34
Um acervo de livrosNormalmente se tem mais que um livroapp.controller('LojaControle', function () { this.acervo = livros; });
var livros = [ { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: 'Descricao 1', quantidade: 10 }, { titulo: 'A Saga Star Wars', preco: 80.0, descricao: 'Descricao 2', quantidade: 0 } ]
Array
Eduardo Mendes ([email protected])36
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}}”> Adicionar ao Carrinho </button> </div> </div>
ng-repeat="livro in loja.acervo"
Deve ser referenciado pela variável livro
Eduardo Mendes ([email protected])37
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}}”> Adicionar ao Carrinho </button> </div> </div>
ng-repeat="livro in loja.acervo"
Repetirá a div para cada livro no array
Eduardo Mendes ([email protected])
Diretivas vistasng-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”>
Eduardo Mendes ([email protected])39
Utilizando Abas
Controlador
propriedade • aba
comportamentos • setAba(aba) • isSet(aba)
Eduardo Mendes ([email protected])40
AbasControle
app.controller('AbasControle', function() { this.aba = 1;
this.setAba = function(aba) { this.aba = aba; };
this.isSet = function(aba) { return this.aba == aba; }; };
Eduardo Mendes ([email protected])
Diretivang-click
41
permite especificar um comportamento personalizado quando um elemento é clicado
Eduardo Mendes ([email protected])42
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 2ng-show
isSet(?)
ng-clicksetAba(?)
Eduardo Mendes ([email protected])43
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 ng-show="aba.isSet(1)"> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote></blockquote> </div>
</section>
Eduardo Mendes ([email protected])44
O HTML das Abas<section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <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 ng-show="aba.isSet(1)"> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote></blockquote> </div>
</section>
Eduardo Mendes ([email protected])47
Adicionando comentariosvar livros = [ { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: 'Descricao 1', quantidade: 10, comentarios : [{ autor: "Autor1", texto: "Texto 1" }, { autor: "Autor2", texto: "Texto 2" }] } ]
Array
Eduardo Mendes ([email protected])48
O HTML das Abas<section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <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 ng-show="aba.isSet(1)"> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote></blockquote> </div>
</section>
Eduardo Mendes ([email protected])49
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>
Eduardo Mendes ([email protected])50
O HTML do Formulario
<div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote ng-repeat="comentario in livro.comentarios"> {{comentario.autor}} disse: {{comentario.texto}} </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>
Eduardo Mendes ([email protected])51
O HTML do Formulario<div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote ng-repeat="comentario in livro.comentarios"> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <div> <form name=“comentarioForm”> <blockquote> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <p> <input type="text" placeholder="Seu nome"/> </p> <p><textarea placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form> </div> </div>
Eduardo Mendes ([email protected])
Diretivang-model
52
vincula o valor de um input, select, textarea a uma propriedade
Eduardo Mendes ([email protected])53
O HTML do Formulario<div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote ng-repeat="comentario in livro.comentarios"> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <div> <form name=“comentarioForm”> <blockquote> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <p> <input type="text" placeholder="Seu nome"/> </p> <p><textarea placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form> </div> </div>
Eduardo Mendes ([email protected])54
O HTML do Formulario<div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote ng-repeat="comentario in livro.comentarios"> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <div> <form name=“comentarioForm”> <blockquote> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <p> <input type="text" ng-model="comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“comentario.texto" placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form> </div> </div>
Eduardo Mendes ([email protected])56
Forms
Controlador
propriedade • comentario
comportamentos • addComentario(livro)
Eduardo Mendes ([email protected])57
ComentarioControle
app.controller('ComentarioControle', function() { this.comentario = {}; });
Eduardo Mendes ([email protected])58
O HTML do Formulario<div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote ng-repeat="comentario in livro.comentarios"> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <div> <form name=“comentarioForm”> <blockquote> {{comentario.autor}} disse: {{comentario.texto}} </blockquote> <p> <input type="text" ng-model="comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“comentario.texto" placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form> </div> </div>
Eduardo Mendes ([email protected])59
O HTML do Formulario (ng-model)
<form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle”> <blockquote>…</blockquote> <p> <input type="text" ng-model="comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“comentario.texto” placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])60
O HTML do Formulario (ng-model)
<form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle”> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])
Diretivang-submit
61
permite vincular comportamentos a um evento onsubmit
Eduardo Mendes ([email protected])62
O HTML do Formulario (ng-model)
<form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle”> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])63
O HTML do Formulario (ng-model)
<form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” > <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])64
ComentarioControle
app.controller('ComentarioControle', function() { this.comentario = {};
this.addComentario = function(livro) { livro.comentarios.push(this.comentario); }; });
Eduardo Mendes ([email protected])65
ComentarioControle
app.controller('ComentarioControle', function() { this.comentario = {};
this.addComentario = function(livro) { livro.comentarios.push(this.comentario); this.comentario = {}; }; });
Eduardo Mendes ([email protected])66
Eduardo Mendes ([email protected])68
Desabilitando a validação padrão <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” > <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])69
Desabilitando a validação padrão <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome"/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])70
Desabilitando a validação padrão <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome” required/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])
$valid
71
propriedade form no Angular que indica se o formuário é válido
Eduardo Mendes ([email protected])72
Desabilitando a validação padrão <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome” required/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea> </p> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])73
Desabilitando a validação padrão <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome” required/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea> </p> <div>O formulario é ${{comentarioForm.$valid}}</div> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])74
Desabilitando a validação padrão <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome” required/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea> </p> <div>O formulario é ${{comentarioForm.$valid}}</div> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])75
Desabilitando a validação padrão<form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit=“comentarioForm.$valid && cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote> <p> <input type="text" ng-model="cmtControle.comentario.autor" placeholder="Seu nome” required/> </p> <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea> </p> <div>O formulario é ${{comentarioForm.$valid}}</div> <input type="submit" value="Adicionar" /> </form>
Eduardo Mendes ([email protected])76
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
Eduardo Mendes ([email protected])77
CSS
.ng-invalid.ng-dirty { border-color: darkred; }.ng-invalid.ng-dirty { border-color: greenyellow; }
Eduardo Mendes ([email protected])81
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
Eduardo Mendes ([email protected])82
Como reaproveitar código? <h2> {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> </h2>
Criar um arquivo html e reutilizá-lo
Eduardo Mendes ([email protected])83
Como reaproveitar código? <h2> {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> </h2> index.html
Eduardo Mendes ([email protected])84
Como reaproveitar código?
<h2> </h2>
index.html
{{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em>
livro-preco.html
Eduardo Mendes ([email protected])85
Como reaproveitar código?
<h2 ng-include=“'livro-preco.html'”> </h2>
index.html
{{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em>
livro-preco.html
Eduardo Mendes ([email protected])86
Como reaproveitar código?
<h2 ng-include=“'livro-preco.html'”> </h2>
index.html
{{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em>
livro-preco.html
Onde está a diretiva???
Eduardo Mendes ([email protected])87
Como reaproveitar código? <livro-preco></livro-preco>
index.html
{{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em>
livro-preco.html
Onde está a diretiva???
Eduardo Mendes ([email protected])88
Como reaproveitar código? <livro-preco></livro-preco>
app.directive('livroPreco', function() { return {
}; }); app.js
Eduardo Mendes ([email protected])89
Como reaproveitar código? <livro-preco></livro-preco>
app.js
app.directive('livroPreco', function() { return { restrict: 'E', templateUrl: 'livro-preco.html' }; });
Diretiva como um elemento
Eduardo Mendes ([email protected])90
Como reaproveitar código? <h3 livro-preco></h3>
app.js
app.directive('livroPreco', function() { return { restrict: 'A', templateUrl: 'livro-preco.html' }; });
Diretiva como um atributo
Eduardo Mendes ([email protected])91
ExercícioCRIAR
<livro-descricao></livro-descricao>
<div livro-comentarios></div>
Eduardo Mendes ([email protected])93
Template dependente de controller <section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <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> <livro-descricao></livro-descricao> <div livro-comentarios></div> </section> index.html
Eduardo Mendes ([email protected])94
Template dependente de controller ng-controller="AbasControle as aba"
index.html
<section class="tab"> <ul class="nav nav-pills"> <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> <livro-descricao></livro-descricao> <div livro-comentarios></div> </section>
livro-abas.html
Eduardo Mendes ([email protected])95
Adiciona a diretiva
index.html
<section class="tab"> <ul class="nav nav-pills"> <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> <livro-descricao></livro-descricao> <div livro-comentarios></div> </section>
livro-abas.html
<livro-abas ng-controller="AbasControle as aba"></livro-abas>
Eduardo Mendes ([email protected])96
Adiciona a diretiva
index.html
app.js
<livro-abas ng-controller="AbasControle as aba"></livro-abas>
app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: 'livro-abas.html' }; });
Eduardo Mendes ([email protected])97
Adiciona a diretiva
index.html
app.js
<livro-abas ng-controller="AbasControle as aba"></livro-abas>
app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: 'livro-abas.html' }; });
app.controller('AbasControle', function() { . . . });
Eduardo Mendes ([email protected])98
Adiciona a diretiva
index.html
app.js
<livro-abas ng-controller="AbasControle as aba"></livro-abas>
app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: ‘livro-abas.html’, controller: function() { . . . }
}; });
Eduardo Mendes ([email protected])99
Adiciona a diretiva
index.html
app.js
<livro-abas ng-controller="AbasControle as aba"></livro-abas>
app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: ‘livro-abas.html’, controller: function() { . . . }, controllerAs: ‘aba’ }; });
Eduardo Mendes ([email protected])100
Adiciona a diretiva
index.html
app.js
<livro-abas></livro-abas>
app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: ‘livro-abas.html’, controller: function() { . . . }, controllerAs: ‘aba’ }; });