Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Então você quer aprender AngularJS?

Avatar for Ciro Nunes Ciro Nunes
October 18, 2014
Programming
1.4k
19

Então você quer aprender AngularJS?

Nesta palestra construímos uma base conceitual sólida para dominar o AngularJS

Avatar for Ciro Nunes

Ciro Nunes

October 18, 2014

More Decks by Ciro Nunes

See All by Ciro Nunes
Rust Front-end with Yew
Avatar for Ciro Nunes cironunes
0
98
Type safe CSS with Reason
Avatar for Ciro Nunes cironunes
0
150
What I've learned building automated docs for Ansarada's design system
Avatar for Ciro Nunes cironunes
0
100
Beyond ng new
Avatar for Ciro Nunes cironunes
2
250
Animate your Angular apps
Avatar for Ciro Nunes cironunes
0
460
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
110
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
320
Progressive Angular apps
Avatar for Ciro Nunes cironunes
3
950
Angular: Um framework. Mobile & desktop.
Avatar for Ciro Nunes cironunes
1
610

Other Decks in Programming

See All in Programming
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
620
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
580
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
Avatar for Ryusei Ohkura 3l4l5
2
250
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
150
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
8
3k
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
230
Android CLI
Avatar for Sungyong An fornewid
0
240
AIと壁打ちしながら進めるコスト管理
Avatar for Ryoma Fujiwara fufuhu
2
1.7k
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
260
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
720
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
460
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
180

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
410
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
240
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.7k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k

