Introdução ao AngularJS

Diego Bernardes Gaulke

“MVW”

MODEL VIEW WHATEVER

• Sobre

• Configurar uma Aplicação

• Escopo, Controladores e Data-Bind

• Serviços

Conteúdo

• API Simples

• Chamadas AJAX, listeners de eventos no código e manipulação de DOMEscopo, Controladores e Data-Bind

• Não recomenda ou resolve o problema de estrutura

• Não suporta "two way" Data-Bind

Comparação com outros frameworksJQuery

• Oferece algum suporte de Data-Bind

• Atualiza todo DOM a cada mudança

• Não suporta "two way" Data-Bind

• Não recomenda ou resolve o problema de estrutura

Comparação com outros frameworksBackBoneJS

• Rápido (cuidar com data-binding excessivos)

• Gera qualidade em termos de código

• Robusto

• É grátis

• Ênfase em separação de responsabilidades

AngularJS

• Coloca as coisas em seus devidos lugares

• HTML para Interface

• CSS para design e animação

• JavaScript para a lógica

AngularJS

• Modelo, visão e controle são "plain JS"

• Directivas (directives) e filtros ajudam a dinamzizar o HTML

• Comunicação entre as camadas é feita através do escopo

• Variáveis de serviço do AngularJS ($) podem ser passadas através dos objetos de forma prática

Outras características

• Variável do Angular para comunicação entre as camadas

• É plain JavaScript Object

• Um $scope para cada Controller

• É herança do $rootScope (escopo raiz)

• Um $rootScope para cada App (ng-app)

Escopo ($scope)

Scope e Controllers

• Chamada do backend via $http

• Chamadas nativas (get, put, post, delete, etc)

• Uso do “promise” para tratar o response

Backend