O documento descreve 10 passos para aprender a criar diretivas no AngularJS. Os passos incluem: 1) Determinar se uma diretiva é apropriada; 2) Criar uma diretiva com template interno; 3) Usar template externo e modos de restrição; 4) Criar um módulo para a diretiva.
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
No sétimo episódio da série sobre Node.js vamos conhecer um dos core modules mais importantes da plataforma, responsável por implementar o protocolo HTTP.
Vamos criar um roteador de requisições, implementando o back-end utilizado na série sobre AngularJS.
https://youtu.be/Pp3OCaOCeWk
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
No sétimo episódio da série sobre Node.js vamos conhecer um dos core modules mais importantes da plataforma, responsável por implementar o protocolo HTTP.
Vamos criar um roteador de requisições, implementando o back-end utilizado na série sobre AngularJS.
https://youtu.be/Pp3OCaOCeWk
Palestra para o LinguÁgil 2009 em Salvador.
Evento realizado entre os dias 12 e 14 de novembro de 2009 em Salvador. Palestra realizada no dia 14/11 das 17:20 às 18:10.
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereJuliano Martins
Esta apresentação contem um passo a passo mostrando a criação de um Web Service RESTFul utilizando a API Jersey no Eclipse, rodando nos servidores de aplicação Tomcat, JBoss e Websphere
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
This is the copy of the presentation that I used in my talk / workshop ' Business Analyst to Product Owner- Agile Software Development'. The workshop was held at Welingkar's Institute at Mumbai on 30-Oct-2010.
Palestra para o LinguÁgil 2009 em Salvador.
Evento realizado entre os dias 12 e 14 de novembro de 2009 em Salvador. Palestra realizada no dia 14/11 das 17:20 às 18:10.
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereJuliano Martins
Esta apresentação contem um passo a passo mostrando a criação de um Web Service RESTFul utilizando a API Jersey no Eclipse, rodando nos servidores de aplicação Tomcat, JBoss e Websphere
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
This is the copy of the presentation that I used in my talk / workshop ' Business Analyst to Product Owner- Agile Software Development'. The workshop was held at Welingkar's Institute at Mumbai on 30-Oct-2010.
Workshop de introdução ao rápida a linguagem JavaScript, a plataforma Node.js e o framework Socket.IO.
Nesta talk é apresentado suas principais características, de forma prática, contando um exercício sobre orientação a objetos com javascript e um exercício sobre criação de um microblog realtime usando Socket.IO.
Node.js - #3 - Global Objects - Rodrigo BranasRodrigo Branas
Nesta apresentação, vamos falar sobre os Global Objects.
Não deixe de assistir a série no YouTube, em: https://www.youtube.com/watch?v=KtDwdoxQL4A&list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq
Na estréia da série sobre Node.js, vamos falar sobre a história e as principais caraterísticas da plataforma como o V8, event loop e thread pool.
Vamos mostrar por meio de diversos exemplos como o Node.js funciona e quais são os aspectos importantes em termos de escalabilidade e performance.
https://www.youtube.com/watch?v=KtDwdoxQL4A
Vamos falar sobre o objeto process, abordando algumas de suas principais informações como: pid, title, arch, platform, memoryUsage, uptime, env e muito mais.
Vamos começar interagindo com os argumentos passados pela linha de comando e depois por meio do teclado. Falaremos também sobre os 3 tipos de standard stream: input, output e error.
Por fim, aprenderemos a abortar o processo e a tratar eventos como exit e uncaughtException.
No sexto episódio da série sobre Node.js vamos conhecer um dos core modules mais antigos da plataforma, responsável por viabilizar a comunicação de dados com base no protocolo TCP.
Para isso, vamos desenvolver um chat, aprendendo a conectar clientes ao servidor, trocando mensagens e tratando os principais eventos como o connect, data e end.
https://www.youtube.com/watch?v=sx36tuCzUOE
Vamos falar sobre o tipo Date, abordando a forma de armazenamento interno, explicando o que é a era Unix, a partir de onde as datas são calculadas, e também as 4 formas de criar um Date, a partir de sua função construtora.
Além disso, veremos os formatos RFC 2822 e também o ISO 8601, ambos aceitos na criação de uma data a partir de uma String e por fim estudaremos algumas operações da API de Date.
Uma Abordagem bem completa sobre o Framework, passando pelo "O Que é AngularJS, AngularJS?", Alguns Core Concepts, Bootstrap & Runtime, Mitos, Prós, Contras e finalizando com uma abordagem bem completa do que está por vir na versão 2.0 do framework.
Uma visão crítica sobre o hype da vez. Esta palestra tem como norte tirar o ruído e fundamentar (inclusive com exemplos) o que realmente importa neste papo de componentes.
http://frontinpoa.com.br/2014
Video: https://www.youtube.com/watch?v=KhSDReAefx0
Palestra sobre Backbone.js ministrada no LambdaDay, evento da Lambda3.
http://day.lambda3.com.br
Código do exemplo em:
https://github.com/Lambda3/lambdaday2013-backbonejs
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
Nesta palestra são abordados alguns desafios a serem enfrentados na criação de um Framework PHP open-source e também os obstáculos a serem superados para que o mesmo evolua tecnologicamente, mantendo a retrocompatibilidade e uma base de usuários ativa, fazendo o uso correto de seus conceitos.
Mini Curso apresentado no Unisul TechDay - 26/11/2011- Sistemas WEB em Java utilizando as tecnologias Hibernate, JSF, Facelets e Richfaces - Rogério Napoleão Júnior
2. Os 10 Passos são:
• 1 - Uma possível directiva?
• 2 - Criando uma directiva com template inline.
• 3 - Directiva com template externo e usando o restrict mode.
• 4 - Criando um módulo para a directiva.
• 5 - Outra view usando a mesma directiva.
• 6 - Isolando o escopo da directiva.
• 7 - Utilizando o Transclude.
• 8 - Adicionando ações a directiva.
• 9 - Criando uma controladora para a directiva.
• 10 - Complicando a vida e criando directivas com dependência de outras directivas.
@jandersonfc
4. 1 - Uma possível directiva?
View01.js
View01.html
@jandersonfc
5. 2 - Criando uma directiva com template
inline
View02.js
View02.html
@jandersonfc
6. 2 - Criando uma directiva com template
Por padrão as directivas serão usadas como atributo
View01.html
<div card-profile></div>
@jandersonfc
inline
7. 2 - Criando uma directiva com template
Por padrão as directivas compartilham do mesmo escopo do
parent. No nosso caso o scope da View02Ctrl.
<div ng-repeat="user in users">
<div card-profile></div>
</div>
.directive('cardProfile', [function(){
return {
template: '<h2>{{user.name}}</h2>n'+
'<p>Twitter: {{user.twitter}}</p>n'+
'<p>website: <a href="{{user.website}}">{{user.website}}</a></p>'
};
}])
View02.html
View02.js
@jandersonfc
inline
8. 3 - Directiva com template externo e
usando o restrict mode
View03.js
card-profile.html
View03.html
@jandersonfc
9. 3 - Directiva com template externo e
restrict indica como a directiva pode ser usada.
Caso o valor do restrict seja ‘E’ a directiva só pode ser usada como Element.
.directive('cardProfile2', [function(){
return {
restrict: 'E',
templateUrl: 'view03/card-profile.html'
};
}])
View03.js
<div ng-repeat="user in users">
<card-profile2></card-profile2>
</div>
View03.html
@jandersonfc
usando o restrict mode
10. 3 - Directiva com template externo e
restrict indica como a directiva pode ser usada.
Caso o valor do restrict seja ‘A’ a directiva só pode ser usada como Attribute.
.directive('cardProfile2', [function(){
return {
restrict: 'A',
templateUrl: 'view03/card-profile.html'
};
}])
View03.js
<div ng-repeat="user in users">
<div card-profile2></div>
</div>
View03.html
@jandersonfc
usando o restrict mode
11. 3 - Directiva com template externo e
restrict indica como a directiva pode ser usada.
Caso o valor do restrict seja ‘C’ a directiva só pode ser usada como Class.
.directive('cardProfile2', [function(){
return {
restrict: 'C',
templateUrl: 'view03/card-profile.html'
};
}])
View03.js
<div ng-repeat="user in users">
<div class="card-profile2"></div>
</div>
View03.html
@jandersonfc
usando o restrict mode
12. 3 - Directiva com template externo e
restrict indica como a directiva pode ser usada.
Caso o valor do restrict seja ‘M’ a directiva só pode ser usada como Comment.
.directive('cardProfile2', [function(){
return {
restrict: 'M',
templateUrl: 'view03/card-profile.html'
};
}])
View03.js
<div ng-repeat="user in users">
<!-- directive: card-profile2 -->
</div>
View03.html
@jandersonfc
usando o restrict mode
13. 3 - Directiva com template externo e
restrict indica como a directiva pode ser usada.
Uma directiva pode ter mais de um restrict mode
.directive('cardProfile2', [function(){
return {
restrict: 'EACM',
templateUrl: 'view03/card-profile.html'
};
}])
View03.js
@jandersonfc
usando o restrict mode
14. 3 - Directiva com template externo e
templateUrl é usado para indicar o arquivo que essa
directiva irá usar como template.
.directive('cardProfile2', [function(){
return {
restrict: 'M',
templateUrl: 'view03/card-profile.html'
};
}])
View03.js
card-profile.html
<h2>{{user.name}}</h2>
<p>Twitter: {{user.twitter}}</p>
<p>website: <a href="{{user.website}}">{{user.website}}</a></p>
@jandersonfc
usando o restrict mode
15. 3 - Directiva com template externo e
Dicas e Truques
• Evite usar template externo desnecessário. O angular para usar esse template
externo faz uma chamada http (GET). Isso é bem mais lento que deixar o template
inline.
• Template externo é bem mais legível, eu sei. Uma possibilidade é usar o
templateCache. Assim você evitará múltiplas chamadas http desnecessários. Para
saber mais sobre templateCache acesse
https://docs.angularjs.org/api/ng/service/$templateCache .
• Não existe uma regra para usar o restrict mode, é comum achar uma directiva com
acesso 'use e abuse' (restrict: ‘EAC’).
• É recomendável usar o restrict como Atributo ( restrict: 'A' ) quando sua directiva
adicionar ou mudar o comportamento de um componente existente. (ex. <input
validar-cpf />).
• Quando sua directiva é um novo componente que adicionará novos elementos e
comportamentos, recomenda-se usar Element ( restrict: ‘E' ). (ex. <card-profile /> ).
@jandersonfc
usando o restrict mode
16. 4 - Criando um módulo para a directiva
jfc-card-profile.js
card-profile04.html
View04.html
@jandersonfc
17. 4 - Criando um módulo para a directiva
Basta adicionar o módulo para ter acesso as directivas.
'use strict';
app.js
// Declare app level module which
depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view01',
'myApp.view02',
'myApp.view03',
'myApp.view04',
'myApp.view05',
'myApp.view06',
'myApp.view07',
'myApp.view08',
'myApp.view09',
'myApp.view10',
'myApp.version',
'jfc'
])
index.html
<!-- In production use:
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view01/view01.js"></script>
<script src="view02/view02.js"></script>
<script src="view03/view03.js"></script>
<script src="view04/view04.js"></script>
<script src="view05/view05.js"></script>
<script src="view06/view06.js"></script>
<script src="view07/view07.js"></script>
<script src="view08/view08.js"></script>
<script src="view09/view09.js"></script>
<script src="view10/view10.js"></script>
<script src="components/jfc-card-profile/jfc-card-profile.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
@jandersonfc
18. 4 - Criando um módulo para a directiva
Basta adicionar o módulo para ter acesso as directivas.
View04.html
<p>This is the partial for view 4.</p>
<p>criando um module para a directive para ser usado e N modules</p>
<jfc-card-profile04></jfc-card-profile04>
card-profile04.html.html
<div ng-repeat="user in users">
<h2>{{user.name}}</h2>
<p>Twitter: {{user.twitter}}</p>
<p>website: <a href="{{user.website}}">{{user.website}}</a></p>
</div>
@jandersonfc
19. 4 - Criando um módulo para a directiva
Dicas e Truques
• O Angular espera que o nome de sua directiva seja único.
Caso você tenha duas directivas com o mesmo nome,
mesmo sendo de módulos distintos, será lançado um erro.
• É recomendável usar um identificador inicial em suas
directivas (de 2 ou 3 caracteres) para evitar conflitos com
outras directivas. (ex. jfcCardProfile ou brCardProfile no
lugar de cardProfile).
• Não é recomendável usar o identificador inicial ng , esse
é o identificador usado nas directivas do próprio Angular.
@jandersonfc
20. 5 - Outra view usando a mesma directiva
jfc-card-profile.js
card-profile04.html
View05.html
@jandersonfc
21. 6 - Isolando o escopo da directiva
jfc-card-profile.js
card-profile04.html
View06.html
@jandersonfc
22. 6 - Isolando o escopo da directiva
scope: {} indica que essa directiva terá seu próprio escopo. A directiva
não terá mais acesso ao escopo do parent. Nossa directiva só terá acesso
as variáveis de escopo informados em sua definição.
jfc-card-profile.js
.directive('jfcCardProfile06', [function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile04.html',
scope: {
users: '=datas'
}
};
}])
View06.html
<p>This is the partial for view 6.</p>
<p>Isolando o Scope da Directive</p>
<button ng-click="updateUsers()">Update Users</button>
<jfc-card-profile06 datas="users"></jfc-card-profile06>
@jandersonfc
23. 6 - Isolando o escopo da directiva
Se o nome do atributo preenchido no template for igual a variável de
escopo que criamos em nossa directiva, podemos usar apenas o símbolo
‘='.
jfc-card-profile.js
.directive('jfcCardProfile06', [function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile04.html',
scope: {
users: '='
}
};
}])
View06.html
<p>This is the partial for view 6.</p>
<p>Isolando o Scope da Directive</p>
<button ng-click="updateUsers()">Update Users</button>
<jfc-card-profile06 users="users"></jfc-card-profile06>
@jandersonfc
24. 6 - Isolando o escopo da directiva
O valor '=' indica para a directiva um bi-direcional binding com o escopo
do parent, ou seja, mudando o valor dessa variável na directiva mudará
também no escopo externo(parent) e vice versa.
.directive('jfcCardProfile06', [function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile04.html',
scope: {
users: '='
}
};
}])
jfc-card-profile.js
@jandersonfc
25. 6 - Isolando o escopo da directiva
replace: true Vai substituir o elemento raiz da declaração da directiva e
vai usar apenas os elementos da directiva.
.directive('jfcCardProfile06', [function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile04.html',
scope: {
users: '='
}
};
}])
jfc-card-profile.js
@jandersonfc
26. 6 - Isolando o escopo da directiva
replace: false
<jfc-card-profile06 datas="users" class="ng-scope ng-isolate-scope”>
<!-- ngRepeat: user in users —>
<div ng-repeat="user in users" class="ng-scope">
<h2 class="ng-binding">Janderson Fernandes Cardoso</h2>
<p class="ng-binding">Twitter: @jandersonfc</p>
<p>website: <a href="http://jandersonfc.com" class="ng-binding">http://jandersonfc.com</a></p>
replace: true
</div><!-- end ngRepeat: user in users —>
<div ng-repeat="user in users" class="ng-scope">
<h2 class="ng-binding">Janderson Futebol Clube</h2>
<p class="ng-binding">Twitter: @jandersonfclube</p>
<p>website: <a href="http://jandersonfclube.com" class="ng-binding">http://jandersonfclube.com</a></p>
</div><!-- end ngRepeat: user in users —>
</jfc-card-profile06>
<!-- ngRepeat: user in users —>
<div ng-repeat="user in users" class="ng-scope">
<h2 class="ng-binding">Janderson Fernandes Cardoso</h2>
<p class="ng-binding">Twitter: @jandersonfc</p>
<p>website: <a href="http://jandersonfc.com" class="ng-binding">http://jandersonfc.com</a></p>
</div><!-- end ngRepeat: user in users —>
<div ng-repeat="user in users" class="ng-scope">
<h2 class="ng-binding">Janderson Futebol Clube</h2>
<p class="ng-binding">Twitter: @jandersonfclube</p>
<p>website: <a href="http://jandersonfclube.com" class="ng-binding">http://jandersonfclube.com</a></p>
</div><!-- end ngRepeat: user in users —>
@jandersonfc
27. 6 - Isolando o escopo da directiva
Por que separar o nosso escopo?
• Em nosso exemplo, era obrigatório ter uma variável
chamada users no escopo do parent para a directiva
funcionar. Separando o escopo e passando a informação
por atributo resolvemos esse problema.
• Isolar o escopo da directiva é o primeiro passo para criar
directivas com reuso.
• Separando o escopo garantimos que a directiva só tenha
acesso as informações cruciais para seu funcionamento,
sem correr o risco de alterar algo no escopo do parent
acidentalmente.
@jandersonfc
28. 7 - Utilizando o Transclude
jfc-card-profile.js
card-profile07.html
View07.html
@jandersonfc
29. 7 - Utilizando o Transclude
transclude: true indica que a directiva irá extrair os elementos
adicionados como "filhos" na declaração da directiva. Transclude é mais
que isso, mas para facilitar a compreensão desses exemplos vamos no
reter a essa explicação.
<jfc-card-profile07 data="user">
<p>linkedin: <a href="{{user.linkedin}}">{{user.linkedin}}</a></p>
<p>facebook: <a href="{{user.facebook}}">{{user.facebook}}</a></p>
</jfc-card-profile07>
View07.html
.directive('jfcCardProfile07', [function(){
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile07.html',
scope: {
user: '=data'
}
};
}])
jfc-card-profile.js
@jandersonfc
30. 7 - Utilizando o Transclude
<div>
<h2>{{user.name}}</h2>
<p>Twitter: {{user.twitter}}</p>
<div ng-transclude></div>
<p>website: <a href="{{user.website}}">{{user.website}}</a></p>
</div>
ng-transclude indica exatamente a posição onde os elementos que foram
extraídos serão adicionados.
jfc-card-profile07.html
@jandersonfc
31. 8 - Adicionando ações a directiva
jfc-card-profile.js
card-profile08.html
@jandersonfc
32. 8 - Adicionando ações a directiva
view8.js
view08.html
@jandersonfc
33. 8 - Adicionando ações a directiva
É na função link que criaremos nossas variáveis, funções e manipulação de DOM necessários jfc-card-profile.js
link: function(scope, element, attrs) {
scope.edit = function(user){
user.editMode = true;
}
scope.save = function(user){
user.editMode = false;
scope.onSave({user: user});
}
}
<div ng-repeat="user in users">
<p>
<h2 ng-hide="user.editMode">{{user.name}}</h2>
<input ng-show="user.editMode" ng-model="user.name"/>
</p>
<p>
<span ng-hide="user.editMode">Twitter: {{user.twitter}}</span>
<input ng-show="user.editMode" ng-model="user.twitter"/>
</p>
<p>
<span ng-hide="user.editMode">website: <a
href="{{user.website}}">{{user.website}}</a></span>
<input ng-show="user.editMode" ng-model="user.website"/>
</p>
<button ng-hide="user.editMode" ng-click="
edit(user)">Edit</button>
<button ng-show="user.editMode" ng-click="
save(user)">Save</button>
</div>
jfc-card-profile08.html
@jandersonfc
34. 8 - Adicionando ações a directiva
link: function(scope, element, attrs) {
• scope - Equivalente ao $scope das controladoras, objeto que
contém nossas variáveis e funções acessíveis ao template.
• element - Representa o jqlite-wrapped do elemento html da nossa
directiva, não é necessário usar o $ do jQuery para manipular
esse elemento, o angular já traz ele pronto para isso. É muito
comum manipular esse elemento quando a directiva é uma forma
de usar um plugin jQuery, ou quando queremos adicionar event
listeners nesse elemento. (ex. element.datepicker(),
element.on('mousedown', function(event) )
• attrs - traz a lista de atributos e seus valores adicionados na
nossa directiva. (ex. <input my-directive min="23" max=“24” />)
@jandersonfc
36. 8 - Adicionando ações a directiva
Dicas e Truques
• Existe a função compile na directiva. na execução do
compile existe a chamada para as funções preLink e
postLink.
• A função link é equivalente ao postLink do compile.
• Ao usar o compile não utilizar a função link.
• Não é recomendável usar a função compile, somente
em caso de performance onde será necessário
executar alguma rotina antes do postLink.
@jandersonfc
37. 9 - Criando uma controladora para a
directiva
jfc-card-profile.js
@jandersonfc
38. 9 - Criando uma controladora para a
Quando criamos uma controller , ela é instanciada antes da execução da
funçao preLink em compile.
controller: function($scope) {
$scope.setEditModeToFalse = function(){
for (var i = 0; i < $scope.users.length; i++) {
$scope.users[i].editMode = false;
};
}
$scope.edit = function(user){
user.editMode = true;
}
$scope.save = function(user){
user.editMode = false;
$scope.onSave({user: user});
}
},
link: function(scope, element, attrs) {
scope.setEditModeToFalse();
}
jfc-card-profile.js
@jandersonfc
directiva
39. 9 - Criando uma controladora para a
Dicas e Truques
• Usar Controladora parece ser uma ótima forma de
organizar o código da directiva, deixando a lógica de
manipulação de scope na controller e manipulação de
DOM na função link .
• Na documentação do Angular só é recomendado usar
controladora quando você quer expor a API de sua directiva
para outras directivas (veremos como isso funciona no
exemplo 10).
• Portanto, no exemplo 09, não é recomendável usar a
função controller, nesse caso é melhor fazer diretamente
na função link como no exemplo 08.
@jandersonfc
directiva
40. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
view10.html
jfc-card-profile.js
jfc-card-profile10-list.html
@jandersonfc
41. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
jfc-card-profile10-renderer.html
jfc-card-profile.js
@jandersonfc
42. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
jfc-card-profile.js
jfc-card-profile10-view.html
@jandersonfc
43. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
jfc-card-profile.js
jfc-card-profile10-edit.html
@jandersonfc
44. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
Podemos criar directivas que possuem outras directivas
jfc-card-profile10-list.html
<jfc-card-profile10-renderer ng-repeat="user in
users"
ng-switch on="user.mode">
</jfc-card-profile10-renderer>
@jandersonfc
45. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
A controladora pode ser declarada diretamente na directivas como fizemos no
exemplo 09 ou referenciar uma controller existente no módulo.
.controller('cardProfileController', ['$scope', '$attrs', function($scope, $attrs){
this.setModeDefault = function(){
$scope.user.mode = 'view';
}
this.edit = function(){
$scope.user.mode = 'edit';
}
this.save = function(){
$scope.user.mode = 'view';
$scope.onSave({user: $scope.user});
}
}])
.directive('jfcCardProfile10Renderer', function(){
return {
restrict: 'E',
replace: false,
controller: 'cardProfileController',
templateUrl: 'components/jfc-card-profile/jfc-card-profile10-renderer.html',
link: function(scope, element, attrs, ctrl) {
ctrl.setModeDefault();
}
};
})
jfc-card-profile.js
@jandersonfc
46. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
A controladora da directiva pode ser acessada através do quarto parâmetro na
declaração da função link.
.controller('cardProfileController', ['$scope', '$attrs', function($scope, $attrs){
this.setModeDefault = function(){
$scope.user.mode = 'view';
}
this.edit = function(){
$scope.user.mode = 'edit';
}
this.save = function(){
$scope.user.mode = 'view';
$scope.onSave({user: $scope.user});
}
}])
.directive('jfcCardProfile10Renderer', function(){
return {
restrict: 'E',
replace: false,
controller: 'cardProfileController',
templateUrl: 'components/jfc-card-profile/jfc-card-profile10-renderer.html',
link: function(scope, element, attrs, ctrl) {
ctrl.setModeDefault();
}
};
})
jfc-card-profile.js
@jandersonfc
47. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
ng-switch é uma diretiva do angular que você pode usar para facilitar a troca de
estrutura de DOM.
jfc-card-profile10-list.html
<jfc-card-profile10-renderer ng-repeat="user in users"
ng-switch on="user.mode">
</jfc-card-profile10-renderer>
jfc-card-profile10-renderer.html
<jfc-card-profile10-view ng-switch-when="view"></jfc-card-profile10-view>
<jfc-card-profile10-edit ng-switch-when="edit"></jfc-card-profile10-edit>
@jandersonfc
48. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
Nossa directiva Renderer adiciona mais duas directivas em nosso projeto. View
e Edit.
jfc-card-profile10-renderer.html
<jfc-card-profile10-view ng-switch-when="view"></jfc-card-profile10-view>
<jfc-card-profile10-edit ng-switch-when="edit"></jfc-card-profile10-edit>
@jandersonfc
49. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
Nossa directiva View compartilha da mesma controladora que a Renderer. para isso usamos o atributo
require. O símbolo ^ indica que é obrigatório que jfcCardProfile10Renderer seja declarada em um parent
element e que a mesma possua uma controladora. Existem outros símbolos que podem ser passados no
require ( ?, ^^, ?^, ?^^ ). Olhe a documentação para mais detalhes.
jfc-card-profile10.js
.directive('jfcCardProfile10View', function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile10-view.html',
require: '^jfcCardProfile10Renderer',
link: function(scope, element, attrs, ctrl) {
scope.edit = function(){
ctrl.edit();
}
}
};
})
@jandersonfc
50. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
Agora que nossa directiva View compartilha da mesma controller da Renderer. Podemos acessar nossa
controladora através do quarto parâmetro.
jfc-card-profile10.js
.directive('jfcCardProfile10View', function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile10-view.html',
require: '^jfcCardProfile10Renderer',
link: function(scope, element, attrs, ctrl) {
scope.edit = function(){
ctrl.edit();
}
}
};
})
@jandersonfc
51. 10 - Complicando a vida e criando directivas
com dependência de outras directivas
O mesmo acontece com nossa diretiva Edit.
jfc-card-profile10.js
.directive('jfcCardProfile10Edit', function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'components/jfc-card-profile/jfc-card-profile10-edit.html',
require: '^jfcCardProfile10Renderer',
link: function(scope, element, attrs, ctrl) {
scope.save = function(){
ctrl.save();
}
}
};
});
@jandersonfc
52. E agora?
• Pense 2 vezes antes de criar um directiva. Evite criar directivas desnecessárias.
• Directiva é sempre muito útil, mas isso não significa que a forma como é criada hoje seja
prática. Por isso, evite criar directivas desnecessárias.
• No AngularJS 2 terá uma grande mudança na forma de criar directivas, e isso é muito
bom! então evite criar directivas desnecessárias.
• Polymer é outro projeto do Google que trabalha já com os Web Components. Não tenho
dúvida que web components é a melhor forma de criar componentes. Polymer terá
integração garantida no AngulaJS 2. Por favor, evite criar directivas desnecessárias.
• Essa apresentação e todo o material de apoio foi criado se baseando unicamente na
excelente documentação do AngularJS ( https://docs.angularjs.org/guide/directive ).
Mesmo assim, evite criar directivas desnecessárias. :P
• O material de apoio dessa apresentação pode ser acessada em
https://github.com/jandersonfc/tutorial-angularjs-directives
@jandersonfc