SlideShare una empresa de Scribd logo
1 de 70
Descargar para leer sin conexión
ANGULAR JS
Introdução
AGENDA
➤ O que é ?
➤ Arquitetura
➤ Módulos
➤ Controladores
➤ Fábricas
➤ Injeção de Dependências
➤ Serviços REST
➤ Acesso a serviços externos
➤ Utilizando $http
➤ Módulo ngResource
ANGULAR JS - O QUE É ?
➤ https://angularjs.org/
➤ Mantida (boa parte) pelo Google
➤ Desde 2009
➤ Facilita o desenvolvimento de aplicações de única página (SPA)
➤ Utilizado por:
➤ Wolfram Alpha;
➤ Portal NBC;
➤ Intel;
➤ pelo menos mais 8.400 sites.
FILOSOFIA
➤ Programação declarativa
➤ Interface do usuário
➤ Conexão entre componentes
➤ Programação imperativa
➤ Lógica de negócios
HÃ ?!
PROGRAMAÇÃO DECLARATIVA
➤ “O que ao invés de como”
➤ Ex:
➤ Aqui começa a aplicação;
➤ Os produtos devem ser exibidos nesse local;
➤ Se esse botão for clicado chame essa função.
EXEMPLO
EXEMPLO
Carregamento do Angular.js
EXEMPLO
Carregamento do script da aplicação
EXEMPLO
Parte “declarativa”
EXEMPLO
Parte “declarativa”
Atenção aos
atributos
ng-xxx
!
EXEMPLO
Essa é a aplicação “LojaOnline”
EXEMPLO
Os dados desse bloco vêm do controlador
ProdutosCtrl
EXEMPLO
Repita essa tag (li) para cada
produto da lista de produtos (controlador)
EXEMPLO
Exiba o nome do produto e o seu valor
E A PROGRAMAÇÃO IMPERATIVA ?
➤ É a parte que diz COMO as coisas são feitas !
➤ A ideia é separar e organizar:
➤ Apresentação (view);
➤ Processamento e fluxo da informação (controladores);
➤ Lógica de negócio (fábricas e serviços / model);
➤ Arquitetura MVC !
ARQUITETURA MVC
Controller
View
Model
ARQUITETURA MVC
Controller
View
Model
1
Inicialização:
O controller prepara os dados que serão
exibidos assim que a página for exibida.
ARQUITETURA MVC
Controller
View
Model
2
Esses dados podem ser
solicitados ao model.
ARQUITETURA MVC
Controller
View
Model
3 Os dados são então preparados
para ser exibidos ao usuário
ARQUITETURA MVC
Controller
View
Model
4
Os dados prontos são enviados para a
view que os formata e exibe
EXEMPLO DE CONTROLADOR
Angular js
APP.JS
Definição do módulo principal da aplicação
APP.JS
Criando um controlador ‘ProdutosCtrl’
APP.JS
No $scope deve ser definido os dados e
funções (model) que serão acessíveis da
página (view)
APP.JS
Criando um array de produtos
disponíveis para a página
COMO TUDO SE CONECTA
index.html
app.js
index.html
app.js
index.html
app.js
index.html
app.js
index.html
app.js
index.html
app.js
index.html
app.js
RESULTADO
PRINCIPAIS CONCEITOS
PRINCIPAIS CONCEITOS
➤ Diretivas
➤ Expressões
➤ Módulos
➤ Controladores
➤ Two way data binding
➤ Fábricas
➤ Injeção de Dependências
DIRETIVAS
➤ Atributos ng-xxx;
➤ Ex:
➤ ng-app, ng-controller, ng-repeat, ng-click;
➤ Programação declarativa;
➤ Ligam a camada de apresentação (view) com os controladores;
EXPRESSÕES
➤ {{ código JavaScript }}
➤ O código é avaliado e seu resultado é exibido;
➤ Acessa os dados definidos no $scope (model) do controlador ativo;
➤ Ex:
➤ {{ 2 + 2 }}
➤ <h1> Há {{ produtos.length }} produtos cadastrados </h1>
MÓDULOS
➤ Uma aplicação Angular é dividida em módulos;
➤ Cada módulo pode conter controladores e fábricas de componentes;
➤ Um módulo pode depender de outros;
➤ Criação de um módulo:
➤ var modulo = angular.module(“nome do módulo”, [dependências]);
➤ Ex:
➤ var dados = angular.module(“Dados”, [ ]);
➤ var financeiro = angular.module(“Financeiro”, [“Dados”]);
MÓDULOS
➤ Uma aplicação Angular é dividida em módulos;
➤ Cada módulo pode conter controladores e fábricas de componentes;
➤ Um módulo pode depender de outros;
➤ Criação de um módulo:
➤ var modulo = angular.module(“nome do módulo”, [dependências]);
➤ Ex:
➤ var dados = angular.module(“Dados”, [ ]);
➤ var financeiro = angular.module(“Financeiro”, [“Dados”]);
O módulo Financeiro depende do módulo Dados
CONTROLADORES
➤ Realizam o tratamento e o direcionamento da informação;
➤ São criados dentro dos módulos:
➤ modulo.controller(‘nome do controlador’, function(dependências) { código });
➤ Ex:
➤ app.controller('LojaCtrl', function ($scope, Produto) { … });
CONTROLADORES
➤ Realizam o tratamento e o direcionamento da informação;
➤ São criados dentro dos módulos:
➤ modulo.controller(‘nome do controlador’, function(dependências) { código });
➤ Ex:
➤ app.controller('LojaCtrl', function ($scope, Produto) { … });
O controlador LojaCtrl depende do componente Produto
TWO WAY DATA BINDING
➤ “Ligação em duas direções”
➤ É possível conectar elemento visuais com dados do escopo:
➤ A alteração feita em um lado refletirá automaticamente no ouro lado;
➤ Como fazer:
➤ Na view, pode-se conectar um elemento de entrada com um valor do escopo:
➤ <input type=“text” ng-model=“nome”/>
➤ Tudo o que for digitado nesse campo, será armazenado no valor nome do escopo,
e se esse valor for alterado, o conteúdo do campo também será;
➤ Observação: expressões são automaticamente atualizadas quando o valores que ela
exibe são alterados.
TWO WAY DATA BINDING - EXEMPLO
TWO WAY DATA BINDING - EXEMPLO
Campo de texto ligado à variável nome
TWO WAY DATA BINDING - EXEMPLO
Essa tag e seu conteúdo só serão exibidos se
houver um valor ‘nome’ definido no escopo
RESULTADO
À medida que você digita o valor do campo, o texto
abaixo é atualizado automaticamente !
FÁBRICAS
➤ Definem e criam componentes reutilizáveis;
➤ Lugar perfeito para implementar a lógica de negócio da aplicação;
➤ Criação de uma fábrica:
➤ modulo.factory(‘nome da fábrica’, function(dependências) { código });
➤ Exemplo:
app.factory('Calculadora', function( ) {
return {
soma: function(a, b) { return a + b; }
};
});
INJEÇÃO DE DEPENDÊNCIAS
➤ As dependências são automaticamente instanciadas e disponibilizadas para uso, a
partir de seu nome;
➤ Ex:
var financeiro = angular.module(“Financeiro”, [“Calculadora”]);
➤ Nesse caso, dentro do módulo financeiro, o componente Calculadora estará
disponível, será possível utilizá-lo em um controlador desse módulo, por exemplo:
financeiro.controller('FinancasCtrl', function ($scope, Calculadora) {
$scope.resultado = Calculadora.soma(2, 3);
});
SERVIÇOS REST
➤ O que são ?
➤ História
➤ Verbos
➤ Exemplos
REST OU RESTFUL WEB SERVICES
➤ Representational State Transfer;
➤ Forma de disponibilizar serviços na web utilizando as ações do protocolo HTTP
(verbos):
➤ GET / PUT / POST / DELETE;
➤ Padrão mais utilizado para a troca de informações entre aplicações;
➤ Os dados normalmente são trocados no formado JSON ou XML;
➤ Exemplo - Requisição GET para buscar o endereço de um CEP no formato JSON:
➤ http://cep.correiocontrol.com.br/58402000.json
➤ Retorno:
{"bairro": "Jardim Tavares", "logradouro": "Avenida Marechal Floriano
Peixoto", "cep": "58402000", "uf": "PB", "localidade": "Campina Grande"}
ANGULAR.JS - UTILIZANDO UM SERVIÇO REST
➤ Para o consumo e envio rápidos de dados, pode-se utilizar o módulo $http;
➤ Requisição GET:
➤ $http.get(url).then(funcao_sucesso, funcao_erro);
➤ Requisição POST:
➤ $http.post(url).then(funcao_sucesso, funcao_erro);
EXEMPLO $HTTP - INDEX.HTML
EXEMPLO $HTTP - INDEX.HTML
Campo de texto ligado à variável cep
EXEMPLO $HTTP - INDEX.HTML
Botão que quando clicado chama a função buscar
EXEMPLO $HTTP - INDEX.HTML
Essa tag e seu conteúdo só serão exibidos se
houver um valor ‘endereco’ definido no escopo
EXEMPLO $HTTP - APP.JS
EXEMPLO $HTTP - APP.JS
Utilizaremos o componente $http
EXEMPLO $HTTP - APP.JS
URL base do serviço REST
EXEMPLO $HTTP - APP.JS
Variável cep ligada com o campo de
texto na página
EXEMPLO $HTTP - APP.JS
Função buscar chamada quando o
botão da página é clicado
EXEMPLO $HTTP - APP.JS
Requisição GET feita ao serviço,
passando o cep digitado pelo usuário
EXEMPLO $HTTP - APP.JS
Os dados retornados pela requisição são
atribuídos à variável ‘endereco’ do escopo.
API PARA ACESSO A RECURSOS
➤ Entidades (produtos, alunos, vendas, etc) são representadas como recursos e, pelo
padrão REST, são acessadas e modificadas por uma api no formato:
Verbo HTTP URL Descrição
GET / Retorna todos
GET /id Retorna um recurso
POST / Adiciona um recurso
PUT /id Modifica um recurso
DELETE /id Remove um recurso
ANGULAR.JS - UTILIZANDO UMA API REST
➤ A biblioteca padrão do Angular.js disponibiliza um módulo para acesso de API’s
RESTful chamado Angular Resource (ngResource);
➤ Para utilizá-lo, é necessário:
➤ Carregar o script: /angular-resource.js
➤ Declarar a dependência do módulo: [‘ngResource’]
➤ Criar uma fábrica para cada API:
modulo.factory('Recurso', function($resource) {
return $resource('URL/:id');
});
EXEMPLO
➤ Carregar um conjunto de posts de um blog:
RESUMO DAS FUNÇÕES DO NGRESOURCE
➤ Obter registros:
➤ query(parâmetros de busca);
➤ Obter um registro:
➤ get(identificador do registro);
➤ Salvar registro:
➤ $save( );
➤ Atualizar registro:
➤ update(identificador, novos valores);
➤ Remover registro:
➤ delete(identificador)
CONCLUSÕES
➤ Há vários plugins:
➤ http://ngmodules.org/
➤ https://angular-ui.github.io/
➤ É possível desenvolver aplicações para dispositivos portáteis:
➤ Ionic Framework - http://ionicframework.com/
➤ Apresentação disponível no slideshare;
➤ Exemplos disponíveis no github.

Más contenido relacionado

La actualidad más candente

Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDaniel Paz
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsCloves Moreira Junior
 
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTDesenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTRodrigo Fortes
 
Apresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UIApresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UICecília Rosa
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UICleiton Francisco
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0Wilson Mendes
 
Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJSWilson Mendes
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSRodrigo Branas
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com DjangoMarinho Brandão
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasJanderson Fernandes Cardoso
 
Desenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpDesenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpRodrigo Aramburu
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 

La actualidad más candente (20)

Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi Builder
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTDesenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
 
Apresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UIApresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UI
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
Web Offline
Web OfflineWeb Offline
Web Offline
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
Domain-Driven Design
Domain-Driven DesignDomain-Driven Design
Domain-Driven Design
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0
 
Angular js
Angular jsAngular js
Angular js
 
Java Web Fácil com VRaptor
Java Web Fácil com VRaptorJava Web Fácil com VRaptor
Java Web Fácil com VRaptor
 
Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJS
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com Django
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
Desenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephpDesenvolvendo aplicações web com o framework cakephp
Desenvolvendo aplicações web com o framework cakephp
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 

Destacado

Angular js com diretivas
Angular js com diretivasAngular js com diretivas
Angular js com diretivasMatheus Lima
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJSRodrigo Branas
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasRodrigo Branas
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno Catão
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa
 
Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesHelder da Rocha
 
Arquitetura Orientada a Servicos (SOA)
Arquitetura Orientada a Servicos (SOA)Arquitetura Orientada a Servicos (SOA)
Arquitetura Orientada a Servicos (SOA)Marcelo Sávio
 
Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e djangoIgor Sobreira
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design • Suzi Sarmento
 

Destacado (20)

Angular js com diretivas
Angular js com diretivasAngular js com diretivas
Angular js com diretivas
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Python 08
Python 08Python 08
Python 08
 
Python 05
Python 05Python 05
Python 05
 
Python 07
Python 07Python 07
Python 07
 
Python 02
Python 02Python 02
Python 02
 
Python 03
Python 03Python 03
Python 03
 
Dark Java (2009)
Dark Java (2009)Dark Java (2009)
Dark Java (2009)
 
J530 9 jms
J530 9 jmsJ530 9 jms
J530 9 jms
 
Python 04
Python 04Python 04
Python 04
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Python 06
Python 06Python 06
Python 06
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web Services
 
Soa Fundamentos
Soa FundamentosSoa Fundamentos
Soa Fundamentos
 
Arquitetura Orientada a Servicos (SOA)
Arquitetura Orientada a Servicos (SOA)Arquitetura Orientada a Servicos (SOA)
Arquitetura Orientada a Servicos (SOA)
 
Python 01
Python 01Python 01
Python 01
 
Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e django
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 

Similar a Angular js

Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Frameworkelliando dias
 
Produtividade com JavaServer Faces
Produtividade com JavaServer FacesProdutividade com JavaServer Faces
Produtividade com JavaServer FacesEduardo Bregaida
 
React - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesReact - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesJefferson Mariano de Souza
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Carlos Duarte do Nascimento
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineCampus Party Brasil
 
Python e Django
Python e DjangoPython e Django
Python e Djangopugpe
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-ptPedro Sousa
 
Play Framework - FLISOL
Play Framework - FLISOLPlay Framework - FLISOL
Play Framework - FLISOLgrupoweblovers
 
Curso de Ruby on Rails - Aula 01
Curso de Ruby on Rails - Aula 01Curso de Ruby on Rails - Aula 01
Curso de Ruby on Rails - Aula 01Maurício Linhares
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016Diego Melo
 
Consumindo dados via web service no android
Consumindo dados via web service no androidConsumindo dados via web service no android
Consumindo dados via web service no androidAlexandre Antunes
 

Similar a Angular js (20)

Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Php 05 Mvc
Php 05 MvcPhp 05 Mvc
Php 05 Mvc
 
PHP FrameWARks - FISL
PHP FrameWARks - FISLPHP FrameWARks - FISL
PHP FrameWARks - FISL
 
Php 07 Cakephp
Php 07 CakephpPhp 07 Cakephp
Php 07 Cakephp
 
Produtividade com JavaServer Faces
Produtividade com JavaServer FacesProdutividade com JavaServer Faces
Produtividade com JavaServer Faces
 
Zend Framework
Zend FrameworkZend Framework
Zend Framework
 
React - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesReact - Compartilhando estado entre componentes
React - Compartilhando estado entre componentes
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
 
Python e Django
Python e DjangoPython e Django
Python e Django
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
Play Framework - FLISOL
Play Framework - FLISOLPlay Framework - FLISOL
Play Framework - FLISOL
 
Curso de Ruby on Rails - Aula 01
Curso de Ruby on Rails - Aula 01Curso de Ruby on Rails - Aula 01
Curso de Ruby on Rails - Aula 01
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016
 
Consumindo dados via web service no android
Consumindo dados via web service no androidConsumindo dados via web service no android
Consumindo dados via web service no android
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 

Más de Bruno Catão

Introdução às Redes Neurais - Parte 2/2
Introdução às Redes Neurais - Parte 2/2Introdução às Redes Neurais - Parte 2/2
Introdução às Redes Neurais - Parte 2/2Bruno Catão
 
Introdução às Redes Neurais - Parte 1/2
Introdução às Redes Neurais - Parte 1/2Introdução às Redes Neurais - Parte 1/2
Introdução às Redes Neurais - Parte 1/2Bruno Catão
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2Bruno Catão
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1Bruno Catão
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + FirebaseBruno Catão
 
Retina e Retinose Pigmentar
Retina e Retinose PigmentarRetina e Retinose Pigmentar
Retina e Retinose PigmentarBruno Catão
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Unity3d Space Shooter (Parte 1)
Unity3d Space Shooter (Parte 1)Unity3d Space Shooter (Parte 1)
Unity3d Space Shooter (Parte 1)Bruno Catão
 
Introdução ao Framework Grails
Introdução ao Framework GrailsIntrodução ao Framework Grails
Introdução ao Framework GrailsBruno Catão
 
O framework spring
O framework springO framework spring
O framework springBruno Catão
 

Más de Bruno Catão (14)

Introdução às Redes Neurais - Parte 2/2
Introdução às Redes Neurais - Parte 2/2Introdução às Redes Neurais - Parte 2/2
Introdução às Redes Neurais - Parte 2/2
 
Introdução às Redes Neurais - Parte 1/2
Introdução às Redes Neurais - Parte 1/2Introdução às Redes Neurais - Parte 1/2
Introdução às Redes Neurais - Parte 1/2
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
 
Node JS - Parte 4
Node JS - Parte 4Node JS - Parte 4
Node JS - Parte 4
 
Node JS - Parte 3
Node JS - Parte 3Node JS - Parte 3
Node JS - Parte 3
 
Node JS - Parte 2
Node JS - Parte 2Node JS - Parte 2
Node JS - Parte 2
 
Node JS - Parte 1
Node JS - Parte 1Node JS - Parte 1
Node JS - Parte 1
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + Firebase
 
Retina e Retinose Pigmentar
Retina e Retinose PigmentarRetina e Retinose Pigmentar
Retina e Retinose Pigmentar
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Unity3d Space Shooter (Parte 1)
Unity3d Space Shooter (Parte 1)Unity3d Space Shooter (Parte 1)
Unity3d Space Shooter (Parte 1)
 
Introdução ao Framework Grails
Introdução ao Framework GrailsIntrodução ao Framework Grails
Introdução ao Framework Grails
 
O framework spring
O framework springO framework spring
O framework spring
 

Angular js

  • 2. AGENDA ➤ O que é ? ➤ Arquitetura ➤ Módulos ➤ Controladores ➤ Fábricas ➤ Injeção de Dependências ➤ Serviços REST ➤ Acesso a serviços externos ➤ Utilizando $http ➤ Módulo ngResource
  • 3. ANGULAR JS - O QUE É ? ➤ https://angularjs.org/ ➤ Mantida (boa parte) pelo Google ➤ Desde 2009 ➤ Facilita o desenvolvimento de aplicações de única página (SPA) ➤ Utilizado por: ➤ Wolfram Alpha; ➤ Portal NBC; ➤ Intel; ➤ pelo menos mais 8.400 sites.
  • 4. FILOSOFIA ➤ Programação declarativa ➤ Interface do usuário ➤ Conexão entre componentes ➤ Programação imperativa ➤ Lógica de negócios
  • 6. PROGRAMAÇÃO DECLARATIVA ➤ “O que ao invés de como” ➤ Ex: ➤ Aqui começa a aplicação; ➤ Os produtos devem ser exibidos nesse local; ➤ Se esse botão for clicado chame essa função.
  • 12. EXEMPLO Essa é a aplicação “LojaOnline”
  • 13. EXEMPLO Os dados desse bloco vêm do controlador ProdutosCtrl
  • 14. EXEMPLO Repita essa tag (li) para cada produto da lista de produtos (controlador)
  • 15. EXEMPLO Exiba o nome do produto e o seu valor
  • 16. E A PROGRAMAÇÃO IMPERATIVA ? ➤ É a parte que diz COMO as coisas são feitas ! ➤ A ideia é separar e organizar: ➤ Apresentação (view); ➤ Processamento e fluxo da informação (controladores); ➤ Lógica de negócio (fábricas e serviços / model); ➤ Arquitetura MVC !
  • 18. ARQUITETURA MVC Controller View Model 1 Inicialização: O controller prepara os dados que serão exibidos assim que a página for exibida.
  • 19. ARQUITETURA MVC Controller View Model 2 Esses dados podem ser solicitados ao model.
  • 20. ARQUITETURA MVC Controller View Model 3 Os dados são então preparados para ser exibidos ao usuário
  • 21. ARQUITETURA MVC Controller View Model 4 Os dados prontos são enviados para a view que os formata e exibe
  • 24. APP.JS Definição do módulo principal da aplicação
  • 25. APP.JS Criando um controlador ‘ProdutosCtrl’
  • 26. APP.JS No $scope deve ser definido os dados e funções (model) que serão acessíveis da página (view)
  • 27. APP.JS Criando um array de produtos disponíveis para a página
  • 28. COMO TUDO SE CONECTA
  • 38. PRINCIPAIS CONCEITOS ➤ Diretivas ➤ Expressões ➤ Módulos ➤ Controladores ➤ Two way data binding ➤ Fábricas ➤ Injeção de Dependências
  • 39. DIRETIVAS ➤ Atributos ng-xxx; ➤ Ex: ➤ ng-app, ng-controller, ng-repeat, ng-click; ➤ Programação declarativa; ➤ Ligam a camada de apresentação (view) com os controladores;
  • 40. EXPRESSÕES ➤ {{ código JavaScript }} ➤ O código é avaliado e seu resultado é exibido; ➤ Acessa os dados definidos no $scope (model) do controlador ativo; ➤ Ex: ➤ {{ 2 + 2 }} ➤ <h1> Há {{ produtos.length }} produtos cadastrados </h1>
  • 41. MÓDULOS ➤ Uma aplicação Angular é dividida em módulos; ➤ Cada módulo pode conter controladores e fábricas de componentes; ➤ Um módulo pode depender de outros; ➤ Criação de um módulo: ➤ var modulo = angular.module(“nome do módulo”, [dependências]); ➤ Ex: ➤ var dados = angular.module(“Dados”, [ ]); ➤ var financeiro = angular.module(“Financeiro”, [“Dados”]);
  • 42. MÓDULOS ➤ Uma aplicação Angular é dividida em módulos; ➤ Cada módulo pode conter controladores e fábricas de componentes; ➤ Um módulo pode depender de outros; ➤ Criação de um módulo: ➤ var modulo = angular.module(“nome do módulo”, [dependências]); ➤ Ex: ➤ var dados = angular.module(“Dados”, [ ]); ➤ var financeiro = angular.module(“Financeiro”, [“Dados”]); O módulo Financeiro depende do módulo Dados
  • 43. CONTROLADORES ➤ Realizam o tratamento e o direcionamento da informação; ➤ São criados dentro dos módulos: ➤ modulo.controller(‘nome do controlador’, function(dependências) { código }); ➤ Ex: ➤ app.controller('LojaCtrl', function ($scope, Produto) { … });
  • 44. CONTROLADORES ➤ Realizam o tratamento e o direcionamento da informação; ➤ São criados dentro dos módulos: ➤ modulo.controller(‘nome do controlador’, function(dependências) { código }); ➤ Ex: ➤ app.controller('LojaCtrl', function ($scope, Produto) { … }); O controlador LojaCtrl depende do componente Produto
  • 45. TWO WAY DATA BINDING ➤ “Ligação em duas direções” ➤ É possível conectar elemento visuais com dados do escopo: ➤ A alteração feita em um lado refletirá automaticamente no ouro lado; ➤ Como fazer: ➤ Na view, pode-se conectar um elemento de entrada com um valor do escopo: ➤ <input type=“text” ng-model=“nome”/> ➤ Tudo o que for digitado nesse campo, será armazenado no valor nome do escopo, e se esse valor for alterado, o conteúdo do campo também será; ➤ Observação: expressões são automaticamente atualizadas quando o valores que ela exibe são alterados.
  • 46. TWO WAY DATA BINDING - EXEMPLO
  • 47. TWO WAY DATA BINDING - EXEMPLO Campo de texto ligado à variável nome
  • 48. TWO WAY DATA BINDING - EXEMPLO Essa tag e seu conteúdo só serão exibidos se houver um valor ‘nome’ definido no escopo
  • 49. RESULTADO À medida que você digita o valor do campo, o texto abaixo é atualizado automaticamente !
  • 50. FÁBRICAS ➤ Definem e criam componentes reutilizáveis; ➤ Lugar perfeito para implementar a lógica de negócio da aplicação; ➤ Criação de uma fábrica: ➤ modulo.factory(‘nome da fábrica’, function(dependências) { código }); ➤ Exemplo: app.factory('Calculadora', function( ) { return { soma: function(a, b) { return a + b; } }; });
  • 51. INJEÇÃO DE DEPENDÊNCIAS ➤ As dependências são automaticamente instanciadas e disponibilizadas para uso, a partir de seu nome; ➤ Ex: var financeiro = angular.module(“Financeiro”, [“Calculadora”]); ➤ Nesse caso, dentro do módulo financeiro, o componente Calculadora estará disponível, será possível utilizá-lo em um controlador desse módulo, por exemplo: financeiro.controller('FinancasCtrl', function ($scope, Calculadora) { $scope.resultado = Calculadora.soma(2, 3); });
  • 52. SERVIÇOS REST ➤ O que são ? ➤ História ➤ Verbos ➤ Exemplos
  • 53. REST OU RESTFUL WEB SERVICES ➤ Representational State Transfer; ➤ Forma de disponibilizar serviços na web utilizando as ações do protocolo HTTP (verbos): ➤ GET / PUT / POST / DELETE; ➤ Padrão mais utilizado para a troca de informações entre aplicações; ➤ Os dados normalmente são trocados no formado JSON ou XML; ➤ Exemplo - Requisição GET para buscar o endereço de um CEP no formato JSON: ➤ http://cep.correiocontrol.com.br/58402000.json ➤ Retorno: {"bairro": "Jardim Tavares", "logradouro": "Avenida Marechal Floriano Peixoto", "cep": "58402000", "uf": "PB", "localidade": "Campina Grande"}
  • 54. ANGULAR.JS - UTILIZANDO UM SERVIÇO REST ➤ Para o consumo e envio rápidos de dados, pode-se utilizar o módulo $http; ➤ Requisição GET: ➤ $http.get(url).then(funcao_sucesso, funcao_erro); ➤ Requisição POST: ➤ $http.post(url).then(funcao_sucesso, funcao_erro);
  • 55. EXEMPLO $HTTP - INDEX.HTML
  • 56. EXEMPLO $HTTP - INDEX.HTML Campo de texto ligado à variável cep
  • 57. EXEMPLO $HTTP - INDEX.HTML Botão que quando clicado chama a função buscar
  • 58. EXEMPLO $HTTP - INDEX.HTML Essa tag e seu conteúdo só serão exibidos se houver um valor ‘endereco’ definido no escopo
  • 59. EXEMPLO $HTTP - APP.JS
  • 60. EXEMPLO $HTTP - APP.JS Utilizaremos o componente $http
  • 61. EXEMPLO $HTTP - APP.JS URL base do serviço REST
  • 62. EXEMPLO $HTTP - APP.JS Variável cep ligada com o campo de texto na página
  • 63. EXEMPLO $HTTP - APP.JS Função buscar chamada quando o botão da página é clicado
  • 64. EXEMPLO $HTTP - APP.JS Requisição GET feita ao serviço, passando o cep digitado pelo usuário
  • 65. EXEMPLO $HTTP - APP.JS Os dados retornados pela requisição são atribuídos à variável ‘endereco’ do escopo.
  • 66. API PARA ACESSO A RECURSOS ➤ Entidades (produtos, alunos, vendas, etc) são representadas como recursos e, pelo padrão REST, são acessadas e modificadas por uma api no formato: Verbo HTTP URL Descrição GET / Retorna todos GET /id Retorna um recurso POST / Adiciona um recurso PUT /id Modifica um recurso DELETE /id Remove um recurso
  • 67. ANGULAR.JS - UTILIZANDO UMA API REST ➤ A biblioteca padrão do Angular.js disponibiliza um módulo para acesso de API’s RESTful chamado Angular Resource (ngResource); ➤ Para utilizá-lo, é necessário: ➤ Carregar o script: /angular-resource.js ➤ Declarar a dependência do módulo: [‘ngResource’] ➤ Criar uma fábrica para cada API: modulo.factory('Recurso', function($resource) { return $resource('URL/:id'); });
  • 68. EXEMPLO ➤ Carregar um conjunto de posts de um blog:
  • 69. RESUMO DAS FUNÇÕES DO NGRESOURCE ➤ Obter registros: ➤ query(parâmetros de busca); ➤ Obter um registro: ➤ get(identificador do registro); ➤ Salvar registro: ➤ $save( ); ➤ Atualizar registro: ➤ update(identificador, novos valores); ➤ Remover registro: ➤ delete(identificador)
  • 70. CONCLUSÕES ➤ Há vários plugins: ➤ http://ngmodules.org/ ➤ https://angular-ui.github.io/ ➤ É possível desenvolver aplicações para dispositivos portáteis: ➤ Ionic Framework - http://ionicframework.com/ ➤ Apresentação disponível no slideshare; ➤ Exemplos disponíveis no github.