Introdução ao AngularJS

por: Ricardo Gonçalves
Developer
O que é o

AngularJS?
➔ Framework JavaScript com grande foco em HTML;
➔ Conceito MVC;
➔ Desenvolvido pela Google (2009);
➔ Permite uma padroniza...
Por que usar o

AngularJS?
“Angular é o que o
HTML teria sido se
tivesse sido projetado
para aplicações.”
$scope: onde a mágica acontece
Fluxo de uma aplicação com angularjs
Filosofia

AngularJS?
Programação declarativa (HTML, CSS) é
melhor que imperativa (JavaScript) para
construir interfaces.
Programação imperativa (JavaScript) é
excelente para descrever a lógica do
negócio.
HTML é muito bom para descrever
documentos estáticos, mas não foi
projetado para comportamento
dinâmico.
AngularJs estende o vocabulário do HTML
de forma expressiva e legível.
Evolução

AngularJS
HTML
<html>
<form>
<ul>

<title>

<span>

<option
>
<input>
<a>

<div>

<tr>
<td>
<em>

<br>

<select>

<legend
>
<textare...
<html>

<video>

<header
<title>
<ul>
<canvas> >
<tr>
<span>
<option
<audio>
<td>
>
<input>
<a>
<section
<em>
<meter>
<div...
<ng-view>
<html>

<ng-switch>

<video>

<header
<title>
<ul>
<canvas> >
<tr>
<span>
<option
<audio>
<td>
>
<input>
<a>
<se...
Directives
Application
●
●

ng-app
ng-controller

Forms
●
●
●
●
●
●
●
●
●

ng-pattern
ng-minlenght
ng-maxlenght
ng-require...
MVC

AngularJS
MVC
MVC
MVC
Linhas de código

AngularJS vs
Backbone
OBRIGADO!!!
Ricardo Gonçalves
Developer

code@justdigital.com.br
+55(11)5181-5170
www.justdigital.com.br
http://blog.justd...
AngularJS - Just Digital
AngularJS - Just Digital
AngularJS - Just Digital
Próximos SlideShares
Carregando em…5
×

AngularJS - Just Digital

3.969 visualizações

Publicada em

Overview realizado para a equipe interna sobre o AngularJS. Solução de javascript client side. Realizada pelo Ricardo Gonçalves, developer na Just Digital.

Publicada em: Tecnologia
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.969
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.182
Ações
Compartilhamentos
0
Downloads
78
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

AngularJS - Just Digital

  1. 1. Introdução ao AngularJS por: Ricardo Gonçalves Developer
  2. 2. O que é o AngularJS?
  3. 3. ➔ Framework JavaScript com grande foco em HTML; ➔ Conceito MVC; ➔ Desenvolvido pela Google (2009); ➔ Permite uma padronização de arquitetura “enterprise” em uma aplicação web dinâmica; ➔ Permite criação de novas tags em HTML para seu navegador interpretar; ➔ Suporta os navegadores: IE8+, Chrome, Firefox, Safari e Opera;
  4. 4. Por que usar o AngularJS?
  5. 5. “Angular é o que o HTML teria sido se tivesse sido projetado para aplicações.”
  6. 6. $scope: onde a mágica acontece Fluxo de uma aplicação com angularjs
  7. 7. Filosofia AngularJS?
  8. 8. Programação declarativa (HTML, CSS) é melhor que imperativa (JavaScript) para construir interfaces.
  9. 9. Programação imperativa (JavaScript) é excelente para descrever a lógica do negócio.
  10. 10. HTML é muito bom para descrever documentos estáticos, mas não foi projetado para comportamento dinâmico.
  11. 11. AngularJs estende o vocabulário do HTML de forma expressiva e legível.
  12. 12. Evolução AngularJS
  13. 13. HTML <html> <form> <ul> <title> <span> <option > <input> <a> <div> <tr> <td> <em> <br> <select> <legend > <textarea>
  14. 14. <html> <video> <header <title> <ul> <canvas> > <tr> <span> <option <audio> <td> > <input> <a> <section <em> <meter> <div> > <br> <menu> <select> <legend > <hgroup> <textarea> <progress> <form>
  15. 15. <ng-view> <html> <ng-switch> <video> <header <title> <ul> <canvas> > <tr> <span> <option <audio> <td> > <input> <a> <section <em> <meter> <div> > <br> <menu> <select> <legend > <hgroup> <textarea> <progress> <form> <minha-tag> ng-model=""
  16. 16. Directives Application ● ● ng-app ng-controller Forms ● ● ● ● ● ● ● ● ● ng-pattern ng-minlenght ng-maxlenght ng-required ng-list ng-true-value ng-false-value ng-option ng-submit Template ● ● ● ● ● ● ● ● ng-csp ng-disabled nd-hide | show ng-mouse ng-repeat ng-switch ng-transclude ng-view Operation ● ● ● ● ● ng-change ng-checked ng-click ng-href ng-selected Binding ● ● ● ● ● ng-bind ng-model ng-init ng-src ng-style
  17. 17. MVC AngularJS
  18. 18. MVC
  19. 19. MVC
  20. 20. MVC
  21. 21. Linhas de código AngularJS vs Backbone
  22. 22. OBRIGADO!!! Ricardo Gonçalves Developer code@justdigital.com.br +55(11)5181-5170 www.justdigital.com.br http://blog.justdigital.com.br

×