1. O documento discute abraçar o framework AngularJS para implementar arquitetura MVC no lado do cliente.
2. É explicado que frameworks como o Angular resolvem problemas como manipulação de dados e lógica nas views.
3. O framework AngularJS é então apresentado, com ênfase em sua abordagem declarativa usando diretivas e two-way data binding.
Uma Abordagem bem completa sobre o Framework, passando pelo "O Que é AngularJS, AngularJS?", Alguns Core Concepts, Bootstrap & Runtime, Mitos, Prós, Contras e finalizando com uma abordagem bem completa do que está por vir na versão 2.0 do framework.
Curso sobre AngularJS, tratando deste ambiente e ferramentas modernas de desenvolvimento até o desenvolvimento de uma aplicação usando AngularJS. Curso em duas partes.
No final foram desenvolvidas duas aplicações que podem ser vistas nos links:
https://github.com/alvarowolfx/shopping-list
https://github.com/alvarowolfx/ng-pokedex
Material Design simples e rapido com AngularJSHenrique Limas
Muito se fala hoje de aplicações nativas usando o Material Design do Google. Mas como desenvolver de modo simples, ágil e multi-plataforma na web?
Demo no Github: https://github.com/HenriqueLimas/tdc-2015-palestra-angular-material
Uma Abordagem bem completa sobre o Framework, passando pelo "O Que é AngularJS, AngularJS?", Alguns Core Concepts, Bootstrap & Runtime, Mitos, Prós, Contras e finalizando com uma abordagem bem completa do que está por vir na versão 2.0 do framework.
Curso sobre AngularJS, tratando deste ambiente e ferramentas modernas de desenvolvimento até o desenvolvimento de uma aplicação usando AngularJS. Curso em duas partes.
No final foram desenvolvidas duas aplicações que podem ser vistas nos links:
https://github.com/alvarowolfx/shopping-list
https://github.com/alvarowolfx/ng-pokedex
Material Design simples e rapido com AngularJSHenrique Limas
Muito se fala hoje de aplicações nativas usando o Material Design do Google. Mas como desenvolver de modo simples, ágil e multi-plataforma na web?
Demo no Github: https://github.com/HenriqueLimas/tdc-2015-palestra-angular-material
Overview realizado para a equipe interna sobre o AngularJS. Solução de javascript client side. Realizada pelo Ricardo Gonçalves, developer na Just Digital.
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAWilson Mendes
Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma “template engine”, tudo isso no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.
Curso sobre AngularJS, tratando deste ambiente e ferramentas modernas de desenvolvimento até o desenvolvimento de uma aplicação usando AngularJS. Curso em duas partes.
No final foram desenvolvidas duas aplicações que podem ser vistas nos links:
https://github.com/alvarowolfx/shopping-list
https://github.com/alvarowolfx/ng-pokedex
Sua aplicação AngularJS está lenta? Como otimizar a performance? Combinar outras tecnologias como workaround são paliativos, pois não resolvem o problema. Nessa palestra, entenda conceitos do núcleo do AngularJS e várias técnicas para aumentar o desempenho de suas aplicações web.
Vamos explorar conceitos fundamentais como o ciclo de vida do $rootScope e como funciona o dirty checking, assim como $compile, $watch e $emit. Veremos também boas práticas ao utilizar diretivas, filters, services e outros componentes do framework. Outro ponto abordado é a utilização de paradigmas e patterns assíncronos para melhorar o desempenho de suas aplicações.
Por fim, veremos boas práticas, como melhorar os nossos testes unitários e end-to-end, discutiremos conceitos de lazy web e conheceremo ferramentas que podem nos ajudar nesta tarefa.
Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma "template engine" aliado a conceitos de Orientação a Objetos, testes, dentre outros, no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.
Entenda as novidades que estão por vir com o AngularJS 2.0, as novas definições, facilidades, novos desafios e entenda o motivo do AngularJS ser um framework excelente para todos os momentos.
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
Interface de Usuário também é coisa de Programador, o objetivo deste treinamento é vivenciar um ambiente de desenvolvimento empregando estas tecnologias, abordando conceitos de testes unitários, integrados, padrões e boas práticas de desenvolvimento
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
Vuejs, Angularjs e Reactjs são os três principais três frameworks front-end do momento. Veja algumas semelhanças e diferenças entre cada um.
Palestra no meetup de vue.js
Overview realizado para a equipe interna sobre o AngularJS. Solução de javascript client side. Realizada pelo Ricardo Gonçalves, developer na Just Digital.
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAWilson Mendes
Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma “template engine”, tudo isso no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.
Curso sobre AngularJS, tratando deste ambiente e ferramentas modernas de desenvolvimento até o desenvolvimento de uma aplicação usando AngularJS. Curso em duas partes.
No final foram desenvolvidas duas aplicações que podem ser vistas nos links:
https://github.com/alvarowolfx/shopping-list
https://github.com/alvarowolfx/ng-pokedex
Sua aplicação AngularJS está lenta? Como otimizar a performance? Combinar outras tecnologias como workaround são paliativos, pois não resolvem o problema. Nessa palestra, entenda conceitos do núcleo do AngularJS e várias técnicas para aumentar o desempenho de suas aplicações web.
Vamos explorar conceitos fundamentais como o ciclo de vida do $rootScope e como funciona o dirty checking, assim como $compile, $watch e $emit. Veremos também boas práticas ao utilizar diretivas, filters, services e outros componentes do framework. Outro ponto abordado é a utilização de paradigmas e patterns assíncronos para melhorar o desempenho de suas aplicações.
Por fim, veremos boas práticas, como melhorar os nossos testes unitários e end-to-end, discutiremos conceitos de lazy web e conheceremo ferramentas que podem nos ajudar nesta tarefa.
Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma "template engine" aliado a conceitos de Orientação a Objetos, testes, dentre outros, no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.
Entenda as novidades que estão por vir com o AngularJS 2.0, as novas definições, facilidades, novos desafios e entenda o motivo do AngularJS ser um framework excelente para todos os momentos.
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
Interface de Usuário também é coisa de Programador, o objetivo deste treinamento é vivenciar um ambiente de desenvolvimento empregando estas tecnologias, abordando conceitos de testes unitários, integrados, padrões e boas práticas de desenvolvimento
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
Vuejs, Angularjs e Reactjs são os três principais três frameworks front-end do momento. Veja algumas semelhanças e diferenças entre cada um.
Palestra no meetup de vue.js
Desenvolvendo Bots com Inteligência Artificial para negócios em RubyAlessandro Stein
A partir da abertura de plataformas de troca de mensagens para desenvolvedores, os bots foram colocados no centro da mídia da inovação como o grande tópico do momento e considerada a nova corrida do ouro no Vale do Silício. Grandes empresas tem investido no desenvolvimento de bots para melhorar os seus modelos de negócios. O uso de bots em conjunto com algoritmos de NLP (Processamento de Linguagem Natural) torna plataformas de mensagens diretas acessíveis para negócios.
Nesta palestra você é apresentado aos conceitos básicos de bots e NLP. Além das soluções na nuvem que facilitam o uso de NLP. Por fim, a Meeka - primeira assistente pessoal de casamentos do mundo, é demonstrada como case de sucesso.
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso
In the last couple years, the web has drastically evolved and today’s business owners have had to quickly adapt & understand the benefits & advantages of today’s technology & communication applications. To be truly successful in today’s competitive marketplace, it is essential to develop & manage an internet marketing campaign & strategy that is exclusively designed for a specific demographic & target audience. Using Internet marketing to further your branding efforts will support bridging the gap between your service, product or organization to potential clients, customers & consumers. BeeRound Design Studio can assist your company or organization, plan, execute, develop & manage your next online advertisement campaign or internet marketing strategy.
For more information please contact me at: info@HugoBrioso.com or info@BeeRound.com
Palestra de Neto Marin no InterCon Dev - Android, em setembro de 2013, sobre Next Level Apps. Saiba mais em: http://intercon.imasters.com.br/dev/android/
Esta palestra, ministrada no evento Next Level Apps (Google São Paulo), referencia sites, programas, plugins e serviços que facilitam a organização e execução de aplicativos móveis.
Slides guia do tutorial de "construindo sua primeira ontologia" proferido na python brasil 2014.
Nos slides há guias e links para recursos adicionais ao tutorial
Uma palestra para explorar o Google App Engine (GAE), uma plataforma de desenvolvimento e hospedagem de aplicações web na nuvem. Aplicativos fáceis de criar, manter e escalar.
Palestrante: Carlos Duarte do Nascimento
Matemático pelo IME/USP e Gerente de Produto no Apontador, faz "artesanato" de software há 20 anos, defendendo plataformas e conteúdo livres.
[Video: http://www.youtube.com/watch?feature=player_detailpage&v=nzo9dcCMi-4#t=1169s ] Palestra que introduz o desenvolvimento de aplicativos na plataforma do Google de forma pragmática, apresentada na 5a. edição (2012) do Campus Party (#cpbr5)
Ionic Framework - Parte 1 - Iniciando um Projeto mais RobustoAlamo Saravali
O Ionic Framework é uma ferramenta de desenvolvimento de aplicativos híbridos.
Baseado no Cordova, o Ionic possibilita criar aplicativos para diversas plataformas, incluindo iOS, Android, Windows Phone, etc., com um único código.
A vantagem do Ionic para com os outros é a facilidade de desenvolvimento e o desempenho do aplicativo.
Nesta palestra eu apresento a ferramenta de linha de comando do Angular, a Angular CLI mostro como ela pode facilitar o dia a dia no desenvolvimento de uma aplicação.
Palestra oferecida em BH no evento BeagaJS.
Nesta palestra tive a oportunidade de mostrar 10 dicas pontuais para que os front-ends consigam aplicar SEO.
Como a ferramenta de linha de comando (CLI) do Angular pode nos ensinar começar um projeto e Angular? Vamos aprender nesta palestra como começar um projeto do zero usando a CLI e saber as opções que existem para as pessoas desenvolvedoras.
1. Abraçando o MVC Client Side
Sergio Azevedo
sergio.junior@caelum.com.br
@sergioazevedo
http://sagadoprogramador.com.br
Saturday, October 19, 13
2. Arquitetura “padrão”
de uma Aplicação Web
Server Side
Client Side
h
uest
p req
tt
htt
pr
esp
on
Controlador
View
Template
se
html / json /xml
Saturday, October 19, 13
Modelo
View
Renderizada
5. “A necessidade de um framework
MVC client-side, fica clara quando
você começa a manipular em suas
páginas, não só HTML mas também
dados.”
fonte: http://jster.net
http://jster.net/blog/why-should-you-use-client-side-mvc-framework#.UmH4-ZTwIjE
Saturday, October 19, 13
6. E o framework MVC
client-side que veremos hoje será:
Saturday, October 19, 13
9. VISÃO GERAL
• Framework
• Suporta
Saturday, October 19, 13
MVC Javascript, para aplicações web dinamicas
HTML 5
10. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
Saturday, October 19, 13
11. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
Saturday, October 19, 13
12. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
• Injeção
Saturday, October 19, 13
de dependencias (de graça)
13. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
• Injeção
• Two
de dependencias (de graça)
way data binding
Saturday, October 19, 13
14. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
• Injeção
• Two
de dependencias (de graça)
way data binding
• Mantido
Saturday, October 19, 13
pela Google
15. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
16. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
carrega o angular
Saturday, October 19, 13
17. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
18. COMEÇANDO
<!doctype html>
<html ng-app> bootstrap do angular
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
19. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
20. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
cria a variavel de modelo nome
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
21. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
22. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p> exibe o conteudo da variavel nome
</div>
</body>
</html>
Saturday, October 19, 13
23. COMEÇANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>
Saturday, October 19, 13
25. WORK FLOW BASICO
1. O browser recebe o html e faz executa o DOM parser
Saturday, October 19, 13
26. WORK FLOW BASICO
1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
Saturday, October 19, 13
27. WORK FLOW BASICO
1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
3. Angular busca pela diretiva ng-app
Saturday, October 19, 13
28. WORK FLOW BASICO
1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
3. Angular busca pela diretiva ng-app
4. O angular cria o serviço de compilação da pagina ($compile)
e o escopo raiz ($rootScope)
Saturday, October 19, 13
29. WORK FLOW BASICO
1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
3. Angular busca pela diretiva ng-app
4. O angular cria o serviço de compilação da pagina ($compile)
e o escopo raiz ($rootScope)
5. Angular usa o $compile para compilar o DOM e liga-lo ao
$rootScope. (HTML Compiler)
Saturday, October 19, 13
31. HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma função de link
Saturday, October 19, 13
32. HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma função de link
Link: Combina as diretivas com o escopo ($scope) e gera
assim a visão. Qualquer atleração em um modelo de um
scope será refletida na visão, assim como qualquer interação
do usuario com a visão será refletida no scope.
Saturday, October 19, 13
33. HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma função de link
Link: Combina as diretivas com o escopo ($scope) e gera
assim a visão. Qualquer atleração em um modelo de um
scope será refletida na visão, assim como qualquer interação
do usuario com a visão será refletida no scope.
“Two way data binding”
Saturday, October 19, 13
36. DIRETIVAS
• São
o jeito angular de criar páginas dinamicas.
• Angular
usa uma abordagem declarativa para expressar o
comportamento desejado dentro das views.
Saturday, October 19, 13
37. DIRETIVAS
• São
o jeito angular de criar páginas dinamicas.
• Angular
usa uma abordagem declarativa para expressar o
comportamento desejado dentro das views.
• Você
deve focar em descrever o comportamento desejado.
Saturday, October 19, 13
40. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
Saturday, October 19, 13
41. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
•
ng-init - incializar uma variavel atribuindo um valor
Saturday, October 19, 13
42. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
•
ng-init - incializar uma variavel atribuindo um valor
•
ng-repeat - o foreach do Angular
Saturday, October 19, 13
43. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
•
ng-init - incializar uma variavel atribuindo um valor
•
ng-repeat - o foreach do Angular
•
ng-click - registra um evento de click
Saturday, October 19, 13
44. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
•
ng-init - incializar uma variavel atribuindo um valor
•
ng-repeat - o foreach do Angular
•
ng-click - registra um evento de click
•
ng-disable - recebe uma expressão que se avaliada positivamente
desabilita o elemento.
Saturday, October 19, 13
45. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
•
ng-init - incializar uma variavel atribuindo um valor
•
ng-repeat - o foreach do Angular
•
ng-click - registra um evento de click
•
ng-disable - recebe uma expressão que se avaliada positivamente
desabilita o elemento.
•
ng-controller - delcara a criacao de um novo escopo de controlador.
Saturday, October 19, 13
46. Exemplo:
Exibir um text area e garantir que
o botao enviar so funcione
quando o usuario preencher no
minimo 10 caracteres
Saturday, October 19, 13
54. EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
declara que o botao so deve estar habilitado se o
</body>
</html>
texo ultrapasar o minimo de 10 caracteres
Saturday, October 19, 13
59. CONTROLADORES
• São
objetos Javascript convencionais
• Nao
• As
precisam herdar de nenhuma classe
responsabilidades de um controlador são:
Saturday, October 19, 13
60. CONTROLADORES
• São
objetos Javascript convencionais
• Nao
• As
precisam herdar de nenhuma classe
responsabilidades de um controlador são:
• Incializar
Saturday, October 19, 13
objetos do escopo ($scope). *(principal)
61. CONTROLADORES
• São
objetos Javascript convencionais
• Nao
• As
precisam herdar de nenhuma classe
responsabilidades de um controlador são:
• Incializar
objetos do escopo ($scope). *(principal)
• disponibilizar
comportamento para UI através de funções
ligadas ao $scope.
Saturday, October 19, 13
62. CONTROLADORES
• São
objetos Javascript convencionais
o de
o us
itar
• Nao precisam herdare ev
ça s el
ev de nenhumaaclasseo
cê d init. Fa
Vo
mod
nges de adores
zaçõ controlador são:
• As responsabilidadeslde um ntrol
cia i e co
ini
tro d
den
• Incializar objetos do escopo ($scope). *(principal)
• disponibilizar
comportamento para UI através de funções
ligadas ao $scope.
Saturday, October 19, 13
68. EXEMPLO USANDO CONTROLLER
arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
faz uso de uma funcao do $scope
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
faz uso de uma funcao do $scope
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>
Saturday, October 19, 13
73. EXEMPLO USANDO CONTROLLER
arquivo message-controller.js:
function MessageController($scope){
$scope.descricao = "";
inclui uma funcao no $scope para ser utilizada na UI
$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}
Saturday, October 19, 13
78. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
Saturday, October 19, 13
79. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
Saturday, October 19, 13
80. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
Saturday, October 19, 13
81. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
•
Todos os escopos possuem referencias para seus “pais”
Saturday, October 19, 13
82. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
•
Todos os escopos possuem referencias para seus “pais”
•
Ou seja eles são organizados em uma arvore de escopos
Saturday, October 19, 13
83. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
•
Todos os escopos possuem referencias para seus “pais”
•
Ou seja eles são organizados em uma arvore de escopos
•
Onde o nó raiz é o $rootScope
Saturday, October 19, 13
86. MODELOS
•
Modelos também sao objetos Javascript comuns.
• Não
é necessario herdar de nenhum tipo especifico
Saturday, October 19, 13
87. MODELOS
•
Modelos também sao objetos Javascript comuns.
• Não
é necessario herdar de nenhum tipo especifico
• Na
pratica qualquer variavel associada ao escopo é um
modelo para o Angular
Saturday, October 19, 13
88. MODELOS
•
Modelos também sao objetos Javascript comuns.
• Não
é necessario herdar de nenhum tipo especifico
• Na
pratica qualquer variavel associada ao escopo é um
modelo para o Angular
•É
possivel utilizar como modelos, os seus objetos de dominio
Javascript já existentes. Basta associa-los ao $scope.
Saturday, October 19, 13
89. EXEMPLOS DE MODELOS
arquivo outro-controller.js:
function OutroController($scope){
$scope.descricao = ""; //modelo
$scope.usuario = { nome: “Joao”, idade: 20 }; //modelo
$scope.cidades = [“rio de janeiro”,”sao paulo”]; //modelo
$scope.produto = new Produto(); //modelo*
}
* considerando que exista a definição para o classe Produto.
Saturday, October 19, 13
115. FILTROS
• São
recursos do Angular para permitir a construção de
expressões mais complexas.
Saturday, October 19, 13
116. FILTROS
• São
recursos do Angular para permitir a construção de
expressões mais complexas.
• O Angular
Saturday, October 19, 13
ja vem “de fabrica” com alguns bons filtros.
117. FILTROS
• São
recursos do Angular para permitir a construção de
expressões mais complexas.
• O Angular
• São
ja vem “de fabrica” com alguns bons filtros.
dividios em 2 tipos:
• Formating
Filters
• currency, date, number, lowercase, uppercase
• Array Transforming
Saturday, October 19, 13
filters
e json
122. LISTA DE EMPREGADOS - 1
arquivo filtro2.html:
<div ng-controller="EmpresaController">
...
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados |filter:criteria |
orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
<label> Pesquisar Por:
<input ng-model="criteria"/>
</div>
Saturday, October 19, 13
123. LISTA DE EMPREGADOS - 1
arquivo filtro2.html:
<div ng-controller="EmpresaController">
...
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados |filter:criteria |
orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
<label> Pesquisar Por:
<input ng-model="criteria"/>
</div>
Saturday, October 19, 13
124. LISTA DE EMPREGADOS - 1
arquivo filtro2.html:
<div ng-controller="EmpresaController">
...
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados |filter:criteria |
orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
<label> Pesquisar Por:
<input ng-model="criteria"/>
</div>
Saturday, October 19, 13
125. OUTROS RECURSOS DO
ANGULAR
•
Services
•
•
$http, $timeout, $window, $route entre outros...
Custom Directives
•
Uma forma de extender o HTML, e criar seus proprios “componentes”
•
Modules
•
Factories
•
Dependency Injection
Saturday, October 19, 13
126. COMO FICA A COMUNICAÇÃO
COM O SERVER SIDE?
JSON
Saturday, October 19, 13
Java
Ruby
.Net
Node.js
Phyton
127. COMO FICA A COMUNICAÇÃO
COM O SERVER SIDE?
JSON
ttp e são
s $h rJS,
rviço ngula
s se do A
O
esta
izar
ce
esour para real o
$r
caçã
ões
opç
omuni
c
Saturday, October 19, 13
Java
Ruby
.Net
Node.js
Phyton
130. CONSIDERAÇÕES
Cada caso é um caso, avalie bem antes de decidir que
abordagem utilizar. Existem relatos positivos e negativos
quanto ao uso de frameworks MVC client-side
Saturday, October 19, 13
131. CONSIDERAÇÕES
Cada caso é um caso, avalie bem antes de decidir que
abordagem utilizar. Existem relatos positivos e negativos
quanto ao uso de frameworks MVC client-side
Client-Side MVC is not a silver bullet, é um post bem
famoso
Saturday, October 19, 13
132. CONSIDERAÇÕES
Cada caso é um caso, avalie bem antes de decidir que
abordagem utilizar. Existem relatos positivos e negativos
quanto ao uso de frameworks MVC client-side
Client-Side MVC is not a silver bullet, é um post bem
famoso
http://mir.aculo.us/2013/02/26/client-side-mvc-is-not-a-silver-bullet
Saturday, October 19, 13