workshop mundo senai - hello, angular.js

Fabio Elisio de Melo Nunes Trabalho na area desde 2000 Microsoft Certified HTML5, Javascript, CSS3 Analista de Sistemas – SENAI – NQTS - Front github.com/felisio www.fabioelisio.com

Modelo e arquitetura Definições Modulos e Controllers

Modelo e arquitetura

Web Server Web Browser

URL requisição para o server

Resposta com Paginas e Arquivos

Resposta com Paginas e Arquivos

Eventos, links e novas requisições

HTML Javascript

Browser carrega conteudoe arquivos (html, css, js)

HTML Javascript

Browser carrega conteudoe arquivos (html, css, js)

Web Server Web Browser

URL requisição para o server

Resposta com Paginas e Arquivos

Resposta com dados formato JSON

Eventos, links e novas requisições

HTML Javascript

Browser carrega conteudoe arquivos (html, css, js)

Dados JSON

Dados são lidos na paginaCarregada.

Definições

Um Framework Javascript client-side paraadicionar interatividade ao HTML.

Conceito de Aplicação “Single Page” – Recursossão carregados dinamicamente e incluido naPagina.

Más como chamar esse Javascript Dentro do HTML

• Escrever nossa aplicação Angular em pequenas peças.• Deixar o nosso código mais reutilizável, testável, e

legível. • Onde definimos as dependências para o nosso

aplicativo.

M

M M

Módulos são utilizadospor outros módulos

Diretiva pode ser uma tag ou um atributo HTML que dizao Angular para executar ou fazer uma referênciaa um código Javascript .

• ng-app – Define o modulo da aplicação• ng-controller – Define um controller em determinada

parte da aplicação• ng-model – associa o valor de um componente a uma

propriedade na view model (geralmente adicionadonos elementtos de form)

• ng-click – invoca um metodo no controller ao clicar no componente

• ng-repeat – equivalente ao foreach, repete o conteudopara cada item de uma array na view model

• ….

Estrutura de Pasta (https://github.com/angular/angular-seed)

Modulos e Controllers

Carrega arquivos no index.html

Chamando primeiro modulo

Incluindo diretiva no HTML

Carregando Rota Padrão

Carregando Rota especifica do Modulo

Criando seu modulo

Carregando controlador do Modulo

Testando – agenda.html

Magia do Two-way-binding

$rootScope > $scope$watch, $watchCollection, $on, $emit e $broadcast

Criando um objetono controller

Imprimindo no HTML

Criando um array de objetos no controller

Imprimindo no HTML com a diretiva ng-repeat

Criando formulario para inserção de dados e pegando com a diretiva ng-submit

Criando metodo no controller para inserir o dado

Criando linha na lista com o metodo para removerc

Criando metodo no controller para remover o dado

Criação de diretivas customizadas JQLite embutido no framework Abstração de requisições RESTFull com o $resource Criação de Services e Factory Grande quantidade de modulos criado pelas

comunidades …

Obrigado!www.github.com/felisio@felisiofabio.elisio@gmail.comwww.fabioelisio.com