Criando Componentes AngularJS

Demo 1: http://plnkr.co/edit/vVVO74OxvmGumVdPkUxh?p=preview
Demo 2: http://plnkr.co/edit/XoYE9cqzEMX0Me2NanD4?p=preview

Transcript

1. CRIANDO COMPONENTES
 ANGULARJS
2. CIRO NUNES front-end engineer github/cironunes @cironunesdev cironunes.com +cironunesdev
4. 2014 Developer Expert Angular JS
5. meetup.com/AngularJS:Sao:Paulo
6. meetup.com/AngularJS:BH
7. z EM BREVE
8. CRIANDO COMPONENTES
 ANGULARJS
9. COMPONENTES SÃO COMO PEÇAS DE LEGO
11. <div id="tabs"> <ul> <li><a href="#fragment1">One</a></li> <li><a href="#fragment2">Two</a></li> <li><a href="#fragment3">Three</a></li> </ul> <div id="fragment1"> <p>Tab 1</p> </div> <div id="fragment2"> <p>Tab 2</p> </div> <div id="fragment3"> <p>Tab 3</p> </div> </div> ! <script> $("#tabs").tabs(); </script> tabs.html
13. <my-tabs> <my-pane title="One"><p>Tab 1</p></my-pane> <my-pane title="Two"><p>Tab 2</p></my-pane> <my-pane title="Three"><p>Tab 3</p></my-pane> </my-tabs> tabs.html
14. DIRETIVAS
15. 1. DIRETIVAS PERMITEM ESTENDER O HTML PARA CRIAR COMPONENTES CUSTOMIZADOS
16. 2. DIRETIVAS SÃO USADAS PARA 
 MANIPULAR O DOM
