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
19
1.3k

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
Tweet

More Decks by Ciro Nunes

See All by Ciro Nunes
Rust Front-end with Yew
Avatar for Ciro Nunes cironunes
0
46
Type safe CSS with Reason
Avatar for Ciro Nunes cironunes
0
110
What I've learned building automated docs for Ansarada's design system
Avatar for Ciro Nunes cironunes
0
66
Beyond ng new
Avatar for Ciro Nunes cironunes
2
200
Animate your Angular apps
Avatar for Ciro Nunes cironunes
0
410
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
64
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
290
Progressive Angular apps
Avatar for Ciro Nunes cironunes
3
890
Angular: Um framework. Mobile & desktop.
Avatar for Ciro Nunes cironunes
1
590

Other Decks in Programming

See All in Programming
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
Avatar for アキキー akihisaikeda
3
280
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
Avatar for Tomohiro Inoue tomoino
0
160
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
140
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
210
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
960
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
370
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
5
1.4k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
1
820
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
Avatar for 이가은 gaeun5744
3
300
Datadog RUM 本番導入までの道
Avatar for Shintaro Matsumoto shinter61
1
310
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
130
データベースコネクションプール(DBCP)の変遷と理解
Avatar for k.fujikawa8 fujikawa8
1
270

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
4
200
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
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