2. AGENDA
Que é AngularJS?
Core Concepts
Templates
Application Structure

3. Que é AngularJS?
AngularJS é um framework JavaScript
open-­‐source
que
auxilia
na
execução
de
single-­‐page
applica8ons.
construído sob a ideologia de
que
programação
declara8va
deve
ser
usada
para
construção
de
Interfaces
de
Usuário
e
componentes
de
so?ware,
enquanto
que
a
programação
impera8va
é
excelente
para
escrever
as
regras
de
negócio
foi originalmente desenvolvido em 2009 por
Miško
Hevery
e
Adam
Abrons
como
um
so?ware
por
trás
de
um
serviço
de
armazenamento
JSON
online

4. Cases da google
17000
1500
Before
6
Months
/
3
developers
With
Angular
3
weeks
LOC

5. Cases da google
hXp://builtwith.angularjs.org/

6. Core Concepts
hXp://builtwith.angularjs.org/
• TEMPLATES
Data binding
Expressions
Directives
Filters

7. Core Concepts
• TEMPLATES
Data binding
Expressions
Directives
Filters

8. Core Concepts
• TEMPLATES
Data binding
Expressions
Directives
Filters
hXp://plnkr.co/edit/ngdoc:example-­‐example92@snapshot?p=preview
Angular
expressions
are
JavaScript-­‐like
code
snippets
that
are
usually
placed
in
bindings
such
as
{{
expression
}}.
For
example,
these
are
valid
expressions
in
Angular:
1+2
a+b
user.name
items[index]

9. Core Concepts
• TEMPLATES
Data binding
Expressions
Directives
Filters
hXp://plnkr.co/edit/ngdoc:example-­‐guide-­‐concepts-­‐1@snapshot?p=preview

10. Core Concepts
• TEMPLATES
Data binding
Expressions
Directives
Filters
hXp://angular.github.io/angular-­‐phonecat/step-­‐3/app/

11. Core Concepts
• Application structure
DI
Scope
$resource

12. Core Concepts
• Application structure

13. Core Concepts
• Application structure
DI
Scope
$resource
Scopes can watch expressions and
propagate events.
hXp://docs.angularjs.org/guide/scope

14. Core Concepts
• scope

15. Core Concepts
• $Resource
A factory which creates a resource object
that lets you interact with RESTful
server-side data sources.

16. Core Concepts
• $Resource

17. Core Concepts
• $Resource

18. MORE
Other AngularJS Features
• Anima8on:
Core
concepts,
ngAnimate
API,
and
Anima8on
in
AngularJS
1.2
• Security:
Strict
Contextual
Escaping,
Content
Security
Policy,
$sani8ze,
video
• Interna8onaliza8on
and
Localiza8on:
Angular
Guide
to
i18n
and
l10n,
date
filter,
currency
filter,
Crea8ng
mul8lingual
support
• Mobile:
Touch
events
Testing
Unit
tes8ng:
Using
Karma
(video),
Unit
tes8ng,
Tes8ng
services,
Karma
in
Webstorm
Scenario
tes8ng:
Protractor
hXp://karma-­‐runner.github.io/0.12/index.html