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
36
Type safe CSS with Reason
cironunes
0
87
What I've learned building automated docs for Ansarada's design system
cironunes
0
54
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
380
Sweet Angular, good forms never felt so good
cironunes
0
51
Sweet Angular, good forms never felt so good
cironunes
0
270
Progressive Angular apps
cironunes
3
860
Angular: Um framework. Mobile & desktop.
cironunes
1
560
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
330
What We Can Learn From OSS
inouehi
0
400
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
ゆるい個人開発のススメ
kuroppe1819
10
930
エンターテイメント業界で利用されるAWS
demuyan
0
200
Semantic search with Django and pgvector
pauloxnet
0
230
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Featured
See All Featured
A better future with KSS
kneath
230
16k
How GitHub (no longer) Works
holman
304
140k
For a Future-Friendly Web
brad_frost
171
8.9k
Side Projects
sachag
451
41k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Infographics Made Easy
chrislema
237
18k
Bash Introduction
62gerente
604
210k
Designing the Hi-DPI Web
ddemaree
276
33k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
KATA
mclloyd
14
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
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