17. 3. DIRETIVAS SÃO MUITO PARECIDAS, MAS NÃO SÃO WEB COMPONENTS!
19. AGENDA 1. REUTILIZAR DIRETIVAS 2. CRIAR DIRETIVAS CUSTOMIZADAS 3. COMPARTILHAR SUAS DIRETIVAS
20. 1. REUTILIZAR
21. NÃO REINVENTE A RODA!
22. DIRETIVAS DO CORE ng:app> ng:controller> ng:model> ng:view> ng:click> ng:repeat> ng:if> ng:show> ng:hide> …
23. USANDO COMPONENTES DE TERCEIROS
24. USANDO COMPONENTES DE TERCEIROS
25. USANDO COMPONENTES DE TERCEIROS
26. USANDO COMPONENTES DE TERCEIROS $ bower search angular-ui $ bower install angular-ui —-save
27. USANDO COMPONENTES DE TERCEIROS $ bower search angular-ui $ bower install angular-ui —-save <script src=“bower_components/…/angular-ui.js”></script> index.html
28. USANDO COMPONENTES DE TERCEIROS $ bower search angular-ui $ bower install angular-ui —-save <script src=“bower_components/…/angular-ui.js”></script> index.html angular.module('myApp', ['ui']); app.js
29. COMO ESCOLHER
30. COMO ESCOLHER UNIT TESTS
31. COMO ESCOLHER UNIT TESTS DOCUMENTAÇÃO
32. COMO ESCOLHER UNIT TESTS DOCUMENTAÇÃO MELHORES PRÁTICAS DE CRIAÇÃO
33. ONDE ENCONTRAR
34. ONDE ENCONTRAR
35. ONDE ENCONTRAR
36. NÃO REINVENTE A RODA!
37. 2. CRIAR
38. HELLO WORLD
39. HELLO WORLD angular.module('myDirectives', []); CRIE UM MÓDULO PARA SUAS DIRETIVAS
40. HELLO WORLD angular.module('myDirectives', []); CRIE UM MÓDULO PARA SUAS DIRETIVAS angular.module('myApp', ['myDirectives']); INCLUA ESSE MÓDULO NA SUA APLICAÇÃO
41. HELLO WORLD
42. HELLO WORLD angular.module('myDirectives') .directive('myGreet' function() { return { restrict: 'E', // more later template: '<h1>Hello World!</h1>' }; });
43. HELLO WORLD angular.module('myDirectives') .directive('myGreet' function() { return { restrict: 'E', // more later template: '<h1>Hello World!</h1>' }; }); <my-greet></my-greet>
44. HELLO WORLD angular.module('myDirectives') .directive('myGreet' function() { return { restrict: 'E', // more later template: '<h1>Hello World!</h1>' }; }); <my-greet></my-greet> HELLO WORLD
45. BEST PRATICE: CONVENÇÃO DE NOMENCLATURA
46. BEST PRATICE: CONVENÇÃO DE NOMENCLATURA USE UM PREFIXO ÚNICO SEGUIDO POR "-". (e.g.:>my:component)
47. BEST PRATICE: CONVENÇÃO DE NOMENCLATURA USE UM PREFIXO ÚNICO SEGUIDO POR "-". (e.g.:>my:component) NÃO USE O PREFIXO "ng:"
48. BEST PRATICE: CONVENÇÃO DE NOMENCLATURA USE UM PREFIXO ÚNICO SEGUIDO POR "-". (e.g.:>my:component) NÃO USE O PREFIXO "ng:" O MAIS COMUM É USAR PREFIXOS DE DUAS LETRAS (e.g.:>"ng:",>"ui:")
49. FORMAS DE INVOCAR
50. FORMAS DE INVOCAR restrict: 'A' ATRIBUTOS
51. FORMAS DE INVOCAR restrict: 'A' ATRIBUTOS restrict: 'E' ELEMENTOS
52. FORMAS DE INVOCAR restrict: 'A' ATRIBUTOS restrict: 'E' ELEMENTOS restrict: 'AE' AMBOS
53. HELLO WORLD "DE VERDADE"
54. // removed for brevity .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’ }; });
55. // removed for brevity .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’ }; });
56. <div ng-controller="MyCtrl"> <my-greet></my-greet> </div> // removed for brevity .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’ }; });
57. <div ng-controller="MyCtrl"> <my-greet></my-greet> </div> // removed for brevity .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’ }; }); HIDDEN KNOWLEDGE!
58. ISOLATE SCOPE FTW!
59. .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’, scope: { person: '@' } }; });
60. .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’, scope: { person: '@' } }; });
61. <div ng-controller="MyCtrl"> <my-greet person="{{ person }}"></my-greet> </div> .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’, scope: { person: '@' } }; });
62. <div ng-controller="MyCtrl"> <my-greet person="{{ person }}"></my-greet> </div> .controller('MyCtrl' function($scope) { $scope.person = 'Ciro'; )) .directive('myGreet' function() { return { restrict: 'EA', template: '<h1>Hello {{ person }}!</h1>’, scope: { person: '@' } }; });
63. ISOLATE SCOPE
64. ISOLATE SCOPE scope: { foo: '@', bar: '=', baz: '&' }
65. ISOLATE SCOPE scope: { foo: '@', bar: '=', baz: '&' } DEMO
66. ISOLATE SCOPE
67. ISOLATE SCOPE PERMITE A REUTILIZAÇÃO
68. ISOLATE SCOPE PERMITE A REUTILIZAÇÃO GARANTE A INTEGRIDADE
69. ISOLATE SCOPE PERMITE A REUTILIZAÇÃO GARANTE A INTEGRIDADE OFERECE UMA API SIMPLES E PODEROSA
70. COMPILE E LINK
71. USAR DIRETIVAS É A "ANGULAR WAY" 
 DE MANIPULAR O DOM
72. .directive('myGreet', function() { return { link: function($scope, $element, $attrs) { $element.on('click', function() { // do something }); } }; });
73. BONUS: TRANSCLUSION
74. BONUS: TRANSCLUSION
75. DEMO
76. COMPONENTES DEVEM SER REUTILIZÁVEIS!
77. 3. COMPARTILHAR
78. CRIE SEU REPOSITÓRIO
79. INICIE SEU COMPONENTE BOWER $ bower init
80. CRIE SEU COMPONENTE github.com/cironunes/generator:angular:next
81. $ bower publish PUBLIQUE NO REGISTRO DO BOWER
84. OBRIGADO!