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çã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;
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
>
<textarea>
<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>
<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=""
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
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.justdigital.com.br

AngularJS - Just Digital