1
URL APRESENTAÇÃO
https://goo.gl/TS3igz
Olá!
Eu sou Márcio Lucas
Técnico em Informática e formando em
Tecnologia em Sistemas para Internet.
Você pode me encontrar nas redes sociais:
@marciioluucas
2
Introdução ao
AngularJS
1.
Pra que?
É de comer? De passar no
cabelo?
5
AngularJS é um framework SPA (Single Page Applications), isto
significa que você pode criar aplicações web (webapps) com
ele. Fazer páginas que funcionam sem precisar de reload e que
se comporte verdadeiramente como uma aplicação.
6
Alguns
pequenos
motivos para
aprender
AngularJS
Produtividade
O AngularJS foi
pensando para que o
desenvolvedor possa
escrever o mínimo de
código possível,
assim desenvolver
uma aplicação com
ele requer bem
menos código do que
usando jQuery, por
exemplo.
Facilidade no
entendimento
O AngularJS é
extremamente
declarativo, sendo
muito fácil entender
o funcionamento das
aplicações lendo
apenas o HTML.
Curva de
aprendizado
Consegue-se
capacitar os
profissionais em no
máximo 3 dias dada a
facilidade e
intuitividade do
desenvolvimento
com AngularJS.
2.
Frameworks
Antes de mais nada, o que
são?
“
Um framework em desenvolvimento de
software, é uma abstração que une
códigos comuns entre vários projetos de
software provendo uma funcionalidade
genérica.
8
Algumas
frameworks
conhecidas
○ Bootstrap
○ Laravel
○ Materialize
Citei essas, mas existem “muuuuitas” outras.
9
10
URL APRESENTAÇÃO BOOTSTRAP &
MATERIALIZE
https://goo.gl/qWTF8k
3.
História
A humanidade é feita dela,
porque não contar a do
AngularJS?
12
AngularJS foi originalmente desenvolvido em
2009 por Miško Hevery e Adam Abrons como um
software por trás de um serviço de
armazenamento JSON online.
13
Mas eles viram que não iam lucrar muito com
isso, aí decidiram fazer uma coisa meio arriscada.
A grande ideia!
14
15
Disponibilizar o Angular gratuitamente (open-
source) como uma framework.
3.
Sintaxe
Como eu escrevo um código
para o AngularJS?
Três passos
para criar a
aplicação.
○ Importar os arquivos necessários na sua index.html
○ Abrir uma tag Script no final da página, mas antes de
terminar a tag <body>
○ CODIFICAR!
17
18
19
Explicando o código
“ 20
A propriedade ng-app
“
Ela serve para apontar ao Angular onde
vai ser nosso escopo, ou seja. Onde ele vai
ter que processar os códigos e renderizar
o que for preciso no template.
21
“
Dentro do Escopo (ng-app)
22
Resultado: 1 + 2 = 3
“
Fora do Escopo (ng-app)
23
Resultado: 1 + 2 = {{1+2}}
“
Tudo que é declarado fora do escopo, não
é processado pelo AngularJS
24
“
Mustache template system.
25
“
Quando querer renderizar algo dinâmico
no template (dentro do html) utilizamos
duas chaves {{aqui é dinâmico}}
26
Mãos a obra!
27
Proposta:
○ Criar um app de lista telefônica.
◦ Adicione um contato
◦ Apague contatos
28
O que é necessário saber...
29
ng-repeat
30
Ele é basicamente um foreach que passa
por todos as posições de um array
retornando seus respectivos valores.
31
ng-model
32
Serve para “linkar” o template ao
controller, ou seja. O valor que está no
controller vai estar também no template.
33
Chamamos isso de data-binding
Obrigado!
Dúvidas?
Você pode me encontrar no Github e no Facebook:
/marciioluucas.
34

Introdução ao AngularJS - Minicurso