Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Então você quer aprender AngularJS?
Search
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
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
51
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
70
Beyond ng new
cironunes
2
210
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
70
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
900
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Other Decks in Programming
See All in Programming
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
1
150
What's new in Spring Modulith?
olivergierke
1
170
CSC509 Lecture 08
javiergs
PRO
0
260
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
マンガアプリViewerの大画面対応を考える
kk__777
0
340
CSC305 Lecture 10
javiergs
PRO
0
270
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Devoxx BE - Local Development in the AI Era
kdubois
0
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
670
Introduce Hono CLI
yusukebe
6
3.1k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Writing Fast Ruby
sferik
630
62k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Visualization
eitanlees
149
16k
The Language of Interfaces
destraynor
162
25k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Scaling GitHub
holman
463
140k
Transcript
ENTÃO VOCE QUER APRENDER ANGULARJS? cnun.es/learn-angularjs
@cironunesdev +cironunesdev cironunes.com CIRO NUNES Front-end Engineer
None
2014 Developer Expert Angular JS
z
www.metup.com/angularjs-sao-paulo ~500 MEMBROS
POR QUE ?
None
None
None
None
None
AGENDA 1. Fundamentos do AngularJS 2. Erros comuns 3. Como
e onde aprender mais
ENTÃO VOCE QUER APRENDER ANGULARJS?
FUNDAMENTOS
UM FRAMEWORK PARA CRIAR SINGLE PAGE APPLICATIONS
None
None
AngularJS is what HTML would be if it was created
to build applications
D D D
Data-binding Dependency Injection Directives D D D
Data-binding
None
#profile_name #greeting $('#profile_name').on('change',6function()6{ 66$('#greeting').text(this.value);6 });
None
None
None
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>
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>
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>
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>
Dependency Injection
None
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>
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>
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>
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});
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});
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});
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 });
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 });
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 });
Directives
None
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>
DIRETIVAS PERMITEM ESTENDER O HTML PARA CRIAR COMPONENTES CUSTOMIZADOS
tabs.html <myFtabs>6 66<myFpane6title="One">Tab61</myFpane>6 66<myFpane6title="Two">Tab62</myFpane>6 66<myFpane6title="Three">Tab63</myFpane>6 </myFtabs>
None
DÚVIDAS?
ERROS COMUNS
ESTRUTURA DE DIRETÓRIOS SEPARADA POR TIPO DE ARQUIVO
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
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
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
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 ✓
FAZER TUDO NO CONTROLLER
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)
USANDO SERVICES PARA COMPARTILHAR DADOS ENTRE CONTROLLERS
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 });
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 });
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 });
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 });
DÚVIDAS?
COMO E ONDE APRENDER MAIS?
None
VÍDEOS
None
None
None
BLOGS
None
None
None
None
None
PODCASTS
None
LIVROS
None
None
TOOLS
None
None
None
None
None
None
None
OBRIGADO! :) @cironunesdev +cironunesdev cironunes.com