SPA Jumpstart - Angular - 4 - Diretivas Nativas

Diretivas

Web Browser

ASP.NETAngularJS

Class LibraryBusiness

Index.htmlAppModule

RoutesDirectivies

TemplatesViews

ControllerViewModel

ServicesFactories

Repository

BreezeJS$resource$http

WebAPI

ApiController Services

Diretivas

Definição• Extensões do HTML (elementos, classes, atributos)• Permite ampliar o comportamento dos mesmos

O que fazem• Adicionam componentes e os manipulam• Encapsulam comportamentos genéricos e reutilizágeis• Deixam o HTML mais limpo e de fácil leitura

<div class="alert alert-warning alert-dismissable"> <button class="close" data-dismiss="alert">×</button> <strong>Warning!</strong> HTML convencional </div>

<alert type="warning"> <strong>Warning!</strong> Muito mais limpo assim </alert>

Diretivas

Estruturais

• ng-app• ng-controller• ng-include

Bind

Eventos

Controle de Fluxo

Diretivas - Estruturang-app

Define o modulo da aplicação

ng-controller

Define um controller para determinada parte da aplicação

<html ng-app="app">

<body ng-controller="filterController as vm">

ng-include

Renderiza um trecho de html no DOM em tempo de execução

<div ng-include="'/../templates/titular.html'"></div>

Diretivas - Bind

Estruturais


Bind

• ng-model • ng-href• ng-class• ng-src

Eventos

Controle de Fluxo

Diretivas - Bindng-model

Associa o valor de um componente à uma propriedade no viewmodel

Pode ser adicionado nas tags <input> de qualquer tipo (text, checkbox, date, number, radio, etc.)

<div ng-controller="nameController as vm"> Name: <input type="text" ng-model="vm.cliente.name" /> Saldo: <input type= "number" ng-model="vm.cliente.saldo" /> Tipo conta: <select ng-model="vm.cliente.tipo" ng-options="tipo for tipo in vm.tiposConta"> </select> Ativa: <input type="checkbox" ng-model="vm.cliente.ativa" /> <p><strong>Confirmação</strong></p> Nome: {{vm.cliente.name}}, Saldo: {{vm.cliente.saldo}}, Tipo de conta: {{vm.cliente.tipo}}, ativa: {{vm.cliente.ativa}}</div>

app.controller('nameController',function() { this.cliente = { titular: "José da Silva", saldo: 43243, tipo: 'corrente', ativa:true }; this.tiposConta = [ 'corrente', 'poupança', 'especial' ]; });

Diretivas - Bindng-href

Associa o valor de um link dinâmico

Permite usar o recurso {{espression}} na url

Funciona apenas em tags <a>

<div> <input type="number" ng-model="dia" /> de <input type="text" ng-model="mes" /> <p> <a ng-href="http://pt.wikipedia.org/wiki/{{dia}}_de_{{mes}}"> <button>Ir para {{dia}} para {{mes}}</button> </a> </p> </div>

Diretivas - Bindng-class

Ativa e desativa classes de acordo com condições definidas pelo viewmodel

Atributo recebe um objeto no formato {className : condition}

<div ng-class="{strike:excluido,red:saldo<0,bold:importante}">Status conta</div><input type="number" ng-model="saldo" /> <br /><input type="checkbox" ng-model="excluido" />Excluido <br><input type="checkbox" ng-model="importante" />Importante

.strike {text-decoration: line-through;}

.bold {font-weight: bold;}

.red {color: red;}

Diretivas - Eventos

Estruturais


Bind


Eventos

• ng-checked• ng-disable• ng-click• ng-change

Controle de Fluxo

Diretivas - Eventosng-checked

Resolve o problema encoberto pelo ng-model quando se trata de hierarquia de checkboxes

Usando ng-model: <br> <input type="checkbox" ng-model="check1" /> Pai<input type="checkbox" ng-model="check1" /> Filho Usando ng-checked: <br> <input type="checkbox" ng-model="check2" /> Pai <input type="checkbox" ng-checked="check2" /> Filho

