AngularJS - Just Digital

25
Introdução ao AngularJS por: Ricardo Gonçalves Developer

description

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

Transcript of AngularJS - Just Digital

Introdução ao AngularJS

por: Ricardo GonçalvesDeveloper

O que é oAngularJS?

➔ 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 oAngularJS?

“Angular é o que o HTML teria sido se

tivesse sido projetado para aplicações.”

$scope: onde a mágica aconteceFluxo de uma aplicação com angularjs

FilosofiaAngularJS?

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çãoAngularJS

HTML

<html><form>

<title>

<tr><ul>

<option>

<span>

<input> <a><em>

<br><legend>

<textarea>

<select>

<div>

<td>

<video> <header><canvas><audio>

<section> <meter>

<menu><hgroup>

<progress>

<html><form>

<title>

<tr><ul>

<option>

<span>

<input> <a><em>

<br><legend>

<textarea>

<select>

<div>

<td>

<video> <header><canvas><audio>

<section> <meter>

<menu><hgroup>

<progress>

<html><form>

<title>

<tr><ul>

<option>

<span>

<input> <a><em>

<br><legend>

<textarea>

<select>

<div>

<td>

<ng-view> <ng-switch>

<minha-tag> ng-model=""

Directives

● ng-app● ng-controller

Application

● ng-csp● ng-disabled● nd-hide | show● ng-mouse● ng-repeat● ng-switch● ng-transclude● ng-view

Template

● ng-change● ng-checked● ng-click● ng-href● ng-selected

Operation

● ng-bind● ng-model● ng-init● ng-src● ng-style

Binding

Forms

● ng-pattern● ng-minlenght● ng-maxlenght● ng-required● ng-list● ng-true-value● ng-false-value● ng-option● ng-submit

MVCAngularJS

MVC

MVC

MVC

Linhas de códigoAngularJS vs Backbone

OBRIGADO!!!

Ricardo GonçalvesDeveloper

[email protected]+55(11)5181-5170

www.justdigital.com.brhttp://blog.justdigital.com.br