Tweet
Tweet

Slide 1

Slide 1 text

Introdução ao AngularJS com ASP.NET MVC Daniel Gomes http://netponto.org 32ª Reunião Lisboa - 25/08/2012

Slide 2

Slide 2 text

Daniel Gomes • Engenheiro de Software na Quidgest • Embaixador para Portugal no Geekli.st • ZCE, CSM @danielcsgomes www.danielcsgomes.com

Slide 3

Slide 3 text

Agenda • AngularJS – Demonstrações • AngularJS em Páginas Dinâmicas – Demonstração • AngularJS em Single Page Application (SPA) – Demonstração • Conclusões

Slide 4

Slide 4 text

Objetivos • Noções básicas de AnguarJS • Aptos a criar aplicações com AngularJS

Slide 5

Slide 5 text

AngularJS • Suporte nos diversos browsers • Implementa o Padrão de Desenho MVC • Extende o vocabulário HTML • Data-Binding bidirecional

Slide 6

Slide 6 text

AngularJS

Slide 7

Slide 7 text

AngularJS O que vamos ver: – Diretivas – Escopo – MVC – Data-Binding – Validações – Expressões – Filtros

Slide 8

Slide 8 text

Diretivas • Componentes Reutilizáveis • Extende o vocabulário HTML • AngularJS é um conjunto de Diretivas

Slide 9

Slide 9 text

Escopo • Estruturado Hierarquicamente • Escuta Expressões ($watch) • Propaga eventos ($emit, $broadcast)

Slide 10

Slide 10 text

AngularJS Escopo

Slide 11

Slide 11 text

MVC • Controller – Javascript • Model – Escopo, inputs do formulário • Routing – Definido no “module” através do $routerProvider – html5Mode • View – HTML e CSS

Slide 12

Slide 12 text

Data-Binding • Bidirecional • Sincronização automática Model View

Slide 13

Slide 13 text

AngularJS Data-Binding

Slide 14

Slide 14 text

Validações • Tipos de validações imbutidas: – Text, checkbox, email, number, radio, url, textare • Diretivas imbutidas: – Required, pattern, minlenght, maxlenght, min, max • Validações costumizáveis • “novalidate”

Slide 15

Slide 15 text

AngularJS Validações

Slide 16

Slide 16 text

Expressões {{expressão}} • 2+1 • Utilizador.nome • 5*10 | currency

Slide 17

Slide 17 text

AngularJS Expressões

Slide 18

Slide 18 text

Filtros • Filtros imbutidos: – Currency, date, filter, json, limitTo, lowercase, number, orderBy, uppercase • Filtros customizáveis

Slide 19

Slide 19 text

AngularJS Filtros Costumizáveis

Slide 20

Slide 20 text

AngularJS em Páginas Dinâmicas • Contexto – Pesquisa em tempo real numa parte específica da aplicação – Pedido XMLHttpRequest (XHR)

Slide 21

Slide 21 text

AngularJS em Páginas Dinâmicas

Slide 22

Slide 22 text

AngularJS em Simple Page Application (SPA) • Contexto – Gestão de Processos – Operações CRUD – Pesquisa em tempo real – Pedidos XMLHttpRequest (XHR)

Slide 23

Slide 23 text

AngularJS em Single Page Application

Slide 24

Slide 24 text

O que não vimos • DI – Dependency Injection • Serviços • Teste Unitários • Internacionalização (I18n e L10n)

Slide 25

Slide 25 text

Conclusões • Fácil integração com ASP.NET MVC tanto em páginas dinâmicas como em SPA • Curva de aprendizagem rápida • Bem documentado e excelente API • Testável

Slide 26

Slide 26 text

Questões?

Slide 27

Slide 27 text

Referências AngularJS – http://www.angularjs.org/ AngularJS – Developr Guide – http://docs.angularjs.org/guide/ AngularJS - API – http://docs.angularjs.org/api/ Repositório com o código da apresentação – https://github.com/danielcsgomes/AngularJS-NetPonto

Slide 28

Slide 28 text

Patrocinador “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal

Slide 29

Slide 29 text

Patrocinadores “Silver”

Slide 30

Slide 30 text

Questões?

Slide 31

Slide 31 text

Próximas reuniões presenciais • 25/08/2012 – Agosto (Lisboa) • 22/09/2012 – Setembro (Lisboa) • 20/10/2012 – Outubro (Lisboa) 24/11/2012 – Novembro (Lisboa) Reserva estes dias na agenda! :)

Slide 32

Slide 32 text

Obrigado! Daniel Gomes [email protected] http://danielcsgomes.com @danielcsgomes Geekli.st/danielcsgomes Linkedin.com/in/danielcsgomes