Diretivas - Eventosng-disable

Desabilita componentes de acordo com condições definidas pelo viewmodel

Pode ser aplicado em

Inputs

Buttons

Checkboxes

Etc.

<p>Nome: <input /></p><p>CPF: <input ng-model="cpf" ng-disabled="cnpj" /></p><p>CNPJ: <input ng-model="cnpj" ng-disabled="cpf" /></p>

Diretivas - Eventosng-click

Invoca uma função do controller ao clicar no componente

Pode ser aplicado em qualquer tag

.controller('eventController', function() { this.tipoPessoa = function (cpf) { if (cpf) console.log("Pessoa física"); else console.log("Pessoa jurídica"); }; });

<div ng-controller =“eventController as vm"> <p>Nome: <input /></p> <p>Type cpf <b>ou</b> cnpj</p> <p>CPF: <input ng-model="cpf" ng-disabled="cnpj" /></p> <p>CNPJ: <input ng-model="cnpj" ng-disabled="cpf" /></p> <button ng-click="vm.tipoPessoa(cpf)">Verifica Tipo</button></div>

Diretivas - Eventosng-change

Observa uma variável e invoca uma função em caso de alteração desta

<p>Nome: <input /></p> <p>CNPJ: <input ng-model="cnpj" ng-disabled="cpf" ng-change="vm.contador()" /></p> Numero de alterações: {{vm.cont}}

.controller('eventController', function() { this.cont = 0; this.contador = function() { this.cont++; }; });

Diretivas – Controle de Fluxo

Estruturais


Bind


Eventos

• ng-checked• ng-disable• ng-click• ng-change

Controle de Fluxo

• ng-repeat• ng-transclude• ng-show/hide• ng-if

Diretivas – Controle de Fluxong-repeat

Repete um componente e todo seu conteúdo para cada item de um array do viewmodel

Equivalente ao foreach no C#

var fluxoController = function () { var self = this; self.clientes = [ { name: 'José da silva', age: 50 }, { name: 'José da lima', age: 32 }, { name: 'José da alberto', age: 54 }, { name: 'Correia lima', age: 11 }, { name: 'Correia silva', age: 32 }, { name: 'Correia alberto', age: 41 } ]; }; app.controller('fluxoController', fluxoController);

<body ng-controller="fluxoController as vm"> <table class="table table-striped"> <tr ng-repeat="person in vm.clientes"> <td>{{person.name}}</td> <td>{{person.age}}</td> </tr> </table> </body>

Diretivas – Controle de Fluxong-repeat

Temos acesso à propriedades de controle desta diretiva:

$index

$last

$first

$odd

$even

$middle

<table class="table table-striped"> <tr ng-repeat="person in vm.clientes"> <td> id: {{$index+1}} <span ng-show="$even"> par</span> <span ng-show="$odd"> impar</span> <span ng-show="$first"> Primeiro</span> <span ng-show="$last"> Utimo</span> </td> <td> {{person.name}} </td> <td>{{person.age}}</td> </tr> </table>

Diretivas – Controle de Fluxong-hide / ng-show

Mostra ou oculta o componente se acordo com determinada condição

<table class="table table-striped"> <tr ng-repeat="person in vm.clientes"> <td> <span ng-hide="person.age>=18">[DE MENOR]</span> {{person.name}} </td> <td>{{person.age}}</td> </tr> </table>

Diretivas – Controle de Fluxong-if

Tem função semelhante ao ng-show e ng-hide

A diferença é que este remove o elemento do DOM, enquanto hide/show apenas aplicam a propriedade display : none !important

<table class="table table-striped"> <tr ng-repeat="person in vm.clientes"> <td> <span ng-if="person.age<=18">[DE MENOR]</span> {{person.name}} </td> <td>{{person.age}}</td> </tr> </table>

Wesley A.LemosLages/SC - 2014

SPA Jumpstart - Angular - 4 - Diretivas Nativas

Software

Transcript of SPA Jumpstart - Angular - 4 - Diretivas Nativas