Transcript

  1. ENTÃO VOCE QUER APRENDER ANGULARJS? cnun.es/learn-angularjs

  2. @cironunesdev +cironunesdev cironunes.com CIRO NUNES Front-end Engineer

  3. None

  4. 2014 Developer Expert Angular JS

  5. z

  6. www.metup.com/angularjs-sao-paulo ~500 MEMBROS

  7. POR QUE ?

  8. None
  9. None
  10. None
  11. None
  12. None

  13. AGENDA 1. Fundamentos do AngularJS 2. Erros comuns 3. Como

    e onde aprender mais

  14. ENTÃO VOCE QUER APRENDER ANGULARJS?

  15. FUNDAMENTOS

  16. UM FRAMEWORK PARA CRIAR SINGLE PAGE APPLICATIONS

  17. None
  18. None

  19. AngularJS is what HTML would be if it was created

    to build applications

  20. D D D

  21. Data-binding Dependency Injection Directives D D D

  22. Data-binding

  23. None

  24. #profile_name #greeting $('#profile_name').on('change',6function()6{
 66$('#greeting').text(this.value);6 });

  25. None
  26. None
  27. None

  28. index.html <!doctype6html>6 <html>6 <head>6 66<meta6charset="utfF8">6 66<title>Hello6World</title>6 </head>6 <body6ngFapp>6 66<form>6 6666<label>Name:</label>6

    6666<input6type="text"6ngFmodel="yourName"6placeholder="Enter6a6name6here">6 6666<h1>Hello6{{yourName}}!</h1>6 66</form>6 ! 66<script6src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/ angular.min.js"></script>6 </body>

  29. index.html Fronteira da aplicação <!doctype6html>6 <html>6 <head>6 66<meta6charset="utfF8">6 66<title>Hello6World</title>6 </head>6

    <body6ngFapp>6 66<form>6 6666<label>Name:</label>6 6666<input6type="text"6ngFmodel="yourName"6placeholder="Enter6a6name6here">6 6666<h1>Hello6{{yourName}}!</h1>6 66</form>6 ! 66<script6src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/ angular.min.js"></script>6 </body>

  30. index.html Fronteira da aplicação Model <!doctype6html>6 <html>6 <head>6 66<meta6charset="utfF8">6 66<title>Hello6World</title>6

    </head>6 <body6ngFapp>6 66<form>6 6666<label>Name:</label>6 6666<input6type="text"6ngFmodel="yourName"6placeholder="Enter6a6name6here">6 6666<h1>Hello6{{yourName}}!</h1>6 66</form>6 ! 66<script6src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/ angular.min.js"></script>6 </body>

  31. index.html Fronteira da aplicação Model Template <!doctype6html>6 <html>6 <head>6 66<meta6charset="utfF8">6

    66<title>Hello6World</title>6 </head>6 <body6ngFapp>6 66<form>6 6666<label>Name:</label>6 6666<input6type="text"6ngFmodel="yourName"6placeholder="Enter6a6name6here">6 6666<h1>Hello6{{yourName}}!</h1>6 66</form>6 ! 66<script6src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/ angular.min.js"></script>6 </body>

  32. Dependency Injection

  33. None

  34. index.html <div6ngFapp="todoApp">6 66<h2>Todo</h2>6 66<div6ngFcontroller="TodoController">6 6666<ul>6 666666<li6ngFrepeat="todo6in6todos">6 66666666<input6type="checkbox"6ngFmodel="todo.done">6 66666666<span>{{todo.text}}</span>6 666666</li>6 6666</ul>6

    6666<form6ngFsubmit="addTodo()">6 666666<input6type="text"6ngFmodel="todoText"6 6666666666666placeholder="add6new6todo6here">6 666666<input6type="submit"6value="add">6 6666</form>6 66</div>6 </div>

  35. index.html Módulo da aplicação <div6ngFapp="todoApp">6 66<h2>Todo</h2>6 66<div6ngFcontroller="TodoController">6 6666<ul>6 666666<li6ngFrepeat="todo6in6todos">6 66666666<input6type="checkbox"6ngFmodel="todo.done">6

    66666666<span>{{todo.text}}</span>6 666666</li>6 6666</ul>6 6666<form6ngFsubmit="addTodo()">6 666666<input6type="text"6ngFmodel="todoText"6 6666666666666placeholder="add6new6todo6here">6 666666<input6type="submit"6value="add">6 6666</form>6 66</div>6 </div>

  36. index.html Módulo da aplicação <div6ngFapp="todoApp">6 66<h2>Todo</h2>6 66<div6ngFcontroller="TodoController">6 6666<ul>6 666666<li6ngFrepeat="todo6in6todos">6 66666666<input6type="checkbox"6ngFmodel="todo.done">6

    66666666<span>{{todo.text}}</span>6 666666</li>6 6666</ul>6 6666<form6ngFsubmit="addTodo()">6 666666<input6type="text"6ngFmodel="todoText"6 6666666666666placeholder="add6new6todo6here">6 666666<input6type="submit"6value="add">6 6666</form>6 66</div>6 </div>

  37. todo.js 'use6strict';6 ! angular.module('todoApp',6[])6 66.controller('TodoController',6function($scope)6{6 6666$scope.todos6=6[6 666666{6text:6'Speak6at6DevFest6NE',6done:6false6},6 666666{6text:6'Learn6AngularJS',6done:6true6}6 6666];6 6666$scope.addTodo6=6function()6{6

    666666var6todo6=6{6text:6$scope.todoText,6done:6false6};6 666666$scope.todos.push(todo);6 6666};6 66});

  38. todo.js Definição do módulo principal 'use6strict';6 ! angular.module('todoApp',6[])6 66.controller('TodoController',6function($scope)6{6 6666$scope.todos6=6[6

    666666{6text:6'Speak6at6DevFest6NE',6done:6false6},6 666666{6text:6'Learn6AngularJS',6done:6true6}6 6666];6 6666$scope.addTodo6=6function()6{6 666666var6todo6=6{6text:6$scope.todoText,6done:6false6};6 666666$scope.todos.push(todo);6 6666};6 66});

  39. todo.js Injeção de dependencia Definição do módulo principal 'use6strict';6 !

    angular.module('todoApp',6[])6 66.controller('TodoController',6function($scope)6{6 6666$scope.todos6=6[6 666666{6text:6'Speak6at6DevFest6NE',6done:6false6},6 666666{6text:6'Learn6AngularJS',6done:6true6}6 6666];6 6666$scope.addTodo6=6function()6{6 666666var6todo6=6{6text:6$scope.todoText,6done:6false6};6 666666$scope.todos.push(todo);6 6666};6 66});

  40. todo.spec.js describe('TodoController',6function()6{6 66var6scope;6 ! 66beforeEach(module('todoApp'));6 ! 66beforeEach(inject(function($rootScope,6$controller)6{6 6666scope6=6$rootScope.$new();6 6666$controller('TodoController',6{6 666666$scope:6scope6

    6666});6 66}));6 ! 66it('should6have6two6items',6function()6{6 6666expect(scope.todos.length).toBe(2);6 66});6 66…6 });

  41. todo.spec.js Injeção de dependencia describe('TodoController',6function()6{6 66var6scope;6 ! 66beforeEach(module('todoApp'));6 ! 66beforeEach(inject(function($rootScope,6$controller)6{6

    6666scope6=6$rootScope.$new();6 6666$controller('TodoController',6{6 666666$scope:6scope6 6666});6 66}));6 ! 66it('should6have6two6items',6function()6{6 6666expect(scope.todos.length).toBe(2);6 66});6 66…6 });

  42. todo.spec.js it('should6add6items6to6the6`todos`6list',6function()6{6 66var6lastItem;6 666 66scope.todoText6=6'FAKE6ITEM';6 66scope.addTodo();6 66lastItem6=6scope.todos[scope.todos.length6F61];6 ! 66expect(scope.todos.length).toBe(3);6 66expect(lastItem.text).toBe('FAKE6ITEM');6

    66expect(lastItem.done).toBeFalsy();6 });

  43. Directives

  44. None

  45. tabs.html <div6id="tabs">6 66<ul>6 6666<li><a6href="#fragment1">One</a></li>6 6666<li><a6href="#fragment2">Two</a></li>6 6666<li><a6href="#fragment3">Three</a></li>6 66</ul>6 66<div6id="fragment1">6 6666<p>Tab61</p>6 66</div>6

    66<div6id="fragment2">6 6666<p>Tab62</p>6 66</div>6 66<div6id="fragment3">6 6666<p>Tab63</p>6 66</div>6 </div>6 ! <script>6 $("#tabs").tabs();6 </script>

  46. DIRETIVAS PERMITEM ESTENDER O HTML PARA CRIAR COMPONENTES CUSTOMIZADOS

  47. tabs.html <myFtabs>6 66<myFpane6title="One">Tab61</myFpane>6 66<myFpane6title="Two">Tab62</myFpane>6 66<myFpane6title="Three">Tab63</myFpane>6 </myFtabs>

  48. None

  49. DÚVIDAS?

  50. ERROS COMUNS

  51. ESTRUTURA DE DIRETÓRIOS SEPARADA POR TIPO DE ARQUIVO

  52. app/$ 66js/$ 6666app.js6 ! 6666controllers/$ 666666MainController.js6 666666LoginController.js6 ! 6666services/$ 666666MainService.js6

    666666LoginService.js6 ! 6666directives/6 666666LoginDirective.js6 ! 6666filters/6 666666CapitalizeFilter.js6 ! $$templates/$ 6666login.html

  53. app/$ 66js/$ 6666app.js6 ! 6666controllers/$ 666666MainController.js6 666666LoginController.js6 ! 6666services/$ 666666MainService.js6

    666666LoginService.js6 ! 6666directives/6 666666LoginDirective.js6 ! 6666filters/6 666666CapitalizeFilter.js6 ! $$templates/$ 6666login.html x

  54. app/$ 66app.js6 ! 66main/$ 6 main.html6 6666mainController.js6 6 mainController.spec.js6 6

    mainService.js6 6 mainService.spec.js6 6 6 66login/$ 6666login.html6 6666loginController.js6 6 loginController.spec.js6 6666loginDirective.js6 6666loginDirective.spec.js6 6 loginService.js6 6 loginService.spec.js6 ! 66shared/6 6666capitalizeFilter.js

  55. app/$ 66app.js6 ! 66main/$ 6 main.html6 6666mainController.js6 6 mainController.spec.js6 6

    mainService.js6 6 mainService.spec.js6 6 6 66login/$ 6666login.html6 6666loginController.js6 6 loginController.spec.js6 6666loginDirective.js6 6666loginDirective.spec.js6 6 loginService.js6 6 loginService.spec.js6 ! 66shared/6 6666capitalizeFilter.js ✓

  56. FAZER TUDO NO CONTROLLER

  57. CONTROLLERS Definem métodos e propriedades no $scope Não são reutilizáveis

    (use services) Devem ser extremamente curtos Não devem tocar no DOM (use directives)

  58. USANDO SERVICES PARA COMPARTILHAR DADOS ENTRE CONTROLLERS

  59. todoService.js angular.module('todoApp')6 6 .factory('TodoService',6function()6{6 6 6 var6items6=6[6 6 6 6

    {6text:6'Speak6at6DevFest6NE',6done:6false6},6 6 6 6 {6text:6'Learn6AngularJS',6done:6true6}6 6 6 ];6 ! 6 6 return6{6 6 6 6 getItems:6function()6{6 6 6 6 6 return6items;6 6 6 6 },6 6 6 6 addItem:6function(item)6{6 6 6 6 6 items.push(item);6 6 6 6 }6 6 6 };6 6 });

  60. todoService.js Referenciando um módulo angular.module('todoApp')6 6 .factory('TodoService',6function()6{6 6 6 var6items6=6[6

    6 6 6 {6text:6'Speak6at6DevFest6NE',6done:6false6},6 6 6 6 {6text:6'Learn6AngularJS',6done:6true6}6 6 6 ];6 ! 6 6 return6{6 6 6 6 getItems:6function()6{6 6 6 6 6 return6items;6 6 6 6 },6 6 6 6 addItem:6function(item)6{6 6 6 6 6 items.push(item);6 6 6 6 }6 6 6 };6 6 });

  61. todoController.js angular.module('todoApp')6 6 .controller('TodoController',6function($scope,6TodoService)6{6 6 6 $scope.todos6=6TodoService.getItems();6 6 6 $scope.addTodo6=6TodoService.addItem;6

    6 });

  62. todoController.js DI angular.module('todoApp')6 6 .controller('TodoController',6function($scope,6TodoService)6{6 6 6 $scope.todos6=6TodoService.getItems();6 6 6

    $scope.addTodo6=6TodoService.addItem;6 6 });

  63. DÚVIDAS?

  64. COMO E ONDE APRENDER MAIS?

  65. None

  66. VÍDEOS

  67. None
  68. None
  69. None

  70. BLOGS

  71. None
  72. None
  73. None
  74. None
  75. None

  76. PODCASTS

  77. None

  78. LIVROS

  79. None
  80. None

  81. TOOLS

  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None

  89. OBRIGADO! :) @cironunesdev +cironunesdev cironunes.com