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

Então você quer aprender AngularJS?

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

Ciro Nunes

October 18, 2014
Tweet

More Decks by Ciro Nunes

See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
40
Type safe CSS with Reason
cironunes
0
99
What I've learned building automated docs for Ansarada's design system
cironunes
0
59
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
62
Sweet Angular, good forms never felt so good
cironunes
0
280
Progressive Angular apps
cironunes
3
870
Angular: Um framework. Mobile & desktop.
cironunes
1
570

Other Decks in Programming

See All in Programming
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
210
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
テストコード書いてみませんか？
onopon
2
130
快速入門可觀測性
blueswen
0
370
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
500
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
820
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
780
nekko cloudにおけるProxmox VE利用事例
irumaru
3
430
Recoilを剥がしている話
kirik
5
6.8k

Featured

See All Featured
Building an army of robots
kneath
302
44k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Being A Developer After 40
akosma
87
590k
A Philosophy of Restraint
colly
203
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Side Projects
sachag
452
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Optimising Largest Contentful Paint
csswizardry
33
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k

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